Nesting navigators in react native-CodePudding

I'm a beginner to react and find it difficult to understand exactly how react navigation works. Am I supposed to write all the navigation code in App.js or is it possible to nest in different screens (home.js etc).

Simply put:

Can I make a stack navigator under App.js that refers to a stack screen of "home.js" that contains a button in its .js file - which in turn navigates to "settings.js" with an onPress event, or am I all wrong here?

NEW EDIT:

Under App.js:

 function HomeNavigator() {
  return(
    <HomeStack.Navigator>
        <HomeStack.Screen 
        name="home" 
        component={Home}
        options={{
          headerShown: false
        }}/>
    </HomeStack.Navigator>
  )
}


export default function App() {
  return (
<NavigationContainer>
  <HomeNavigator/>
</NavigationContainer>
    )
}

And then under home.js:

function Home({navigation}) {
    return (
    <SafeAreaView style={styles.center}>
        <Image style={styles.icon} source={require("../assets/logo_01.png")}/>
        <AppButton title="Create room" onPress={()=> navigation.navigate("Settings")}/>         
    </SafeAreaView>
    );
}

export default Home;

Thank you in advance I'm going crazy trying to understand how it works

CodePudding user response：

EDIT for edited question:

You need to declare a screen in your HomeStack and pass to it a component to render as a setting screen, see below:

function SettingsScreen() {
  return(
    <Text>You are on Settings Screen</Text>
  )
}

function HomeNavigator() {
  return (
    <HomeStack.Navigator initialRouteName='Home'>
      <HomeStack.Screen
        name='Home'
        component={HomeScreen}
        options={{
          headerShown: false, //example of options
        }}
      />
      <HomeStack.Screen name='Settings' component={SettingsScreen} /> //You need to declare your screen name and pass to it a component
    </HomeStack.Navigator>
  );
}

Explanation for nested navigators

You can nest navigators. You can go for something like this:

import { createStackNavigator } from '@react-navigation/stack';

const HomeStack = createStackNavigator();

function HomeNavigator() {
  return (
    <HomeStack.Navigator initialRouteName='Home'>
      <HomeStack.Screen
        name='Home'
        component={HomeScreen}
        options={{
          headerShown: false, //example of options
        }}
      />
      <HomeStack.Screen name='Settings' component={SettingsScreen} />
    </HomeStack.Navigator>
  );
}

const RootStack = createStackNavigator();

function RootNavigator() {
  return (
    <RootStack.Navigator initialRouteName='Home'>
      <RootStack.Screen name='Home' component={HomeNavigator} />
      //other screens/navigator if you need
    </RootStack.Navigator>
  );
}

export default function App() {
    return (
      <SafeAreaProvider>
        <RootNavigator />
      </SafeAreaProvider>
    );
}

Nested navigators documentation here

To navigate from HomeScreen :

function HomeScreen({ navigation }) {
  return (
    <TouchableOpacity onPress={() => navigation.navigate("Settings")}>
      <Text>Go to Settings</Text>
    </TouchableOpacity>
  );
}

Documentation to navigate to a new screen here