Fix issue with TabController not handling dynamic items size (#1416)

* Fix issue with TabController doesn't take into account when items count has changed

* Add backward support for passing items to TabController.TabBar directly

* Push missing generated types

Author: ethanshar

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -73,7 +73,10 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   onAddItem = () => {
-    console.warn('Add Item');
+    const {items} = this.state;
+    let newItems = items.slice(0, -1) as TabControllerItemProps[];
+    newItems = [...newItems, {label: `New Item # ${newItems.length + 1}`}, items[items.length - 1]];
+    this.setState({items: newItems});
   };
 
   toggleItemsCount = () => {

generatedTypes/components/tabController2/index.d.ts

@@ -30,7 +30,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({ selectedIndex, asCarousel, items, onChangeIndex, carouselPageWidth, children }: PropsWithChildren<TabControllerProps>): JSX.Element | null;
+declare function TabController({ selectedIndex, asCarousel, items, onChangeIndex, carouselPageWidth, children }: PropsWithChildren<TabControllerProps>): JSX.Element;
 declare namespace TabController {
     var TabBar: React.ComponentClass<import("./TabBar").TabControllerBarProps & {
         useCustomTheme?: boolean | undefined;

src/components/tabController2/TabBar.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo, useRef, useContext, ReactNode} from 'react';
+import React, {useMemo, useContext, ReactNode} from 'react';
 import {StyleSheet, Platform, StyleProp, ViewStyle} from 'react-native';
 import Reanimated, {runOnJS, useAnimatedReaction, useAnimatedStyle, interpolate} from 'react-native-reanimated';
 import _ from 'lodash';
@@ -141,15 +141,12 @@ const TabBar = (props: Props) => {
     spreadItems,
     indicatorInsets = Spacings.s4,
     containerStyle,
-    testID,
-    children: propsChildren
+    testID
   } = props;
 
   const context = useContext(TabBarContext);
   const {items: contextItems, currentPage, targetPage, selectedIndex} = context;
 
-  const children = useRef<Props['children']>(_.filter(propsChildren, (child: ChildProps) => !!child));
-
   const containerWidth: number = useMemo(() => {
     return propsContainerWidth || Constants.screenWidth;
   }, [propsContainerWidth]);
@@ -158,8 +155,6 @@ const TabBar = (props: Props) => {
     return contextItems || propsItems;
   }, [contextItems, propsItems]);
 
-  const itemsCount = useRef<number>(items ? _.size(items) : React.Children.count(children.current));
-
   const {
     scrollViewRef: tabBar,
     onItemLayout,
@@ -171,7 +166,7 @@ const TabBar = (props: Props) => {
     onContentSizeChange,
     onLayout
   } = useScrollToItem({
-    itemsCount: itemsCount.current,
+    itemsCount: items?.length || 0,
     selectedIndex,
     offsetType: centerSelected ? useScrollToItem.offsetType.CENTER : useScrollToItem.offsetType.DYNAMIC
   });

src/components/tabController2/TabBarItem.tsx

@@ -139,9 +139,12 @@ export default function TabBarItem({
   }, []);
 
   const onPress = useCallback(() => {
-    currentPage.value = index;
+    if (!ignore) {
+      currentPage.value = index;
+    }
+
     props.onPress?.(index);
-  }, [index, props.onPress]);
+  }, [index, props.onPress, ignore]);
 
   const onLayout = useCallback((event: LayoutChangeEvent) => {
     const {width} = event.nativeEvent.layout;

src/components/tabController2/index.tsx

@@ -45,7 +45,7 @@ export interface TabControllerProps {
 function TabController({
   selectedIndex = 0,
   asCarousel = false,
-  items = [],
+  items,
   onChangeIndex = _.noop,
   carouselPageWidth,
   children
@@ -94,10 +94,6 @@ function TabController({
     };
   }, [/* selectedIndex,*/asCarousel, items, onChangeIndex]);
 
-  if (items.length === 0) {
-    return null;
-  }
-
   return <TabBarContext.Provider value={context}>{children}</TabBarContext.Provider>;
 }