Fix/tab controller safe area and indicator width (#1923)

* TabController - support safe area

* TabController - support constant indicatorWidth

* Move getScreenWidth out of the component code

Author: M-i-k-e-l

generatedTypes/src/components/tabController/TabBar.d.ts

@@ -75,6 +75,10 @@ export interface TabControllerBarProps {
      * The indicator insets (default: Spacings.s4, set to 0 to make it wide as the item)
      */
     indicatorInsets?: number;
+    /**
+     * Send to get a constant width of the indicator (overrides indicatorInsets)
+     */
+    indicatorWidth?: number;
     /**
      * Additional styles for the container
      */

generatedTypes/src/components/tabController/index.d.ts

@@ -26,6 +26,10 @@ export interface TabControllerProps {
      * Pass for custom carousel page width
      */
     carouselPageWidth?: number;
+    /**
+     * Send if a SafeView is used in the context of the TabController.
+     */
+    useSafeArea?: boolean;
 }
 /**
  * @description: A performant solution for a tab controller with lazy load mechanism
@@ -34,7 +38,7 @@ export interface TabControllerProps {
  * @important: On Android, if using react-native-navigation, make sure to wrap your screen with gestureHandlerRootHOC
  * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
  */
-declare function TabController({ initialIndex, selectedIndex, asCarousel, items, onChangeIndex, carouselPageWidth, children }: PropsWithChildren<TabControllerProps>): JSX.Element;
+declare function TabController({ initialIndex, selectedIndex, asCarousel, items, onChangeIndex, carouselPageWidth, useSafeArea, children }: PropsWithChildren<TabControllerProps>): JSX.Element;
 declare namespace TabController {
     var TabBar: React.ComponentClass<import("./TabBar").TabControllerBarProps & {
         useCustomTheme?: boolean | undefined;

src/components/tabController/PageCarousel.tsx

@@ -18,7 +18,7 @@ const FIX_RTL = Constants.isRTL && Constants.isAndroid;
  * @notes: You must pass `asCarousel` flag to TabController and render your TabPages inside a PageCarousel
  */
 function PageCarousel(props: ScrollViewProps) {
-  const {onMomentumScrollEnd, ...others} = props;
+  const {onMomentumScrollEnd, style, ...others} = props;
   const carousel = useAnimatedRef<Reanimated.ScrollView>();
   const {
     itemsCount,
@@ -96,9 +96,14 @@ function PageCarousel(props: ScrollViewProps) {
     onMomentumScrollEnd?.(event);
   }, [onMomentumScrollEnd]);
 
+  const _style = useMemo(() => {
+    return [{width: pageWidth}, style];
+  }, [pageWidth, style]);
+
   return (
     <Reanimated.ScrollView
       {...others}
+      style={_style}
       ref={carousel}
       horizontal
       pagingEnabled

src/components/tabController/TabBar.tsx

@@ -101,6 +101,10 @@ export interface TabControllerBarProps {
    * The indicator insets (default: Spacings.s4, set to 0 to make it wide as the item)
    */
   indicatorInsets?: number;
+  /**
+   * Send to get a constant width of the indicator (overrides indicatorInsets)
+   */
+  indicatorWidth?: number;
   /**
    * Additional styles for the container
    */
@@ -143,6 +147,7 @@ const TabBar = (props: Props) => {
     centerSelected,
     spreadItems,
     indicatorInsets = Spacings.s4,
+    indicatorWidth,
     containerStyle,
     testID
   } = props;
@@ -230,16 +235,25 @@ const TabBar = (props: Props) => {
 
   const _indicatorTransitionStyle = useAnimatedStyle(() => {
     const value = targetPage.value;
-    const width = interpolate(value,
-      itemsWidthsAnimated.value.map((_v: number, i: number) => i),
-      itemsWidthsAnimated.value.map((v: number) => v - 2 * indicatorInsets));
+    let width, marginHorizontal;
+    if (indicatorWidth) {
+      width = indicatorWidth;
+      marginHorizontal = interpolate(value,
+        itemsWidthsAnimated.value.map((_v: number, i: number) => i),
+        itemsWidthsAnimated.value.map((v: number) => (v - indicatorWidth) / 2));
+    } else {
+      marginHorizontal = indicatorInsets;
+      width = interpolate(value,
+        itemsWidthsAnimated.value.map((_v: number, i: number) => i),
+        itemsWidthsAnimated.value.map((v: number) => v - 2 * indicatorInsets));
+    }
 
     const left = interpolate(value,
       itemsOffsetsAnimated.value.map((_v: any, i: number) => i),
       itemsOffsetsAnimated.value);
 
     return {
-      marginHorizontal: indicatorInsets,
+      marginHorizontal,
       width,
       left
     };

src/components/tabController/index.tsx

@@ -38,8 +38,17 @@ export interface TabControllerProps {
    * Pass for custom carousel page width
    */
   carouselPageWidth?: number;
+  /**
+   * Send if a SafeView is used in the context of the TabController.
+   */
+  useSafeArea?: boolean;
 }
 
+const getScreenWidth = (useSafeArea: boolean) => {
+  const {left, right} = Constants.getSafeAreaInsets();
+  return Constants.windowWidth - (useSafeArea && Constants.isIphoneX ? left + right : 0);
+};
+
 /**
  * @description: A performant solution for a tab controller with lazy load mechanism
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
@@ -54,17 +63,18 @@ function TabController({
   items,
   onChangeIndex = _.noop,
   carouselPageWidth,
+  useSafeArea = false,
   children
 }: PropsWithChildren<TabControllerProps>) {
-  const [screenWidth, setScreenWidth] = useState<number>(Constants.windowWidth);
+  const [screenWidth, setScreenWidth] = useState<number>(getScreenWidth(useSafeArea));
 
   if (items?.length < 2) {
     console.warn('TabController component expect a minimum of 2 items');
   }
 
   useOrientation({
     onOrientationChange: () => {
-      setScreenWidth(Constants.windowWidth);
+      setScreenWidth(getScreenWidth(useSafeArea));
     }
   });