feat: add activeColor and inactiveColor to customizethe label

README.md

@@ -27,7 +27,7 @@ A cross-platform Tab View component for React Native.
 Open a Terminal in the project root and run:
 
 ```sh
-yarn add react-native-tab-view
+yarn add react-native-tab-view@alpha
 ```
 
 You also need to install and link [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated). Follow the instructions on the linked repos to configure them. This step is unnecessary if you use Expo.
@@ -272,27 +272,27 @@ renderTabBar={props =>
 
 ##### `getLabelText`
 
-Function which takes the current scene and returns the label text for the tab. Uses `route.title` by default.
+Function which takes an object with the current route and returns the label text for the tab. Uses `route.title` by default.
 
 ```js
 getLabelText={({ route }) => route.title}
 ```
 
 ##### `getAccessible`
 
-Function which takes the current scene returns a boolean to indicate whether to mark a tab as `accessible`. Defaults to `true`.
+Function which takes an object with the current route and returns a boolean to indicate whether to mark a tab as `accessible`. Defaults to `true`.
 
 ##### `getAccessibilityLabel`
 
-Function which takes the current scene and returns a accessibility label for the tab button. Uses `route.accessibilityLabel` by default if specified, otherwise uses the route title.
+Function which takes an object with the current route and returns a accessibility label for the tab button. Uses `route.accessibilityLabel` by default if specified, otherwise uses the route title.
 
 ```js
 getAccessibilityLabel={({ route }) => route.accessibilityLabel}
 ```
 
 ##### `testID`
 
-Function which takes the current scene and returns a test id for the tab button to locate this tab button in tests. Uses `route.testID` by default.
+Function which takes an object with the current route and returns a test id for the tab button to locate this tab button in tests. Uses `route.testID` by default.
 
 ```js
 getTestID={({ route }) => route.testID}
@@ -307,19 +307,36 @@ Get the id to locate this tab button in tests, uses `route.testID` by default.
 
 ##### `renderIcon`
 
-Function which takes the current scene and returns a custom React Element to be used as a icon.
+Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a icon.
+
+```js
+renderIcon={({ route, focused, color }) => (
+  <Icon
+    name={focused ? 'abums' : 'albums-outlined'}
+    color={color}
+  />
+)}
+```
 
 ##### `renderLabel`
 
-Function which takes the current scene and returns a custom React Element to be used as a label.
+Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a label.
+
+```js
+renderLabel={({ route, focused, color }) => (
+  <Text style={{ color, margin: 8 }}>
+      {route.title}
+  </Text>
+)}
+```
 
 ##### `renderIndicator`
 
-Function which takes the current scene and returns a custom React Element to be used as a tab indicator.
+Function which takes an object with the current route and returns a custom React Element to be used as a tab indicator.
 
 ##### `renderBadge`
 
-Function which takes the current scene and returns a custom React Element to be used as a badge.
+Function which takes an object with the current route and returns a custom React Element to be used as a badge.
 
 ##### `onTabPress`
 
@@ -329,6 +346,14 @@ Function to execute on tab press. It receives the scene for the pressed tab, use
 
 Function to execute on tab long press, use for things like showing a menu with more options
 
+##### `activeColor`
+
+Custom color for icon and label in the active tab.
+
+##### `inactiveColor`
+
+Custom color for icon and label in the inactive tab.
+
 ##### `pressColor`
 
 Color for material ripple (Android >= 5.0 only).

example/src/ScrollableTabBarExample.js

@@ -80,7 +80,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#ffeb3b',
   },
   label: {
-    color: '#fff',
     fontWeight: '400',
   },
 });

example/src/TabBarIconExample.js

@@ -37,8 +37,8 @@ export default class TabBarIconExample extends React.Component<*, State> {
       index,
     });
 
-  _renderIcon = ({ route }) => (
-    <Ionicons name={route.icon} size={24} color="white" />
+  _renderIcon = ({ route, color }) => (
+    <Ionicons name={route.icon} size={24} color={color} />
   );
 
   _renderTabBar = props => {

src/TabBar.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
-import { StyleSheet, View, ScrollView, Platform } from 'react-native';
+import { StyleSheet, View, ScrollView } from 'react-native';
 import Animated from 'react-native-reanimated';
 import TabBarItem from './TabBarItem';
 import TabBarIndicator, {
@@ -16,14 +16,24 @@ import type { Scene, SceneRendererProps } from './types';
 type Props<T> = SceneRendererProps<T> & {
   scrollEnabled?: boolean,
   bounces?: boolean,
+  activeColor?: string,
+  inactiveColor?: string,
   pressColor?: string,
   pressOpacity?: number,
   getLabelText: (scene: Scene<T>) => ?string,
   getAccessible: (scene: Scene<T>) => ?boolean,
   getAccessibilityLabel: (scene: Scene<T>) => ?string,
   getTestID: (scene: Scene<T>) => ?string,
-  renderLabel?: (scene: Scene<T>) => React.Node,
-  renderIcon?: (scene: Scene<T>) => React.Node,
+  renderLabel?: (scene: {
+    route: T,
+    focused: boolean,
+    color: string,
+  }) => React.Node,
+  renderIcon?: (scene: {
+    route: T,
+    focused: boolean,
+    color: string,
+  }) => React.Node,
   renderBadge?: (scene: Scene<T>) => React.Node,
   renderIndicator: (props: IndicatorProps<T>) => React.Node,
   onTabPress?: (scene: Scene<T>) => mixed,
@@ -234,6 +244,8 @@ export default class TabBar<T: *> extends React.Component<Props<T>, State> {
       renderBadge,
       renderIcon,
       renderLabel,
+      activeColor,
+      inactiveColor,
       pressColor,
       pressOpacity,
       tabStyle,
@@ -305,7 +317,7 @@ export default class TabBar<T: *> extends React.Component<Props<T>, State> {
               <TabBarItem
                 key={route.key}
                 position={position}
-                scene={{ route }}
+                route={route}
                 tabWidth={tabWidth}
                 navigationState={navigationState}
                 scrollEnabled={scrollEnabled}
@@ -318,6 +330,8 @@ export default class TabBar<T: *> extends React.Component<Props<T>, State> {
                 renderLabel={renderLabel}
                 tabStyle={tabStyle}
                 labelStyle={labelStyle}
+                activeColor={activeColor}
+                inactiveColor={inactiveColor}
                 pressColor={pressColor}
                 pressOpacity={pressOpacity}
                 onTabPress={this._handleTabPress}
@@ -336,19 +350,18 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scroll: {
-    overflow: Platform.OS === 'web' ? ('auto': any) : 'scroll',
+    overflow: 'scroll',
   },
   tabBar: {
     backgroundColor: '#2196f3',
     elevation: 4,
-    shadowColor: 'black',
-    shadowOpacity: 0.1,
-    shadowRadius: StyleSheet.hairlineWidth,
-    shadowOffset: {
-      height: StyleSheet.hairlineWidth,
-    },
-    // We don't need zIndex on Android, disable it since it's buggy
-    zIndex: Platform.OS === 'android' ? 0 : 1,
+    // shadowColor: 'black',
+    // shadowOpacity: 0.1,
+    // shadowRadius: StyleSheet.hairlineWidth,
+    // shadowOffset: {
+    //   height: StyleSheet.hairlineWidth,
+    // },
+    zIndex: 1,
   },
   tabContent: {
     flexDirection: 'row',