React navigation 5.x / React native – bottom-tabs navigation with same instance of component

Question

I want to reuse the same instance of one component in two tabs (bottom bar tabs).

created with const Tab = createBottomTabNavigator();

Tab stack:

  <Tab.Navigator
      tabBarOptions={{
        activeTintColor: Colors.tabs.active,
        inactiveTintColor: Colors.tabs.inactive,
      }}>
      <Tab.Screen
        name="NavigationMap"
        component={Map}
        options={{
          tabBarLabel: 'Navigation',
        }}
      />
      <Tab.Screen
        name="DiscoveryMap"
        component={Map}
        options={{
          tabBarLabel: 'Discover',
        }}
      />
      <Tab.Screen
        name="Other"
        component={OtherComponent}
        options={{
          tabBarLabel: 'Other',
        }}
      />
  </Tab.Navigator>

I want to have the same behavior than in the Google Maps application on Android with the "Explore" and "Commute" tabs: stay in the same screen with a different state. I do not want to reload completely my map between the 2 tabs (and have independant zoom levels, center, ...).

Note: I cannot achieve that behavior with the tabPress method.

score 0 · Answer 1 · answered May 14 '20 at 02:16

You can add focus listeners to both screens. Here, you can set the context or global state that can be accessed by the HomeNavigation component and change the behaviour.

<Tab.Screen
  name="Home"
  component={HomeNavigation}
  listeners={{
    focus: () => console.warn('focused 1'),
  }}
/>
<Tab.Screen
  name="Home2"
  initialParams={{testing: true}}
  component={HomeNavigation}
  listeners={{
    focus: () => console.warn('focused 2'),
  }}
/>

React navigation 5.x / React native – bottom-tabs navigation with same instance of component

1 Answers1