Support rendering TabController inside a ScrollView (with a header) (#3235)

* Support rendering TabController inside a ScrollView (with a header)

* Wrap screen with gestureHandlerRootHOC

* Small fix - code review

Author: ethanshar

demo/src/screens/MenuStructure.js

@@ -114,6 +114,7 @@ export const navigationData = {
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
+      {title: 'TabControllerWithStickyHeader', tags: 'tabbar controller native sticky header', screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'},
       {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
       {
         title: 'withScrollEnabler',

demo/src/screens/componentScreens/TabControllerWithStickyHeaderScreen.tsx

@@ -0,0 +1,68 @@
+import React, {Component} from 'react';
+import {ScrollView} from 'react-native';
+import {View, Text, Card, Image, TabController} from 'react-native-ui-lib';
+import _ from 'lodash';
+
+const IMAGE_URL =
+  'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&w=500&dpr=1';
+const items = [
+  {key: 'tab1', label: 'Tab 1'},
+  {key: 'tab2', label: 'Tab 2'}
+];
+
+export default class TabControllerWithStickyHeaderScreen extends Component {
+  renderHeader = () => {
+    return (
+      <View bg-red30 height={280} bottom>
+        <Image source={{uri: IMAGE_URL}} style={{flex: 1}}/>
+      </View>
+    );
+  };
+
+  renderTab1 = () => {
+    return (
+      <View bg-green80 paddingT-s5>
+        {_.times(7, i => {
+          return (
+            <Card key={i} height={100} marginB-s5 marginH-s5 center>
+              <Text text40>item {i}</Text>
+            </Card>
+          );
+        })}
+      </View>
+    );
+  };
+
+  renderTab2 = () => {
+    return (
+      <View bg-orange40 paddingT-s5>
+        {_.times(15, i => {
+          return (
+            <View key={i} height={100} marginB-s5 marginH-s5 center bg-orange60>
+              <Text text40> item {i}</Text>
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <TabController items={items} nestedInScrollView>
+        <ScrollView
+          // stickyHeaderHiddenOnScroll
+          stickyHeaderIndices={[1]}
+        >
+          {this.renderHeader()}
+          <TabController.TabBar/>
+
+          <View flex>
+            <TabController.TabPage index={0}>{this.renderTab1()}</TabController.TabPage>
+            <TabController.TabPage index={1}>{this.renderTab2()}</TabController.TabPage>
+          </View>
+        </ScrollView>
+      </TabController>
+    );
+  }
+}

demo/src/screens/componentScreens/index.js

@@ -55,6 +55,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
   registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
+  registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => gestureHandlerRootHOC(require('./TabControllerWithStickyHeaderScreen').default));
   registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
   registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
   registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);

src/components/tabController/TabBarContext.ts

@@ -6,6 +6,7 @@ interface TabControllerContext {
   items?: any[];
   itemsCount: number;
   asCarousel?: boolean;
+  nestedInScrollView?: boolean;
   containerWidth: number;
   pageWidth: number;
   /** static page index */

src/components/tabController/TabPage.tsx

@@ -44,7 +44,7 @@ export default function TabPage({
   lazyLoadTime = 100,
   ...props
 }: PropsWithChildren<TabControllerPageProps>) {
-  const {currentPage, asCarousel, containerWidth} = useContext(TabBarContext);
+  const {currentPage, asCarousel, nestedInScrollView, containerWidth} = useContext(TabBarContext);
   const [shouldLoad, setLoaded] = useState(!lazy);
   // const [focused, setFocused] = useState(false);
 
@@ -80,19 +80,22 @@ export default function TabPage({
 
   const animatedPageStyle = useAnimatedStyle(() => {
     const isActive = Math.round(currentPage.value) === index;
-    return {
+
+    // TODO: Fix to proper animated style once Reanimated export AnimatedStyleProp
+    const style: any = {
       opacity: isActive || asCarousel ? 1 : 0,
       zIndex: isActive || asCarousel ? 1 : 0
     };
+
+    if (nestedInScrollView) {
+      style.position = isActive ? 'relative' : 'absolute';
+    }
+
+    return style;
   });
 
   const _style = useMemo(() => {
-    return [
-      !asCarousel && styles.page,
-      animatedPageStyle,
-      {width: asCarousel ? containerWidth : undefined},
-      style
-    ];
+    return [!asCarousel && styles.page, animatedPageStyle, {width: asCarousel ? containerWidth : undefined}, style];
   }, [asCarousel, animatedPageStyle, containerWidth, style]);
 
   return (

src/components/tabController/apis/tabController.api.json

@@ -19,6 +19,13 @@
       "description": "When using TabController.PageCarousel this should be turned on",
       "default": "false"
     },
+    {
+      "name": "nestedInScrollView",
+      "type": "boolean",
+      "description": "Pass when TabController is render inside a ScrollView (with a header)",
+      "note": "Does not work with asCarousel",
+      "default": "false"
+    },
     {"name": "carouselPageWidth;", "type": "number", "description": "Pass for custom carousel page width"}
   ],
   "snippet": [

src/components/tabController/index.tsx

@@ -37,6 +37,10 @@ export interface TabControllerProps {
    * When using TabController.PageCarousel this should be turned on
    */
   asCarousel?: boolean;
+  /**
+   * Pass when TabController is render inside a ScrollView (with a header)
+   */
+  nestedInScrollView?: boolean;
   /**
    * Pass for custom carousel page width
    */
@@ -65,6 +69,7 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
   const {
     initialIndex = 0,
     asCarousel = false,
+    nestedInScrollView = false,
     items,
     onChangeIndex = _.noop,
     carouselPageWidth,
@@ -123,6 +128,7 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
       initialIndex,
       asCarousel,
       pageWidth,
+      nestedInScrollView,
       /* Items */
       items,
       ignoredItems,
@@ -135,7 +141,7 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
       onChangeIndex,
       setCurrentIndex
     };
-  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth]);
+  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth, nestedInScrollView]);
 
   return <TabBarContext.Provider value={context}>{children}</TabBarContext.Provider>;
 });