Bottom navigation and React navigation

[prugala]

Hi

I'm new in React Native world. Im trying to use your bottom navigation with React navigation based on article:
https://callstack.github.io/react-native-paper/docs/guides/bottom-navigation/

<Text onPress={() => navigation.navigate('Tab2')}>Go to other tab</Text>

When I use tab screen name all works but there is option to navigate to other page no existing in bottom tab?
Use case:
I have profile view (in bottom menu) but profile has multiple separated views.

[hs19991215]

Hi @prugala ,
Yes, you can navigate to screens that are not part of the bottom tab navigator. You'll need to set up a stack navigator that includes your bottom tabs and additional screens.

Solution:
Wrap your BottomTabNavigator inside a StackNavigator, and define additional screens outside the bottom tabs.

1. Step-by-step Implementation
npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

2. Create the Navigators

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

// Dummy Screens
const ProfileScreen = ({ navigation }) => (

Profile Screen
<Button title="Go to Profile Details" onPress={() => navigation.navigate('ProfileDetails')} />

);

const ProfileDetailsScreen = () => (

Profile Details Screen

);

const HomeScreen = () => (

Home Screen

);

// Bottom Tab Navigator
const Tab = createBottomTabNavigator();
const BottomTabs = () => (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);

// Stack Navigator (Wraps BottomTabs and Additional Screens)
const Stack = createStackNavigator();
const AppNavigator = () => (

<Stack.Navigator>
<Stack.Screen name="Tabs" component={BottomTabs} options={{ headerShown: false }} />
<Stack.Screen name="ProfileDetails" component={ProfileDetailsScreen} />
</Stack.Navigator>

);

export default AppNavigator;
`
3. Navigation
You can navigate to ProfileDetails from Profile using:
navigation.navigate("ProfileDetails")