Add theme support

Author: brentvatne

example/App.js

@@ -7,8 +7,7 @@ import {
 } from 'react-navigation';
 import { List, Divider } from 'react-native-paper';
 
-// Unclear why this isn't getitng picked up :O
-// eslint-disable-next-line import/named
+// eslint-disable-next-line import/no-unresolved
 import { Assets as StackAssets } from 'react-navigation-stack';
 
 import SimpleTabs from './src/SimpleTabs';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-material-bottom-tabs",
-  "version": "1.0.0-alpha.6",
+  "version": "1.1.1",
   "description": "Material Bottom Tab Navigation component for React Navigation",
   "main": "dist/index.js",
   "files": [
@@ -44,7 +44,7 @@
   "dependencies": {
     "hoist-non-react-statics": "^2.5.0",
     "prop-types": "^15.6.0",
-    "react-navigation-tabs": "1.0.0-alpha.4"
+    "react-navigation-tabs": "~1.2.0"
   },
   "devDependencies": {
     "@expo/vector-icons": "^6.2.0",

src/navigators/createMaterialBottomTabNavigator.js

@@ -1,21 +1,79 @@
 /* @flow */
 
 import * as React from 'react';
+import { ThemeContext } from '@react-navigation/core';
 import { BottomNavigation } from 'react-native-paper';
 import { createTabNavigator, type InjectedProps } from 'react-navigation-tabs';
 
 type Props = InjectedProps & {
   activeTintColor?: string,
+  activeTintColorLight?: string,
+  activeTintColorDark?: string,
   inactiveTintColor?: string,
+  inactiveTintColorLight?: string,
+  inactiveTintColorDark?: string,
+  // todo: once this is properly typed, add other types for themed props
 };
 
 class BottomNavigationView extends React.Component<Props> {
+  static contextType = ThemeContext;
+
   _getColor = ({ route }) => {
     const { descriptors } = this.props;
     const descriptor = descriptors[route.key];
     const options = descriptor.options;
 
-    return options.tabBarColor;
+    if (this.context === 'dark' && options.tabBarColorDark) {
+      return options.tabBarColorDark;
+    } else if (this.tabBarColorLight) {
+      return options.tabBarColorLight;
+    } else {
+      return options.tabBarColor;
+    }
+  };
+
+  _getActiveTintColor = () => {
+    let {
+      activeTintColor,
+      activeTintColorLight,
+      activeTintColorDark,
+    } = this.props;
+
+    if (this.context === 'dark' && activeTintColorDark) {
+      return activeTintColorDark;
+    } else if (activeTintColorLight) {
+      return activeTintColorLight;
+    } else {
+      return activeTintColor;
+    }
+  };
+
+  _getInactiveTintColor = () => {
+    let {
+      inactiveTintColor,
+      inactiveTintColorLight,
+      inactiveTintColorDark,
+    } = this.props;
+
+    if (this.context === 'dark' && inactiveTintColorDark) {
+      return inactiveTintColorDark;
+    } else if (inactiveTintColorLight) {
+      return inactiveTintColorLight;
+    } else {
+      return inactiveTintColor;
+    }
+  };
+
+  _getBarStyle = () => {
+    let { barStyle, barStyleLight, barStyleDark } = this.props;
+
+    if (this.context === 'dark' && barStyleDark) {
+      return barStyleDark;
+    } else if (barStyleLight) {
+      return barStyleLight;
+    } else {
+      return barStyle;
+    }
   };
 
   _isVisible() {
@@ -32,15 +90,16 @@ class BottomNavigationView extends React.Component<Props> {
 
   render() {
     const {
-      activeTintColor,
-      inactiveTintColor,
       navigation,
       // eslint-disable-next-line no-unused-vars
       descriptors,
-      barStyle,
       ...rest
     } = this.props;
 
+    const activeTintColor = this._getActiveTintColor();
+    const inactiveTintColor = this._getInactiveTintColor();
+    const barStyle = this._getBarStyle();
+
     const isVisible = this._isVisible();
     const extraStyle =
       typeof isVisible === 'boolean'
@@ -50,9 +109,9 @@ class BottomNavigationView extends React.Component<Props> {
     return (
       <BottomNavigation
         // Pass these for backward compaibility
+        {...rest}
         activeColor={activeTintColor}
         inactiveColor={inactiveTintColor}
-        {...rest}
         renderIcon={this._renderIcon}
         barStyle={[barStyle, extraStyle]}
         navigationState={navigation.state}