Refactor/tab controller (#739)

* refactor tab controller using react-native-redash library

* support centering selected item in TabController.TabBar

* update TabController example screen

* minor fix in how we pass style

* fix initial index different than zero

Author: ethanshar

demo/src/screens/componentScreens/TabControllerScreen/index.js

@@ -13,9 +13,10 @@ const TABS = ['Home', 'Posts', 'Reviews', 'Videos', 'Photos', 'Events', 'About',
 class TabControllerScreen extends Component {
   state = {
     asCarousel: true,
+    centerSelected: false,
     selectedIndex: 0,
     items: _.chain(TABS)
-      .map(tab => ({label: tab, key: tab}))
+      .map((tab) => ({label: tab, key: tab}))
       .value(),
     key: Date.now()
   };
@@ -42,17 +43,21 @@ class TabControllerScreen extends Component {
     }
   };
 
-  
-
-
   toggleCarouselMode = () => {
     this.setState({
       asCarousel: !this.state.asCarousel,
       key: this.state.asCarousel ? 'asCarousel' : 'staticPages'
     });
   };
 
-  onChangeIndex = selectedIndex => {
+  toggleCenterSelected = () => {
+    this.setState({
+      centerSelected: !this.state.centerSelected,
+      key: Date.now()
+    });
+  };
+
+  onChangeIndex = (selectedIndex) => {
     this.setState({selectedIndex});
   };
 
@@ -97,7 +102,7 @@ class TabControllerScreen extends Component {
   }
 
   render() {
-    const {key, selectedIndex, asCarousel, items} = this.state;
+    const {key, selectedIndex, asCarousel, centerSelected, items} = this.state;
     return (
       <View flex bg-grey70>
         <TabController
@@ -117,18 +122,29 @@ class TabControllerScreen extends Component {
             // iconColor={'green'}
             // selectedIconColor={'blue'}
             activeBackgroundColor={Colors.blue60}
+            centerSelected={centerSelected}
           >
             {/* {this.renderTabItems()} */}
           </TabController.TabBar>
           {this.renderTabPages()}
         </TabController>
-        <Button
-          bg-grey20={!asCarousel}
-          bg-green30={asCarousel}
-          label={`Carousel:${asCarousel ? 'ON' : 'OFF'}`}
-          style={{position: 'absolute', bottom: 100, right: 20}}
-          onPress={this.toggleCarouselMode}
-        />
+        <View absB left margin-20 marginB-100>
+          <Button
+            bg-grey20={!asCarousel}
+            bg-green30={asCarousel}
+            label={`Carousel : ${asCarousel ? 'ON' : 'OFF'}`}
+            marginB-12
+            size="small"
+            onPress={this.toggleCarouselMode}
+          />
+          <Button
+            bg-grey20={!centerSelected}
+            bg-green30={centerSelected}
+            label={`centerSelected : ${centerSelected ? 'ON' : 'OFF'}`}
+            size="small"
+            onPress={this.toggleCenterSelected}
+          />
+        </View>
       </View>
     );
   }

demo/src/screens/componentScreens/TabControllerScreen/tab1.js

@@ -6,18 +6,21 @@ class Tab1 extends Component {
   state = {};
   render() {
     return (
-      <View flex padding-20 spread center>
+      <View flex padding-20>
         <Image
           style={StyleSheet.absoluteFillObject}
+          overlayType="top"
           source={{
             uri:
               'https://images.unsplash.com/photo-1553969923-bbf0cac2666b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80'
           }}
         />
         <Text text40 white>
-          TAB 1
+          Home
         </Text>
-        <Button marginT-20 label="Show Me"/>
+        <View absR marginR-20>
+          <Button marginT-20 round style={{width: 50}} size="small" iconSource={Assets.icons.search} white/>
+        </View>
       </View>
     );
   }

demo/src/screens/componentScreens/TabControllerScreen/tab2.js

@@ -16,15 +16,16 @@ class Tab2 extends Component {
   render() {
     const {loading} = this.state;
     return (
-      <View flex padding-20 center>
+      <View flex padding-20>
         <Image
           style={StyleSheet.absoluteFillObject}
+          overlayType="top"
           source={{
             uri:
               'https://images.unsplash.com/photo-1551376347-075b0121a65b?ixlib=rb-1.2.1&auto=format&fit=crop&w=2468&q=80'
           }}
         />
-        <Text text40>{loading ? 'Loading...' : ' TAB 2'}</Text>
+        <Text text40 white>{loading ? 'Loading...' : ' Posts'}</Text>
       </View>
     );
   }

demo/src/screens/componentScreens/TabControllerScreen/tab3.js

@@ -36,7 +36,7 @@ class Tab2 extends Component {
     return (
       <ScrollView>
         <View flex padding-20>
-          <Text text40>TAB 3</Text>
+          <Text text40>Reviews</Text>
 
           {loading && (
             <Text marginT-20 text60>
@@ -45,7 +45,7 @@ class Tab2 extends Component {
           )}
 
           {!loading &&
-            _.times(100, index => {
+            _.times(20, index => {
               return (
                 <Card row centerV margin-20 padding-20 key={index} onPress={_.noop}>
                   <Avatar

package.json

@@ -49,6 +49,7 @@
     "prop-types": "^15.5.10",
     "react-native-animatable": "^1.1.0",
     "react-native-color": "0.0.10",
+    "react-native-redash": "^11.2.1",
     "react-native-text-size": "4.0.0-rc.1",
     "semver": "^5.5.0",
     "url-parse": "^1.2.0"

src/components/tabController/PageCarousel.js

@@ -29,13 +29,13 @@ class PageCarousel extends PureComponent {
   scrollToPage = (pageIndex, animated) => {
     const node = _.invoke(this.carousel, 'current.getNode');
     if (node) {
-      node.scrollTo({x: pageIndex * Constants.screenWidth, animated});
+      node.scrollTo({x: pageIndex * Constants.screenWidth, animated: false});
     }
   };
 
   renderCodeBlock = () => {
-    const {currentPage} = this.context;
-    return block([Animated.onChange(currentPage, call([currentPage], this.onTabChange))]);
+    const {targetPage} = this.context;
+    return block([Animated.onChange(targetPage, [call([targetPage], this.onTabChange)])]);
   };
 
   render() {

src/components/tabController/TabBar.js

@@ -2,7 +2,7 @@
 // TODO: disable scroll when content width is shorter than screen width
 import React, {PureComponent} from 'react';
 import {StyleSheet, ScrollView, ViewPropTypes, Platform, Text as RNText} from 'react-native';
-import Reanimated, {Easing} from 'react-native-reanimated';
+import Reanimated from 'react-native-reanimated';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
@@ -17,22 +17,7 @@ import {LogService} from '../../services';
 
 const DEFAULT_HEIGHT = 48;
 const INDICATOR_INSET = Spacings.s4;
-const {
-  Code,
-  Clock,
-  Value,
-  and,
-  eq,
-  neq,
-  cond,
-  stopClock,
-  startClock,
-  interpolate,
-  Extrapolate,
-  timing,
-  block,
-  set
-} = Reanimated;
+const {Code, Value, interpolate, block, set} = Reanimated;
 
 /**
  * @description: TabController's TabBar component
@@ -95,7 +80,11 @@ class TabBar extends PureComponent {
     /**
      * The TabBar container width
      */
-    containerWidth: PropTypes.number
+    containerWidth: PropTypes.number,
+    /**
+     * Pass to center selected item
+     */
+    centerSelected: PropTypes.bool
   };
 
   static defaultProps = {
@@ -115,6 +104,7 @@ class TabBar extends PureComponent {
     this.tabBarScrollOffset = 0;
 
     this._itemsWidths = _.times(itemsCount, () => null);
+    this._itemsOffsets = _.times(itemsCount, () => null);
     this._indicatorOffset = new Value(0);
     this._indicatorWidth = new Value(0);
 
@@ -136,7 +126,7 @@ class TabBar extends PureComponent {
   }
 
   get children() {
-    return _.filter(this.props.children, child => !!child);
+    return _.filter(this.props.children, (child) => !!child);
   }
 
   get itemsCount() {
@@ -148,6 +138,11 @@ class TabBar extends PureComponent {
     }
   }
 
+  get centerOffset() {
+    const {centerSelected} = this.props;
+    return centerSelected ? Constants.screenWidth / 2 : 0;
+  }
+
   registerTabItems() {
     const {registerTabItems} = this.context;
     const {items} = this.props;
@@ -176,41 +171,44 @@ class TabBar extends PureComponent {
 
   // TODO: move this logic into a ScrollPresenter or something
   focusSelected = ([index]) => {
-    const {itemsOffsets, itemsWidths} = this.state;
-    const itemOffset = itemsOffsets[index];
-    const itemWidth = itemsWidths[index];
+    const {centerSelected} = this.props;
+    const itemOffset = this._itemsOffsets[index];
+    const itemWidth = this._itemsWidths[index];
+
     if (itemOffset && itemWidth) {
-      if (itemOffset < this.tabBarScrollOffset) {
+      if (centerSelected) {
+        this.tabBar.current.scrollTo({x: itemOffset - this.centerOffset + itemWidth / 2});
+      } else if (itemOffset < this.tabBarScrollOffset) {
         this.tabBar.current.scrollTo({x: itemOffset - itemWidth});
       } else if (itemOffset + itemWidth > this.tabBarScrollOffset + this.containerWidth) {
         const offsetChange = Math.max(0, itemOffset - (this.tabBarScrollOffset + this.containerWidth));
         this.tabBar.current.scrollTo({x: this.tabBarScrollOffset + offsetChange + itemWidth});
       }
     }
-  }
+  };
 
-  onItemLayout = (itemWidth, itemIndex) => {
-    this._itemsWidths[itemIndex] = itemWidth;
+  onItemLayout = ({width, x}, itemIndex) => {
+    this._itemsWidths[itemIndex] = width;
+    this._itemsOffsets[itemIndex] = x;
     if (!_.includes(this._itemsWidths, null)) {
       const {selectedIndex} = this.context;
-      const itemsOffsets = _.map(this._itemsWidths,
-        (w, index) => INDICATOR_INSET + _.sum(_.take(this._itemsWidths, index)));
-      const itemsWidths = _.map(this._itemsWidths, width => width - INDICATOR_INSET * 2);
+      const itemsOffsets = _.map(this._itemsOffsets, offset => offset + INDICATOR_INSET);
+      const itemsWidths = _.map(this._itemsWidths, (width) => width - INDICATOR_INSET * 2);
 
       this.setState({itemsWidths, itemsOffsets});
       const selectedItemOffset = itemsOffsets[selectedIndex] - INDICATOR_INSET;
-      
-      if (selectedItemOffset + this._itemsWidths[selectedIndex] > Constants.screenWidth) {  
+
+      if (selectedItemOffset + this._itemsWidths[selectedIndex] > Constants.screenWidth) {
         this.tabBar.current.scrollTo({x: selectedItemOffset, animated: true});
       }
     }
   };
 
   onScroll = ({nativeEvent: {contentOffset}}) => {
     this.tabBarScrollOffset = contentOffset.x;
-  }
+  };
 
-  onContentSizeChange = width => {
+  onContentSizeChange = (width) => {
     if (width > this.containerWidth) {
       this.setState({scrollEnabled: true});
     }
@@ -288,29 +286,19 @@ class TabBar extends PureComponent {
   }
 
   renderCodeBlock = () => {
-    const {carouselOffset, asCarousel, currentPage} = this.context;
+    const {currentPage, targetPage} = this.context;
     const {itemsWidths, itemsOffsets} = this.state;
     const nodes = [];
 
-    if (asCarousel) {
-      nodes.push(set(this._indicatorOffset,
-        interpolate(carouselOffset, {
-          inputRange: itemsOffsets.map((value, index) => index * Constants.screenWidth),
-          outputRange: itemsOffsets,
-          extrapolate: Extrapolate.CLAMP
-        })),
-      set(this._indicatorWidth,
-        interpolate(carouselOffset, {
-          inputRange: itemsWidths.map((value, index) => index * Constants.screenWidth),
-          outputRange: itemsWidths,
-          extrapolate: Extrapolate.CLAMP
-        })));
-    } else {
-      nodes.push(set(this._indicatorOffset, runIndicatorTimer(new Clock(), currentPage, itemsOffsets)),
-        set(this._indicatorWidth, runIndicatorTimer(new Clock(), currentPage, itemsWidths)));
-    }
+    nodes.push(set(this._indicatorOffset,
+      interpolate(currentPage, {
+        inputRange: itemsOffsets.map((v, i) => i),
+        outputRange: itemsOffsets
+      })));
+    nodes.push(set(this._indicatorWidth,
+      interpolate(currentPage, {inputRange: itemsWidths.map((v, i) => i), outputRange: itemsWidths})));
 
-    nodes.push(Reanimated.onChange(currentPage, Reanimated.call([currentPage], this.focusSelected)));
+    nodes.push(Reanimated.onChange(targetPage, Reanimated.call([targetPage], this.focusSelected)));
 
     return block(nodes);
   };
@@ -334,7 +322,9 @@ class TabBar extends PureComponent {
           scrollEventThrottle={100}
           testID={testID}
         >
-          <View style={[styles.tabBar, height && {height}]}>{this.renderTabBarItems()}</View>
+          <View style={[styles.tabBar, height && {height}, {paddingHorizontal: this.centerOffset}]}>
+            {this.renderTabBarItems()}
+          </View>
           {this.renderSelectedIndicator()}
         </ScrollView>
         {_.size(itemsWidths) > 1 && <Code>{this.renderCodeBlock}</Code>}
@@ -389,38 +379,4 @@ const styles = StyleSheet.create({
   }
 });
 
-function runIndicatorTimer(clock, currentPage, values) {
-  const state = {
-    finished: new Value(0),
-    position: new Value(0),
-    time: new Value(0),
-    frameTime: new Value(0)
-  };
-
-  const config = {
-    duration: 200,
-    toValue: new Value(100),
-    easing: Easing.inOut(Easing.ease)
-  };
-
-  return block([
-    ..._.map(values, (value, index) => {
-      return cond(and(eq(currentPage, index), neq(config.toValue, index)), [
-        set(state.finished, 0),
-        set(state.time, 0),
-        set(state.frameTime, 0),
-        set(config.toValue, index),
-        startClock(clock)
-      ]);
-    }),
-    timing(clock, state, config),
-    cond(state.finished, stopClock(clock)),
-    interpolate(state.position, {
-      inputRange: _.times(values.length),
-      outputRange: values,
-      extrapolate: Extrapolate.CLAMP
-    })
-  ]);
-}
-
 export default asBaseComponent(forwardRef(TabBar));