How to define routes in React Native without displaying them in a navigator?

user_12768467 0
Viewed 97

I have a bottom tab navigator made with React Navigation on a basic React Native app. It only gives access to 4 screens. Some screens may contains buttons that would open a new page (for example: a user profile page). How to define the route without displaying it in the bottom tab navigator?

The code:

const Tab = createBottomTabNavigator();

export default function Router() {
  const { t } = useTranslation();
  return (
    <Tab.Navigator initialRouteName={screen.home}>
      <Tab.Screen name={screen.home} component={Home}/>
      <Tab.Screen name={screen.a} component={A}/>
      <Tab.Screen name={screen.b} component={B}/>
      <Tab.Screen name={screen.c} component={C}/>
    </Tab.Navigator>
  );
}

The idea would be to allow a click like that:

 function ScreenB(){
  const navigation = useNavigation();
  
  return (
      <TouchableOpacity onPress={() => navigation.navigate("/user/123")}>
          <Text>see user 123</Text>
      </TouchableOpacity>
     )
}

Thanks for your help!

react-navigation react-native
1 Answers

Online example https://snack.expo.io/@vasylnahuliak/great-bubblegum

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen</Text>
    </View>
  );
};

const ProfileScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

const DetailsScreen = () => { // <--- Screen without navigation header
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details screen</Text>
    </View>
  );
};

const ProfileStack = createStackNavigator();

const ProfileStackScreen = () => {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Settings" component={ProfileScreen} />
    </ProfileStack.Navigator>
  );
};

const MainTab = createBottomTabNavigator();

const MainTabs = () => {
  return (
    <MainTab.Navigator>
      <MainTab.Screen name="Home" component={HomeScreen} />
      <MainTab.Screen name="Profile" component={ProfileStackScreen} />
    </MainTab.Navigator>
  );
};

const RootStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen
          name="MainTabs"
          component={MainTabs}
          options={{ headerShown: false }}
        />
        <RootStack.Screen name="Details" component={DetailsScreen} /> // <--- Screen without navigation header
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

Official documentation: https://reactnavigation.org/docs/hiding-tabbar-in-screens

user_106171480
Related