import * as React from 'react';
import { Button, View, Text, TextInput, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen({ navigation }) {
const [email, setEmail] = React.useState('');
const [name, setName] = React.useState('');
return (
<View
style={{
flex: 0.5,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}>
<View style={{ flexDirection: 'row' }}>
<Text>Email</Text>
<TextInput
onChangeText={setEmail}
style={styles.input}
/>
</View>
<View style={{ flexDirection: 'row', margin: 20 }}>
<Text>Name</Text>
<TextInput
onChangeText={setName}
style={styles.input}
/>
</View>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details', { email:email, name:name })}
/>
</View>
);
}
function DetailsScreen({ navigation, route }) {
return (
<View
style={{
flex: 0.5,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}>
<View style={{ flexDirection: 'row' }}>
<Text>Email</Text>
<TextInput style={styles.input}
value={route.params.email}
/>
</View>
<View style={{ flexDirection: 'row', margin: 20 }}>
<Text>Name</Text>
<TextInput style={styles.input}
value={route.params.name}
/>
</View>
<Button title="Back" onPress={() => navigation.navigate('Home')} />
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
input: {
height: 25,
margin: 0,
marginLeft: 10,
borderWidth: 0.2,
padding: 5,
},
});
export default App;
NEW ENTRIES