Feat/tab controller 2 orientation try 3 (#1515)

* Fix Android width (window instead of screen)

* Add a single source of truth to containerWidth (screen\window width)

* Change key to trigger onLayout

* Fix fixed width item to correct width and move to onLayout

* Revert moving to onLayout - causing extra calls to onLayout

* Change key for correct order of useEffect

Otherwise the useEffect that resets the data in useScrollToItem is called after the useEffect that triggers the onLayout from fixed width items (and data is lost).

* Fix page scroll

* Fix not scrolling to iniitla tabItem

* Remove unused prop

* Reset only when scroll is not enabled (i.e. tabs fill the container and spread)

* Update types

* Move style to useMemo (instead of useAnimatedStyle)

* Change key to orientation

* Move reset triggering to TabBar

Author: M-i-k-e-l

generatedTypes/src/components/tabController2/TabBarContext.d.ts

@@ -5,8 +5,8 @@ interface TabControllerContext {
     selectedIndex?: number;
     items?: any[];
     asCarousel?: boolean;
-    containerWidth: Reanimated.SharedValue<number>;
-    pageWidth?: number;
+    containerWidth: number;
+    pageWidth: number;
     /** static page index */
     currentPage: Reanimated.SharedValue<number>;
     /** transition page index (can be a fraction when transitioning between pages) */

generatedTypes/src/components/tabController2/useScrollToItem.d.ts

@@ -17,6 +17,10 @@ export declare type ScrollToItemProps<T extends ScrollToSupportedViews> = {
      * The selected item's index
      */
     selectedIndex?: number;
+    /**
+     * The container width, should update on orientation change
+     */
+    containerWidth: number;
     /**
      * Where would the item be located (default to CENTER)
      */
@@ -53,6 +57,10 @@ export declare type ScrollToItemResultProps<T extends ScrollToSupportedViews> =
      * Use in order to focus the item with the specified index (use when the selectedIndex is not changed)
      */
     focusIndex: (index: number, animated?: boolean) => void;
+    /**
+     * Use in order to reset the data.
+     */
+    reset: () => void;
     /**
      * onContentSizeChange callback (should be set to your onContentSizeChange).
      * Needed for RTL support on Android.

src/components/tabController2/FadedScrollView.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useImperativeHandle, useRef} from 'react';
 import {
   ViewProps,
   ScrollView,
@@ -29,6 +29,7 @@ const FadedScrollView = (props: Props) => {
     onLayout: propsOnLayout,
     ...other
   } = props;
+  const ref = useRef<ScrollView>();
   const {onContentSizeChange, onLayout, scrollEnabled} = useScrollEnabler({horizontal: true});
   const {
     onScroll: onScrollReached,
@@ -60,6 +61,15 @@ const FadedScrollView = (props: Props) => {
   },
   [propsOnLayout, onLayout]);
 
+  const isScrollEnabled = () => {
+    return scrollEnabled; 
+  };
+
+  useImperativeHandle(props.forwardedRef, () => ({
+    scrollTo: (...data: any) => ref.current?.scrollTo?.(...data),
+    isScrollEnabled
+  }));
+
   if (children) {
     return (
       <>
@@ -73,7 +83,8 @@ const FadedScrollView = (props: Props) => {
           onContentSizeChange={_onContentSizeChange}
           onLayout={_onLayout}
           onScroll={onScroll}
-          ref={props.forwardedRef}
+          // @ts-ignore
+          ref={ref}
         >
           {children}
         </ScrollView>

src/components/tabController2/PageCarousel.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useMemo} from 'react';
+import React, {useCallback, useContext, useMemo, useEffect} from 'react';
 import TabBarContext from './TabBarContext';
 import Reanimated, {
   runOnJS,
@@ -8,7 +8,6 @@ import Reanimated, {
   useSharedValue,
   withTiming
 } from 'react-native-reanimated';
-import {Constants} from 'helpers';
 
 /**
  * @description: TabController's Page Carousel
@@ -21,7 +20,7 @@ function PageCarousel({...props}) {
     currentPage,
     targetPage,
     selectedIndex = 0,
-    pageWidth = Constants.screenWidth,
+    pageWidth,
     carouselOffset
   } = useContext(TabBarContext);
   const contentOffset = useMemo(() => ({x: selectedIndex * pageWidth, y: 0}), [selectedIndex, pageWidth]);
@@ -62,6 +61,11 @@ function PageCarousel({...props}) {
     }
   });
 
+  useEffect(() => {
+    // @ts-expect-error
+    carousel.current?.scrollTo({x: currentPage.value * pageWidth, animated: false});
+  }, [pageWidth]);
+
   return (
     <Reanimated.ScrollView
       {...props}

src/components/tabController2/TabBar.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo, useContext, ReactNode} from 'react';
+import React, {useMemo, useContext, useState, useRef, ReactNode} from 'react';
 import {StyleSheet, Platform, StyleProp, ViewStyle} from 'react-native';
 import Reanimated, {runOnJS, useAnimatedReaction, useAnimatedStyle, interpolate} from 'react-native-reanimated';
 import _ from 'lodash';
@@ -8,10 +8,12 @@ import TabBarItem, {TabControllerItemProps} from './TabBarItem';
 import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
 import View from '../view';
 import {Colors, Spacings, Typography} from '../../style';
-import {Constants} from '../../helpers';
 import FadedScrollView from './FadedScrollView';
 
 import useScrollToItem from './useScrollToItem';
+import {orientations} from '../../helpers/Constants';
+import {Constants} from 'helpers';
+import {useDidUpdate} from 'hooks';
 
 const DEFAULT_HEIGHT = 48;
 const DEFAULT_BACKGROUND_COLOR = Colors.white;
@@ -144,30 +146,42 @@ const TabBar = (props: Props) => {
     testID
   } = props;
 
+  const tabBar = useRef<typeof FadedScrollView>();
+  const [key, setKey] = useState<orientations>(Constants.orientation);
   const context = useContext(TabBarContext);
-  const {items: contextItems, currentPage, targetPage, selectedIndex} = context;
+  const {
+    items: contextItems,
+    currentPage,
+    targetPage,
+    initialIndex,
+    selectedIndex,
+    containerWidth: contextContainerWidth
+  } = context;
 
   const containerWidth: number = useMemo(() => {
-    return propsContainerWidth || Constants.screenWidth;
-  }, [propsContainerWidth]);
+    return propsContainerWidth || contextContainerWidth;
+  }, [propsContainerWidth, contextContainerWidth]);
 
   const items = useMemo(() => {
     return contextItems || propsItems;
   }, [contextItems, propsItems]);
 
   const {
-    scrollViewRef: tabBar,
     onItemLayout,
     itemsWidthsAnimated,
     itemsOffsetsAnimated,
     // itemsWidths,
     // itemsOffsets,
     focusIndex,
+    reset,
     onContentSizeChange,
     onLayout
   } = useScrollToItem({
+    // @ts-expect-error TODO: typing bug
+    scrollViewRef: tabBar,
     itemsCount: items?.length || 0,
-    selectedIndex,
+    selectedIndex: selectedIndex || initialIndex,
+    containerWidth,
     offsetType: centerSelected ? useScrollToItem.offsetType.CENTER : useScrollToItem.offsetType.DYNAMIC
   });
 
@@ -247,14 +261,23 @@ const TabBar = (props: Props) => {
     return {minWidth: containerWidth};
   }, [containerWidth]);
 
+  useDidUpdate(() => {
+    // @ts-expect-error TODO: fix forwardRef Statics
+    if (tabBar.current?.isScrollEnabled()) {
+      focusIndex(currentPage.value);
+    } else {
+      reset();
+      setKey(Constants.orientation);
+    }
+  }, [containerWidth]);
+
   return (
-    <View style={_containerStyle}>
+    <View style={_containerStyle} key={key}>
       <FadedScrollView
         // @ts-expect-error
         ref={tabBar}
         horizontal
         contentContainerStyle={scrollViewContainerStyle}
-        scrollEnabled // TODO:
         testID={testID}
         onContentSizeChange={onContentSizeChange}
         onLayout={onLayout}
@@ -283,9 +306,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between'
   },
-  tabBarScrollContent: {
-    minWidth: Constants.screenWidth
-  },
   tab: {
     flex: 1,
     alignItems: 'center',

src/components/tabController2/TabBarContext.ts

@@ -7,8 +7,8 @@ interface TabControllerContext {
   selectedIndex?: number;
   items?: any[];
   asCarousel?: boolean;
-  containerWidth: Reanimated.SharedValue<number>;
-  pageWidth?: number;
+  containerWidth: number;
+  pageWidth: number;
   /** static page index */
   currentPage: Reanimated.SharedValue<number>;
   /** transition page index (can be a fraction when transitioning between pages) */

src/components/tabController2/TabBarItem.tsx

@@ -1,5 +1,5 @@
 // TODO: support commented props
-import React, {useCallback, useContext, useEffect, useRef, ReactElement} from 'react';
+import React, {useCallback, useContext, useEffect, useRef, useMemo, ReactElement} from 'react';
 import {StyleSheet, TextStyle, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import _ from 'lodash';
 import Reanimated, {useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
@@ -183,11 +183,16 @@ export default function TabBarItem({
     };
   });
 
+  const _style = useMemo(() => {
+    const constantWidthStyle = itemWidth.current ? {flex: 0, width: itemWidth.current} : undefined;
+    return [styles.tabItem, style, constantWidthStyle];
+  }, [style]);
+
   return (
     <TouchableOpacity
       // @ts-expect-error
       ref={itemRef}
-      style={[styles.tabItem, style]}
+      style={_style}
       onLayout={onLayout}
       activeBackgroundColor={activeBackgroundColor}
       activeOpacity={activeOpacity}

src/components/tabController2/TabPage.tsx

@@ -1,8 +1,7 @@
-import React, {PropsWithChildren, useCallback, useContext, useState} from 'react';
+import React, {PropsWithChildren, useCallback, useContext, useState, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import Reanimated, {useAnimatedStyle, useAnimatedReaction, runOnJS} from 'react-native-reanimated';
 import TabBarContext from './TabBarContext';
-import {Constants} from 'helpers';
 
 export interface TabControllerPageProps {
   /**
@@ -60,13 +59,16 @@ export default function TabPage({
     const isActive = Math.round(currentPage.value) === index;
     return {
       opacity: isActive || asCarousel ? 1 : 0,
-      zIndex: isActive || asCarousel ? 1 : 0,
-      width: asCarousel ? containerWidth.value || Constants.screenWidth : undefined
+      zIndex: isActive || asCarousel ? 1 : 0
     };
   });
 
+  const style = useMemo(() => {
+    return [!asCarousel && styles.page, animatedPageStyle, {width: asCarousel ? containerWidth : undefined}];
+  }, [asCarousel, animatedPageStyle, containerWidth]);
+
   return (
-    <Reanimated.View style={[!asCarousel && styles.page, animatedPageStyle]} testID={testID}>
+    <Reanimated.View style={style} testID={testID}>
       {!shouldLoad && renderLoading?.()}
       {shouldLoad && props.children}
     </Reanimated.View>

src/components/tabController2/index.tsx

@@ -1,8 +1,9 @@
 // TODO: support commented props
-import React, {PropsWithChildren, useMemo, useEffect} from 'react';
+import React, {PropsWithChildren, useMemo, useEffect, useRef, useState} from 'react';
 import _ from 'lodash';
 import {useAnimatedReaction, useSharedValue, withTiming, runOnJS} from 'react-native-reanimated';
 import {Constants} from '../../helpers';
+import {orientations} from '../../helpers/Constants';
 import {asBaseComponent} from '../../commons/new';
 import {LogService} from '../../services';
 import TabBarContext from './TabBarContext';
@@ -56,9 +57,24 @@ function TabController({
   carouselPageWidth,
   children
 }: PropsWithChildren<TabControllerProps>) {
+  const [screenWidth, setScreenWidth] = useState<number>(Constants.windowWidth);
+  const orientation = useRef<orientations>(Constants.orientation);
+  useEffect(() => {
+    const onOrientationChange = () => {
+      if (orientation.current !== Constants.orientation) {
+        orientation.current = Constants.orientation;
+        setScreenWidth(Constants.windowWidth);
+      }
+    };
+    Constants.addDimensionsEventListener(onOrientationChange);
+    return () => {
+      Constants.removeDimensionsEventListener(onOrientationChange);
+    };
+  }, []);
+
   const pageWidth = useMemo(() => {
-    return carouselPageWidth || Constants.screenWidth;
-  }, [carouselPageWidth]);
+    return carouselPageWidth || screenWidth;
+  }, [carouselPageWidth, screenWidth]);
 
   const ignoredItems = useMemo(() => {
     return _.filter<TabControllerItemProps[]>(items, (item: TabControllerItemProps) => item.ignore);
@@ -72,7 +88,6 @@ function TabController({
   /* targetPage - transitioned page index (can be a fraction when transitioning between pages) */
   const targetPage = useSharedValue(initialIndex);
   const carouselOffset = useSharedValue(initialIndex * Math.round(pageWidth));
-  const containerWidth = useSharedValue(pageWidth);
 
   useEffect(() => {
     if (!_.isUndefined(selectedIndex)) {
@@ -107,11 +122,11 @@ function TabController({
       targetPage,
       currentPage,
       carouselOffset,
-      containerWidth,
+      containerWidth: screenWidth,
       /* Callbacks */
       onChangeIndex
     };
-  }, [/* initialIndex,*/initialIndex, asCarousel, items, onChangeIndex]);
+  }, [/* initialIndex,*/initialIndex, asCarousel, items, onChangeIndex, screenWidth]);
 
   return <TabBarContext.Provider value={context}>{children}</TabBarContext.Provider>;
 }