How do I break out react navigation code to a new page?


How do I break out my code to a new page. This is my failed effort;

// App.js
import * as React from ‘react’;
import { View, Text } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;

import Home from ‘./app/home’;
import Welcome from ‘./app/welcome’;

const Stack = createStackNavigator();

function App() {
return (

<Stack.Screen name=“Home” component={Home} />
<Stack.Screen name=“Welcome” component={Welcome} />


export default App;

// ./home/index.js
import * as React from ‘react’;

function Home({ route, navigation }) {

const { myName } = route.params;

return (
<Container style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
Welcome {myName}


export default Home;

import Home from './app/home';
import Welcome from './app/welcome';

The above would imply that you have a directory called app which contains either files called home.js and welcome.js or directories called home and welcome which contain files called index.js.

Based on your ./home/index.js comment it looks like your home directory is directly in your top level directory and not within an app directory.