Want to navigate between screens in one tab in react native - react-native

Question

I am working on a project that I want to switch between screens in one tab. for example I have 4 bottom tabs. and from the 1st tab, I want to move to another screen or component inside 1st tab
From this picture, I want to move to another screen or component by staying inside 1st tab.
Could anyone help me to get the possible way.

Answer 1

You need to nest navigators which is a basic feature of react-native-navigation.
This is described in the documentation here.
Navigating to a screen works as usual as it is described in the documentation here.
Here is a minimal working example for which I have made a working snack.
App.js
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import Tabs from './Tabs'
export default function App() {
return (
<NavigationContainer>
<Tabs />
</NavigationContainer>
)
}
Tabs.js with 2 Tabs
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Home from './Home.js'
import Profile from './Profile.js'
const Tab = createBottomTabNavigator();
function Tabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
);
}
export default Tabs;
Home.js a StackNavigator
import React from 'react';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import ScreenA from './ScreenA.js'
import ScreenB from './ScreenB.js'
const Stack = createNativeStackNavigator()
function Home() {
return <Stack.Navigator>
<Stack.Screen name="" component={ScreenA} options={{headerShown: false}} />
<Stack.Screen name="ScreenB" component={ScreenB} />
</Stack.Navigator>
}
export default Home;
ScreenA.js
import React from 'react'
import { View, Button } from 'react-native'
function ScreenA(props) {
return <View>
<Button title="NavigateToScreenBInTabHone" onPress={() => props.navigation.navigate('ScreenB')}>
</Button>
</View>
}
export default ScreenA;
ScreenB.js
import React from 'react'
import { View } from 'react-native'
function ScreenB() {
return <View></View>
}
export default ScreenB;
Profile.js
import React from 'react'
import { View } from 'react-native'
function Profile() {
return <View></View>
}
export default Profile;