Have a shared profile screen for multiple tab screens in react native

Question

I have a react native app with expo that uses react navigation v6 with a bottom tab navigator and I want to have a Profile Screen in the same stack without showing up on the bottom tab, and only accessible when manually navigated.

export function AppStack() {
 return (
<Tab.Navigator
  screenOptions={{ headerShown: false }}
  tabBar={(props) => <NavBar {...props} />}
>
  <Tab.Screen name="Timeline" component={TimelineScreen} />
  <Tab.Screen name="Goals" component={GoalScreen} />
  <Tab.Screen name="Notes" component={NoteScreen} />
  <Tab.Screen name="Schedule" component={ScheduleScreen} />
</Tab.Navigator>
  );
}

Answer 1

You can pass a custom component to a Screen using tabBarButton . Then just return null to show nothing.

export function AppStack() {
 return (
    <Tab.Navigator
      screenOptions={{ headerShown: false }}
      tabBar={(props) => <NavBar {...props} />}
    >
      <Tab.Screen name="Timeline" component={TimelineScreen} />
      <Tab.Screen name="Goals" component={GoalScreen} />
      <Tab.Screen name="Notes" component={NoteScreen} />
      <Tab.Screen name="Schedule" component={ScheduleScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} options={() => ({
        tabBarButton: () => null,
      })}/>
    </Tab.Navigator>
  );
}

You can navigate to the Settings screen from another screen by doing:

navigation.navigate('Settings');