Adding carousel support to tab controller (#587)

ethanshar · Inbal-Tish · commit be0717cebd83 · 2019-12-15T15:18:38.000+02:00
* WIP - adding carousel support to tab controller

* fix minor issue with tab changin

* fix issue on Android with comparing values

* minor refactor for when we use animated carousel

* fix prop type

* pass asCarousel prop once instead of passing asCarouselPage to each page

* Use Animated.ScrollView instead of our Carousel
diff --git a/demo/src/screens/incubatorScreens/TabControllerScreen/index.js b/demo/src/screens/incubatorScreens/TabControllerScreen/index.js
@@ -6,18 +6,19 @@ import Tab1 from './tab1';
 import Tab2 from './tab2';
 import Tab3 from './tab3';
 
-const TABS = ['tab1', 'tab2' , 'tab3', 'account', 'groups', 'blog'];
+const USE_CAROUSEL = true;
+const TABS = ['tab1', 'tab2', 'tab3', 'account', 'groups', 'blog'];
 
 class TabControllerScreen extends Component {
   state = {
     selectedIndex: 0,
     items: [
       ..._.map(TABS, tab => ({label: tab, key: tab})),
-      {key: 'addTabs', icon: Assets.icons.settings, ignore: true, onPress: this.addTab},
+      {key: 'addTabs', icon: Assets.icons.settings, ignore: true, onPress: this.addTab}
     ],
 
     tabsCount: 3,
-    key: Date.now(),
+    key: Date.now()
   };
 
   componentDidMount() {
@@ -44,11 +45,14 @@ class TabControllerScreen extends Component {
 
   getItems = () => {
     const {tabsCount} = this.state;
-    const items = _.chain(TABS).take(tabsCount).map(tab => ({label: tab, key: tab})).value();
+    const items = _.chain(TABS)
+      .take(tabsCount)
+      .map(tab => ({label: tab, key: tab}))
+      .value();
     items.push({key: 'addTabs', icon: Assets.icons.settings, ignore: true, onPress: this.addTab});
 
     return items;
-  }
+  };
 
   // renderTabItems() {
   //   const {tabsCount} = this.state;
@@ -68,37 +72,40 @@ class TabControllerScreen extends Component {
   // }
 
   renderTabPages() {
+    const Container = USE_CAROUSEL ? Incubator.TabController.PageCarousel : View;
+    const containerProps = USE_CAROUSEL ? {} : {flex: true};
     return (
-      <View flex>
+      <Container {...containerProps}>
         <Incubator.TabController.TabPage index={0}>
-          <Tab1 />
+          <Tab1/>
         </Incubator.TabController.TabPage>
-        <Incubator.TabController.TabPage index={1} lazy>
-          <Tab2 />
+        <Incubator.TabController.TabPage index={1} lazy={!USE_CAROUSEL}>
+          <Tab2/>
         </Incubator.TabController.TabPage>
         <Incubator.TabController.TabPage index={2}>
-          <Tab3 />
+          <Tab3/>
         </Incubator.TabController.TabPage>
-        <Incubator.TabController.TabPage index={3}>
+        {/* <Incubator.TabController.TabPage index={3}>
           <Text text40>ACCOUNT</Text>
         </Incubator.TabController.TabPage>
         <Incubator.TabController.TabPage index={4}>
           <Text text40>GROUPS</Text>
         </Incubator.TabController.TabPage>
         <Incubator.TabController.TabPage index={5}>
           <Text text40>BLOG</Text>
-        </Incubator.TabController.TabPage>
-      </View>
+        </Incubator.TabController.TabPage> */}
+      </Container>
     );
   }
 
   render() {
-    const {key, selectedIndex, items} = this.state;
+    const {key, selectedIndex} = this.state;
     return (
       <View flex bg-dark80>
         <View flex>
           <Incubator.TabController
             key={key}
+            asCarousel={USE_CAROUSEL}
             selectedIndex={selectedIndex}
             _onChangeIndex={index => console.warn('tab index is', index)}
           >
diff --git a/src/incubator/TabController/PageCarousel.js b/src/incubator/TabController/PageCarousel.js
@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import TabBarContext from './TabBarContext';
+import Animated from 'react-native-reanimated';
+import {Constants} from '../../helpers';
+
+const {Code, block, call} = Animated;
+
+class PageCarousel extends Component {
+  static contextType = TabBarContext;
+  carousel = React.createRef();
+
+  onScroll = Animated.event([{nativeEvent: {contentOffset: {x: this.context.carouselOffset}}}], {
+    useNativeDriver: true
+  });
+
+  onTabChange = ([index]) => {
+    const node = this.carousel.current.getNode();
+    node.scrollTo({x: index * Constants.screenWidth, animated: true});
+  };
+
+  render() {
+    const {currentPage} = this.context;
+    return (
+      <>
+        <Animated.ScrollView
+          {...this.props}
+          ref={this.carousel}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          onScroll={this.onScroll}
+          scrollEventThrottle={200}
+        />
+
+        <Code>
+          {() => {
+            return block([call([currentPage], this.onTabChange)]);
+          }}
+        </Code>
+      </>
+    );
+  }
+}
+
+export default PageCarousel;
diff --git a/src/incubator/TabController/TabPage.js b/src/incubator/TabController/TabPage.js
@@ -3,6 +3,7 @@ import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import Reanimated from 'react-native-reanimated';
 import TabBarContext from './TabBarContext';
+import {Constants} from '../../helpers';
 
 const {Code, Value, cond, set, and, call, block, eq} = Reanimated;
 
@@ -36,7 +37,11 @@ export default class TabPage extends PureComponent {
 
   _opacity = new Value(0);
   _zIndex = new Value(0);
-  _pageStyle = [styles.page, {opacity: this._opacity}, {zIndex: this._zIndex}];
+  _pageStyle = [
+    {opacity: this._opacity},
+    this.context.asCarousel ? styles.carouselPage : styles.page,
+    {zIndex: this._zIndex}
+  ];
 
   lazyLoad = () => {
     this.setState({
@@ -58,7 +63,7 @@ export default class TabPage extends PureComponent {
               cond(and(eq(currentPage, index), lazy, !loaded), call([], this.lazyLoad)),
               cond(eq(currentPage, index),
                 [set(this._opacity, 1), set(this._zIndex, 1)],
-                [set(this._opacity, 0), set(this._zIndex, 0)],)
+                [set(this._opacity, 0), set(this._zIndex, 0)])
             ]);
           }}
         </Code>
@@ -70,5 +75,10 @@ export default class TabPage extends PureComponent {
 const styles = StyleSheet.create({
   page: {
     ...StyleSheet.absoluteFillObject
+  },
+  carouselPage: {
+    width: Constants.screenWidth,
+    flex: 1,
+    opacity: 1
   }
 });
diff --git a/src/incubator/TabController/index.js b/src/incubator/TabController/index.js
@@ -6,12 +6,14 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 import Reanimated from 'react-native-reanimated';
 import {State} from 'react-native-gesture-handler';
+import {Constants} from '../../helpers';
 import TabBarContext from './TabBarContext';
 import TabBar from './TabBar';
 import TabBarItem from './TabBarItem';
 import TabPage from './TabPage';
+import PageCarousel from './PageCarousel';
 
-const {cond, Code, and, eq, set, Value, block} = Reanimated;
+const {cond, Code, and, eq, set, Value, block, round} = Reanimated;
 
 /**
  * @description: A performant solution for a tab controller with lazy load mechanism
@@ -33,11 +35,15 @@ class TabController extends Component {
     /**
      * callback for when index has change (will not be called on ignored items)
      */
-    onChangeIndex: PropTypes.func
+    onChangeIndex: PropTypes.func,
     // /**
     //  * callback for when tab selected
     //  */
     // onTabSelected: PropTypes.func,
+    /**
+     * When using TabController.PageCarousel this should be turned on
+     */
+    asCarousel: PropTypes.bool
   };
 
   static defaultProps = {
@@ -51,16 +57,19 @@ class TabController extends Component {
 
   _targetPage = new Value(-1);
   _currentPage = new Value(this.props.selectedIndex);
+  _carouselOffset = new Value(0);
 
   getProviderContextValue = () => {
     const {itemStates} = this.state;
-    const {onChangeIndex, selectedIndex} = this.props;
+    const {onChangeIndex, selectedIndex, asCarousel} = this.props;
     return {
       selectedIndex,
       currentPage: this._currentPage,
+      carouselOffset: this._carouselOffset,
       itemStates,
       registerTabItems: this.registerTabItems,
-      onChangeIndex
+      onChangeIndex,
+      asCarousel
     };
   };
 
@@ -71,18 +80,31 @@ class TabController extends Component {
 
   render() {
     const {itemStates, ignoredItems} = this.state;
+    
+    // Rounding on Android, cause it cause issues when comparing values
+    const screenWidth = Constants.isAndroid ? Math.round(Constants.screenWidth) : Constants.screenWidth;
+
     return (
       <TabBarContext.Provider value={this.getProviderContextValue()}>
         {this.props.children}
         {!_.isEmpty(itemStates) && (
           <Code>
             {() =>
               block([
+                // Carousel Page change
+                ..._.times(itemStates.length, index => {
+                  return cond(eq(Constants.isAndroid ? round(this._carouselOffset) : this._carouselOffset,
+                    index * screenWidth),
+                  [set(this._currentPage, index)]);
+                }),
+                // TabBar Page change
                 ..._.map(itemStates, (state, index) => {
                   return [
                     cond(and(eq(state, State.BEGAN), !_.includes(ignoredItems, index)), set(this._targetPage, index)),
-                    cond(and(eq(this._targetPage, index), eq(state, State.END), !_.includes(ignoredItems, index)),
-                      set(this._currentPage, index),)
+                    cond(and(eq(this._targetPage, index), eq(state, State.END), !_.includes(ignoredItems, index)), [
+                      set(this._currentPage, index),
+                      set(this._targetPage, -1)
+                    ])
                   ];
                 })
               ])
@@ -97,4 +119,5 @@ class TabController extends Component {
 TabController.TabBar = TabBar;
 TabController.TabBarItem = TabBarItem;
 TabController.TabPage = TabPage;
+TabController.PageCarousel = PageCarousel;
 export default TabController;
