TabBar & TabBarItem - replace 'componentWillReceiveProps' with 'componentDidUpdate'. (#913)

Co-authored-by: arnonz <[email protected]>

Author: Inbal-Tish

src/components/tabBar/TabBarItem.tsx

@@ -111,9 +111,9 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
   styles = createStyles();
   layout: any = undefined;
 
-  UNSAFE_componentWillReceiveProps(nextProps: TabBarItemProps) {
-    if (this.props.selected !== nextProps.selected) {
-      this.animate(nextProps.selected);
+  componentDidUpdate(prevProps: TabBarItemProps)  {
+    if (prevProps.selected !== this.props.selected) {
+      this.animate(this.props.selected);
     }
   }
 

src/components/tabBar/index.tsx

@@ -104,20 +104,19 @@ class TabBar extends Component<TabBarProps, State> {
   itemsRefs: any[] = [];
   scrollView?: any = undefined;
 
-  UNSAFE_componentWillReceiveProps(nextProps: TabBarProps) {
+  componentDidUpdate(prevProps: TabBarProps, prevState: State) {
     // TODO: since we're implementing an uncontrolled component here, we should verify the selectedIndex has changed
     // between this.props and nextProps (basically the meaning of selectedIndex should be initialIndex)
+    const {selectedIndex} = this.props;
     const isIndexManuallyChanged =
-      nextProps.selectedIndex !== this.state.currentIndex && this.props.selectedIndex !== nextProps.selectedIndex;
-    if (isIndexManuallyChanged && nextProps.selectedIndex !== undefined) {
-      this.updateIndicator(nextProps.selectedIndex);
-    }
-  }
-
-  componentDidUpdate(prevProps: TabBarProps) {
-    const prevChildrenCount = React.Children.count(prevProps.children);
-    if (this.childrenCount < prevChildrenCount) {
-      this.updateIndicator(0);
+      selectedIndex !== prevState.currentIndex && prevProps.selectedIndex !== selectedIndex;
+    if (isIndexManuallyChanged && selectedIndex !== undefined) {
+      this.updateIndicator(selectedIndex);
+    } else {
+      const prevChildrenCount = React.Children.count(prevProps.children);
+      if (this.childrenCount < prevChildrenCount) {
+        this.updateIndicator(0);
+      }
     }
   }