Feat/tab controller 2 orientation try 3

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>;
 }