different screens navigation
import * as React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function Login({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Login Screen</Text>
<View style={{ margin: 10 }}>
<Button
title="Health Partner"
onPress={() => navigation.navigate('Home', { type: 'partner' })}
/>
</View>
<View style={{ margin: 10 }}>
<Button
title="User"
onPress={() => navigation.navigate('Home', { type: 'user' })}
/>
</View>
</View>
);
}
function HomeScreen({ route }) {
let { type } = route.params;
return (
<View style={type === 'user' ? styles.user : styles.partner}>
<Text>{`Home Screen ${type}`}</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
user: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'pink',
},
partner: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'yellow',
},
});
export default App;