ReactNative; How to call new component to open new screen? - react-native

Question

I want to open new screen from Nextpage.js ,after "onPress" worked, everything still same, NextPage not show on screen but not error. How should I do?
import NextPage from './NextPage';
function onClick() {
<NextPage/>
}
<TouchableHighlight onPress = {onClick}>
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
</TouchableHighlight>

Answer 1

you can't call a screen like that. If you want to navigate to any other screen in your case NextPage, you should define it in your navigation stack first. After that, you can call function navigation.navigate("NextPage") to navigate to next page.
Navigator file:
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import * as React from 'react';
import Home from '../screens/Home';
import Next from '../screens/Next';
const Stack = createStackNavigator();
function App({initialRouteName = 'Home'}) {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home"
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Next" component={Next} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Suppose you are navigating from Home to NextPage
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
export default function Home(props) {
function onClick() {
props.navigation.navigate('NextPage');
}
return (
<TouchableHighlight onPress={onClick}>
<View style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
</TouchableHighlight>
);
}
const styles = StyleSheet.create({});