update TabController underline transition, support tabbar item color transition

Author: ethanshar

src/components/tabController/TabBar.js

@@ -52,6 +52,10 @@ class TabBar extends PureComponent {
      * custom label style
      */
     labelStyle: RNText.propTypes.style,
+    /**
+     * custom selected label style
+     */
+    selectedLabelStyle: RNText.propTypes.style,
     /**
      * the default label color
      */
@@ -229,6 +233,7 @@ class TabBar extends PureComponent {
       labelColor,
       selectedLabelColor,
       labelStyle,
+      selectedLabelStyle,
       uppercase,
       iconColor,
       selectedIconColor,
@@ -246,6 +251,7 @@ class TabBar extends PureComponent {
             labelColor={labelColor}
             selectedLabelColor={selectedLabelColor}
             labelStyle={labelStyle}
+            selectedLabelStyle={selectedLabelStyle}
             uppercase={uppercase}
             iconColor={iconColor}
             selectedIconColor={selectedIconColor}
@@ -270,6 +276,7 @@ class TabBar extends PureComponent {
           labelColor,
           selectedLabelColor,
           labelStyle,
+          selectedLabelStyle,
           uppercase,
           iconColor,
           selectedIconColor,

src/components/tabController/TabBarItem.js

@@ -1,11 +1,11 @@
 // TODO: support commented props
 import React, {PureComponent} from 'react';
-import {StyleSheet, processColor, Text as RNText} from 'react-native';
+import {StyleSheet, /* processColor, */ Text as RNText} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import Reanimated from 'react-native-reanimated';
 import {State} from 'react-native-gesture-handler';
-// import {interpolateColor} from 'react-native-redash';
+import {interpolateColor} from 'react-native-redash';
 import {Colors, Typography, Spacings} from '../../style';
 import Badge from '../../components/badge';
 import {TouchableOpacity} from '../../incubator';
@@ -15,6 +15,18 @@ const {cond, eq, call, block, event, and, defined} = Reanimated;
 const DEFAULT_LABEL_COLOR = Colors.black;
 const DEFAULT_SELECTED_LABEL_COLOR = Colors.blue30;
 
+const DEFAULT_LABEL_STYLE = {
+  ...Typography.text80,
+  fontWeight: '400',
+  letterSpacing: 0
+};
+
+const DEFAULT_SELECTED_LABEL_STYLE = {
+  ...Typography.text80,
+  fontWeight: '700',
+  letterSpacing: 0
+};
+
 /**
  * @description: TabController's TabBarItem
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
@@ -32,6 +44,10 @@ export default class TabBarItem extends PureComponent {
      * custom label style
      */
     labelStyle: RNText.propTypes.style,
+    /**
+     * custom selected label style
+     */
+    selectedLabelStyle: RNText.propTypes.style,
     /**
      * the default label color
      */
@@ -111,7 +127,7 @@ export default class TabBarItem extends PureComponent {
       nativeEvent: {state: this.props.state}
     }
   ],
-  {useNativeDriver: true},);
+  {useNativeDriver: true});
 
   onLayout = ({
     nativeEvent: {
@@ -154,27 +170,45 @@ export default class TabBarItem extends PureComponent {
 
   getLabelStyle() {
     const {itemWidth} = this.state;
-    const {index, currentPage, labelColor, selectedLabelColor, labelStyle, ignore} = this.props;
-    const fontWeight = cond(and(eq(currentPage, index), defined(itemWidth)), '700', '400');
-    const activeColor = selectedLabelColor || DEFAULT_SELECTED_LABEL_COLOR;
+    const {
+      index,
+      currentPage,
+      targetPage,
+      labelColor,
+      selectedLabelColor,
+      ignore
+    } = this.props;
+
+    const labelStyle = {...DEFAULT_LABEL_STYLE, ...this.props.labelStyle};
+    const selectedLabelStyle = {...DEFAULT_SELECTED_LABEL_STYLE, ...this.props.selectedLabelStyle};
+
+    const fontWeight = cond(and(eq(targetPage, index), defined(itemWidth)),
+      selectedLabelStyle.fontWeight,
+      labelStyle.fontWeight);
+    const letterSpacing = cond(and(eq(targetPage, index), defined(itemWidth)),
+      selectedLabelStyle.letterSpacing,
+      labelStyle.letterSpacing);
+  
     const inactiveColor = labelColor || DEFAULT_LABEL_COLOR;
-    
-    const color = cond(eq(currentPage, index),
-      processColor(activeColor),
-      processColor(ignore ? activeColor : inactiveColor),);
+    const activeColor = !ignore ? selectedLabelColor || DEFAULT_SELECTED_LABEL_COLOR : inactiveColor;
+
+    // const color = cond(eq(currentPage, index),
+    //   processColor(activeColor),
+    //   processColor(ignore ? activeColor : inactiveColor),);
 
     // Animated color
-    /* const color = interpolateColor(currentPage, {
+    const color = interpolateColor(currentPage, {
       inputRange: [index - 1, index, index + 1],
       outputRange: [inactiveColor, activeColor, inactiveColor]
-    }); */
+    });
 
     return [
+      labelStyle,
       {
         fontWeight,
+        letterSpacing,
         color
-      },
-      labelStyle
+      }
     ];
   }
 
@@ -188,7 +222,7 @@ export default class TabBarItem extends PureComponent {
       // TODO: using processColor here broke functionality,
       // not using it seem to not be very performant
       activeColor,
-      ignore ? activeColor : inactiveColor,);
+      ignore ? activeColor : inactiveColor);
 
     return {
       tintColor

src/components/tabController/index.js

@@ -128,7 +128,7 @@ class TabController extends Component {
       cond(neq(currentPage, toPage), [
         set(isAnimating, 1),
         set(currentPage,
-          timing({clock, from: fromPage, to: toPage, duration: 300, easing: Easing.bezier(0.34, 1.56, 0.64, 1)}))
+          timing({clock, from: fromPage, to: toPage, duration: 300, easing: Easing.bezier(0.34, 1.3, 0.64, 1)}))
       ]),
       // Set isAnimating flag off
       cond(and(eq(isAnimating, 1), not(clockRunning(clock))), set(isAnimating, 0)),