Setting up nested navigation using React-Navigation in React Native

I have noticed that a lot of React Native newbies are intimidated by creating the navigation, which I understand — most of the examples are a one page of code without the nested navigation props, and I sometimes see the attempts get kinda messy. So here is a quick example of multiple component app with nested navigation! First, if you still didn’t do it, follow the installation guide. Then, set up the example ‘Hello World’, end run it to see if it worked. Or just use your own code.

In the example linked above, we have the HomeScreen() content not in a separate component, and from there we can’t go to another page, let’s say- a settings page, which goes to another page, too. Like so:

Home -> Settings -> Subpage

We want it to be both in a separate file and do exactly that. So, if you want to have it neatly in the separate .tsx or .js file, do this in App.js, replacing the HomeScreen(), and adding our example SettingsScreen() and AnotherPageScreen():

function HomeScreen({ navigation }) {
  return (
    <Home navigation={navigation}/>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <Settings navigation={navigation}/>
  );
}
function AnotherPageScreen() {
  return (
    <AnotherPage/>
  );
}