import React,{useState} from 'react';
import { Button, View,ScrollView ,Text,TouchableOpacity,StyleSheet} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {TextInput} from 'react-native-paper';
function Input({navigation}) {
const [name, setName] = useState("");
const [pass, setPass] = useState("");
return (
<ScrollView contentContainerStyle = {styles.container}>
<View style = {{flexDirection:'row',paddingTop:5}}>
<Text style={{fontWeight:"bold",fontSize:20,paddingTop:18,paddingRight:12}}>Username </Text>
<TextInput
label="Username"
mode="outlined"
style={{margin: 10,width:180,height:35}}
default={name}
onChangeText = {text => setName(text)}
/>
</View>
<View style = {{flexDirection:'row'}}>
<Text style={{fontWeight:"bold",fontSize:20,paddingTop:35,paddingRight:10}}>Password </Text>
<TextInput
label="Password"
mode="outlined"
secureTextEntry={true}
style={{marginBottom: 24,width:180,height:35,marginLeft:12,marginTop:25}}
default={pass}
onChangeText = {text => setPass(text)}
/>
</View>
<TouchableOpacity style={styles.button}
onPress={()=>{navigation.navigate("Display",
{name:name,pass:pass}
)
}
}
>
<Text style={styles.btnText}>Submit</Text>
</TouchableOpacity>
</ScrollView>
);
}
function MyDisplay({navigation,route}) {
return (
<View style={{ flex: 1, marginLeft:20,marginTop:40 }}>
<Text style={styles.displaytext}>Username : {route.params.name}</Text>
<Text style={styles.displaytext}>Password : {route.params.pass}</Text>
</View>
)}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Data_input" component={Input} options={{ title: 'CuOnline' }} />
<Stack.Screen name="Display" component={MyDisplay} options={{ title: 'Display Screen' }}/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
justifyContent:'center',
backgroundColor: '#ecf0f1',
padding: 8,
flexDirection:'column',
marginLeft:16,
marginTop:75
},
button:{
marginTop:25,
width:120,
padding: 10,
borderRadius: 4,
borderWidth: 1,
borderColor: '#01516b',
backgroundColor:"#008CBA",
marginLeft: 120,
},
btnText: {
color:"white",
fontWeight: 'bold',
textAlign: 'center',
},
displaytext:{
fontWeight: 'bold',
fontSize:20
}
});
export default App;
NEW ENTRIES