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

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.

CodePudding user response：

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;