CP-9278: Reset tabIndex on flag change (#1823)

packages/core-mobile/app/components/TabViewAva.tsx

@@ -60,13 +60,16 @@ const TabViewAva: TabViewAvaFC = ({
   children,
   testID
 }) => {
-  const [currentIndex, setCurrentIndex] = useState(currentTabIndex)
   const theme = useApplicationContext().theme
 
   const childrenArray = useMemo(
     () => React.Children.toArray(children),
     [children]
   )
+  const [currentIndex, setCurrentIndex] = useState(
+    currentTabIndex >= childrenArray.length ? 0 : currentTabIndex
+  )
+
   useEffect(() => {
     setCurrentIndex(currentTabIndex)
   }, [currentTabIndex])
@@ -89,8 +92,16 @@ const TabViewAva: TabViewAvaFC = ({
     [childrenArray]
   )
 
+  useEffect(() => {
+    setCurrentIndex(0)
+    onTabIndexChange?.(0)
+  }, [childrenArray.length, onTabIndexChange])
+
   const navState = useMemo(() => {
-    return { index: currentIndex, routes }
+    return {
+      index: currentIndex,
+      routes
+    }
   }, [currentIndex, routes])
 
   const scenes = useCallback(

packages/core-mobile/app/screens/portfolio/home/Portfolio.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { ListRenderItemInfo, Platform } from 'react-native'
 import { useNavigation, useRoute } from '@react-navigation/native'
 import { useSearchableTokenList } from 'screens/portfolio/useSearchableTokenList'
@@ -34,17 +34,15 @@ type PortfolioNavigationProp = PortfolioScreenProps<
 
 const Portfolio = (): JSX.Element => {
   const { params } = useRoute<PortfolioNavigationProp['route']>()
-  const { setParams } = useNavigation<PortfolioNavigationProp['navigation']>()
   const dispatch = useDispatch()
-
   const collectiblesDisabled = useIsUIDisabled(UI.Collectibles)
   const defiBlocked = useSelector(selectIsDeFiBlocked)
 
   useEffect(() => {
     dispatch(maybePromptBalanceNotification)
   }, [dispatch])
 
-  function captureAnalyticsEvents(tabIndex: number): void {
+  const captureAnalyticsEvents = useCallback((tabIndex: number): void => {
     switch (tabIndex) {
       case PortfolioTabs.Tokens:
         AnalyticsService.capture('PortfolioAssetsClicked')
@@ -55,15 +53,14 @@ const Portfolio = (): JSX.Element => {
       case PortfolioTabs.DeFi:
         AnalyticsService.capture('PortfolioDeFiClicked')
     }
-  }
+  }, [])
 
   return (
     <>
       <PortfolioHeader />
       <TabViewAva
         currentTabIndex={params?.tabIndex}
         onTabIndexChange={tabIndex => {
-          setParams({ tabIndex })
           captureAnalyticsEvents(tabIndex)
         }}
         hideSingleTab={false}

packages/core-mobile/app/screens/portfolio/network/NetworkTokens.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { FlatList, ListRenderItemInfo } from 'react-native'
 import { useNavigation, useRoute } from '@react-navigation/native'
 import { useSearchableTokenList } from 'screens/portfolio/useSearchableTokenList'
@@ -33,8 +33,7 @@ type NavigationProp = PortfolioScreenProps<
 
 const NetworkTokens = (): JSX.Element => {
   const { params } = useRoute<NavigationProp['route']>()
-  const { navigate, getParent, setParams } =
-    useNavigation<NavigationProp['navigation']>()
+  const { navigate, getParent } = useNavigation<NavigationProp['navigation']>()
   const { theme } = useApplicationContext()
   const {
     isLoading,
@@ -85,12 +84,12 @@ const NetworkTokens = (): JSX.Element => {
     navigate(AppNavigation.Bridge.BridgeTransactionStatus, statusParams)
   }
 
-  function capturePosthogEvents(tabIndex: number): void {
+  const capturePosthogEvents = useCallback((tabIndex: number): void => {
     if (tabIndex === NetworkTokensTabs.Activity) {
       // capture event only for the activity tab with old event name, by request from product
       AnalyticsService.capture('PortfolioActivityClicked')
     }
-  }
+  }, [])
 
   const renderTabViewLabel = (
     title: string,
@@ -218,10 +217,7 @@ const NetworkTokens = (): JSX.Element => {
       <TabViewAva
         renderCustomLabel={renderTabViewLabel}
         currentTabIndex={params?.tabIndex}
-        onTabIndexChange={tabIndex => {
-          setParams({ tabIndex })
-          capturePosthogEvents(tabIndex)
-        }}>
+        onTabIndexChange={capturePosthogEvents}>
         <TabViewAva.Item title={TabLabel.Tokens}>
           {renderTokenTab()}
         </TabViewAva.Item>