0

I have a react native app which uses react navigation (V6.x for sure). My app has a main navigator which is a bottom-tabs navigator and contains three screens (tabs). Every one of these screens are stack navigators themselves. Let's say one of my tabs is named Wallet (others are Settings and Transactions). Inside this Wallet screen (which is a stack navigator), i have a HomePage screen, a Receive screen and a Send screen. I want to achieve the following behavior (like below screenshot from designs):
enter image description here

Whenever the user goes to one of Send or Receive screens, i want all the tab bar buttons become unfocused (tab bar is still visibe though). And whenever the user gets back to HomePage screen (or going to Settings or Transactions tab by pressing the corresponding tab button), I want the relevant tab button to get focused again. How can i achieve that with react navigation itself?
(My project is managed by redux, but i prefer not to use state management tools and use react navigation itself)

Ardalan
  • 723
  • 9
  • 26

1 Answers1

1

You can do that, but checking child navigation state inside your TabNavigator's screenOptions.

screenOptions={({ route, navigation }) => {
  // get wallet stack route
  const walletStack = navigation.getState().routes.find((route) => route.name === 'Wallet');
  // get current wallet stack focused screen
  const walletRouteName = getFocusedRouteNameFromRoute(walletStack);
  const shouldBeUnfocused =
        walletRouteName === 'Send' || walletRouteName === 'Receive';
  {...}
}

Based on shouldBeUnfocused you can render proper icons and colors. Here is the snack with example code. You can red here about customizing tab bar's appearance.

pafry
  • 239
  • 2
  • 3