I'm trying to create screen navigation between screens in my react native website, but when I try to do this it shows a blank screen on my expo screen. I'm not sure what the problem is, can somebody please look at my code for me. My App.js is:
import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/Home'
import LoginScreen from './screens/login'
const Stack = createNativeStackNavigator();
const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Home' }}
/>
<Stack.Screen name="login" component={LoginScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default MyStack
My Home Screen code is:
import { NavigationContainer } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
const home = () => {
return (
<View style={styles.container}>
<Text>Home Screen</Text>
<Button onPress = {() => navigation.navigate('login')} title='Next Screen'/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default home
CodePudding user response:
Two mistakes I spotted in HomeScreen
navigation
is not defined
const home = ({ navigation }) => {
return (
<View style={styles.container}>
Button
is not imported
import { StyleSheet, Text, View, Button } from 'react-native';
The rest look fine, and I even put it on a snack and tested it
https://snack.expo.dev/@mohammed-handa/simple-stack
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StyleSheet, Text, View, Button } from 'react-native';
import { StatusBar } from 'expo-status-bar';
const Stack = createNativeStackNavigator();
const LoginScreen = () => {
return (
<View style={styles.container}>
<Text>Login Screen</Text>
<StatusBar style="auto" />
</View>
);
};
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.container}>
<Text>Home Screen</Text>
<Button
onPress={() => navigation.navigate('login')}
title="Next Screen"
/>
<StatusBar style="auto" />
</View>
);
};
const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Home' }}
/>
<Stack.Screen name="login" component={LoginScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default MyStack;