TabController - remove 'selectedIndex' prop (#2481)

Author: Inbal-Tish

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

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {
@@ -11,7 +12,6 @@ import {
   TabControllerImperativeMethods
 } from 'react-native-ui-lib';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-import _ from 'lodash';
 
 import Tab1 from './tab1';
 import Tab2 from './tab2';
@@ -162,14 +162,13 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   render() {
-    const {key, initialIndex, /* selectedIndex, */ asCarousel, centerSelected, fewItems, items} = this.state;
+    const {key, initialIndex, asCarousel, centerSelected, fewItems, items} = this.state;
     return (
       <View flex bg-$backgroundDefault>
         <TabController
           key={key}
           ref={this.tabController}
           asCarousel={asCarousel}
-          // selectedIndex={selectedIndex}
           initialIndex={initialIndex}
           onChangeIndex={this.onChangeIndex}
           items={items}

src/components/tabController/TabBar.tsx

@@ -1,8 +1,7 @@
+import _ from 'lodash';
 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';
-
 import TabBarContext from './TabBarContext';
 import TabBarItem, {TabControllerItemProps} from './TabBarItem';
 import {
@@ -171,7 +170,6 @@ const TabBar = (props: Props) => {
     currentPage,
     targetPage,
     initialIndex,
-    selectedIndex,
     containerWidth: contextContainerWidth
   } = context;
   const containerWidth: number = useMemo(() => {
@@ -196,7 +194,7 @@ const TabBar = (props: Props) => {
     // @ts-expect-error TODO: typing bug
     scrollViewRef: tabBar,
     itemsCount,
-    selectedIndex: selectedIndex || initialIndex,
+    selectedIndex: initialIndex,
     containerWidth,
     offsetType: centerSelected ? useScrollToItem.offsetType.CENTER : useScrollToItem.offsetType.DYNAMIC
   });

src/components/tabController/TabBarContext.ts

@@ -3,8 +3,6 @@ import Reanimated from 'react-native-reanimated';
 
 interface TabControllerContext {
   initialIndex?: number;
-  // DEPRECATED: use initialIndex instead
-  selectedIndex?: number;
   items?: any[];
   itemsCount: number;
   asCarousel?: boolean;

src/components/tabController/apis/tabController.api.json

@@ -8,7 +8,6 @@
   "props": [
     {"name": "items", "type": "TabControllerItemProps[]", "description": "The list of tab bar items"},
     {"name": "initialIndex", "type": "number", "description": "Initial selected index", "default": "0"},
-    {"name": "selectedIndex", "type": "number", "description": "The current selected index", "deprecated": true},
     {
       "name": "onChangeIndex",
       "type": "(index: number, prevIndex: number | null) => void",

src/components/tabController/index.tsx

@@ -1,10 +1,9 @@
 // TODO: support commented props
-import React, {PropsWithChildren, useMemo, useEffect, useState, useCallback} from 'react';
 import _ from 'lodash';
+import React, {PropsWithChildren, useMemo, useEffect, useState, useCallback} from 'react';
 import {useAnimatedReaction, useSharedValue, withTiming, runOnJS} from 'react-native-reanimated';
 import {useOrientation, useThemeProps} from '../../hooks';
 import {Constants} from '../../commons/new';
-import {LogService} from '../../services';
 import TabBarContext from './TabBarContext';
 import TabBar from './TabBar';
 import TabBarItem, {TabControllerItemProps} from './TabBarItem';
@@ -13,8 +12,6 @@ import PageCarousel from './PageCarousel';
 import useImperativeTabControllerHandle, {TabControllerImperativeMethods} from './useImperativeTabControllerHandle';
 export {TabControllerItemProps, TabControllerImperativeMethods};
 
-// TODO: should migrate selectedIndex to initialIndex (and make this prop uncontrolled)
-
 interface TabControllerStatics {
   TabBar: typeof TabBar;
   TabBarItem: typeof TabBarItem;
@@ -31,10 +28,6 @@ export interface TabControllerProps extends ThemeComponent {
    * Initial selected index
    */
   initialIndex?: number;
-  /**
-   * DEPRECATED: use initialIndex instead
-   */
-  selectedIndex?: number;
   /**
    * callback for when index has change (will not be called on ignored items)
    */
@@ -70,7 +63,6 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
   const themeProps = useThemeProps(props, 'TabController');
   const {
     initialIndex = 0,
-    selectedIndex,
     asCarousel = false,
     items,
     onChangeIndex = _.noop,
@@ -98,29 +90,19 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
     return _.filter<TabControllerItemProps[]>(items, (item: TabControllerItemProps) => item.ignore);
   }, [items]);
 
-  /* backwards compatibility for `selectedIndex` prop. this line eventually should be removed */
-  const _initialIndex = selectedIndex || initialIndex;
-
   /* currentPage - static page index */
-  const currentPage = useSharedValue(_initialIndex);
+  const currentPage = useSharedValue(initialIndex);
   /* targetPage - transitioned page index (can be a fraction when transitioning between pages) */
-  const targetPage = useSharedValue(_initialIndex);
-  // const carouselOffset = useSharedValue(initialIndex * Math.round(pageWidth));
+  const targetPage = useSharedValue(initialIndex);
 
   const setCurrentIndex = useCallback((index: number) => {
     'worklet';
     currentPage.value = index;
   }, []);
 
   useEffect(() => {
-    if (!_.isUndefined(selectedIndex)) {
-      LogService.deprecationWarn({component: 'TabController', oldProp: 'selectedIndex', newProp: 'initialIndex'});
-    }
-  }, [selectedIndex]);
-
-  useEffect(() => {
-    setCurrentIndex(_initialIndex);
-  }, [_initialIndex]);
+    setCurrentIndex(initialIndex);
+  }, [initialIndex]);
 
   useAnimatedReaction(() => {
     return currentPage.value;
@@ -137,7 +119,7 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
   const context = useMemo(() => {
     return {
       /* Pass Props */
-      initialIndex: _initialIndex,
+      initialIndex,
       asCarousel,
       pageWidth,
       /* Items */
@@ -147,13 +129,12 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
       /* Animated Values */
       targetPage,
       currentPage,
-      // carouselOffset,
       containerWidth: screenWidth,
       /* Callbacks */
       onChangeIndex,
       setCurrentIndex
     };
-  }, [_initialIndex, asCarousel, items, onChangeIndex, screenWidth]);
+  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth]);
 
   return <TabBarContext.Provider value={context}>{children}</TabBarContext.Provider>;
 });

typings/incubator/index.d.ts

@@ -12,7 +12,7 @@ import {BadgeProps} from '../components/Badge';
 
 export namespace Incubator {
   export interface TabControllerProps {
-    selectedIndex?: number;
+    initialIndex?: number;
     onChangeIndex?: (index: number) => void;
     asCarousel?: boolean;
   }