Fix error when passing a signle item to TabController (#1578)

* Fix error when passing a signle item to TabController

* log an error when tab controller receive less than 2 items and handle the issue gracefully

Author: ethanshar

src/components/tabController/TabBar.tsx

@@ -157,14 +157,13 @@ const TabBar = (props: Props) => {
     selectedIndex,
     containerWidth: contextContainerWidth
   } = context;
-
   const containerWidth: number = useMemo(() => {
     return propsContainerWidth || contextContainerWidth;
   }, [propsContainerWidth, contextContainerWidth]);
-
   const items = useMemo(() => {
     return contextItems || propsItems;
   }, [contextItems, propsItems]);
+  const itemsCount = items?.length || 0;
 
   const {
     onItemLayout,
@@ -179,7 +178,7 @@ const TabBar = (props: Props) => {
   } = useScrollToItem({
     // @ts-expect-error TODO: typing bug
     scrollViewRef: tabBar,
-    itemsCount: items?.length || 0,
+    itemsCount,
     selectedIndex: selectedIndex || initialIndex,
     containerWidth,
     offsetType: centerSelected ? useScrollToItem.offsetType.CENTER : useScrollToItem.offsetType.DYNAMIC
@@ -283,7 +282,9 @@ const TabBar = (props: Props) => {
         onLayout={onLayout}
       >
         <View style={tabBarContainerStyle}>{tabBarItems}</View>
-        <Reanimated.View style={[styles.selectedIndicator, indicatorStyle, _indicatorTransitionStyle]}/>
+        {itemsCount > 1 && (
+          <Reanimated.View style={[styles.selectedIndicator, indicatorStyle, _indicatorTransitionStyle]}/>
+        )}
       </FadedScrollView>
     </View>
   );

src/components/tabController/index.tsx

@@ -59,6 +59,11 @@ function TabController({
 }: PropsWithChildren<TabControllerProps>) {
   const [screenWidth, setScreenWidth] = useState<number>(Constants.windowWidth);
   const orientation = useRef<orientations>(Constants.orientation);
+
+  if (items?.length < 2) {
+    console.error('TabController component expect a minimum of 2 items');
+  }
+
   useEffect(() => {
     const onOrientationChange = () => {
       if (orientation.current !== Constants.orientation) {
@@ -126,7 +131,7 @@ function TabController({
       /* Callbacks */
       onChangeIndex
     };
-  }, [/* initialIndex,*/initialIndex, asCarousel, items, onChangeIndex, screenWidth]);
+  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth]);
 
   return <TabBarContext.Provider value={context}>{children}</TabBarContext.Provider>;
 }