ReactNative Navigation to a screen in the same direcotry - react-native

Question

I am very new to react native and I had one question to ask. I have two screens in the same directory
screens:
Pro.js
Register.js
in Pro.js , there is one button to navigate to Register.js
<Button
textStyle={{ fontFamily: 'montserrat-regular', fontSize: 12 }}
style={styles.button}
onPress={() => navigation.navigate("Register")}>
GET STARTED
</Button>
When I run above, I get below error:
The action 'NAVIGATE' with payload {"name":"Register"} was not handled by any navigator.
Do you have a screen named 'Register'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
This is a development-only warning and won't be shown in production.
Can anyone help me to navigate to that page?

Answer 1

Check below code:
App.js
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import RegisterScreen from './RegisterScreen';
import HomeScreen from './HomeScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
const HomeScreen = ({ navigation }) => {
return (
<View>
<Text>This is the Home screen</Text>
<Button
title="Go to Register"
onPress={() => navigation.navigate('Register')}
/>
</View>
);
};
export default HomeScreen
RegisterScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
const RegisterScreen = () => {
return (
<View>
<Text>This is the Register screen</Text>
</View>
);
};
export default RegisterScreen