87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
//Modules
|
|
import React from 'react';
|
|
import {View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
|
|
|
|
|
|
//Components
|
|
import {Header} from '../index';
|
|
|
|
const Login = ({ navigation }) => {
|
|
const [UserName, onChangeUserName] = React.useState('');
|
|
const [PassWord, onChangePassWord] = React.useState('');
|
|
|
|
return (
|
|
<View>
|
|
<Header/>
|
|
<View style={Styles.Container}>
|
|
<TextInput
|
|
style={Styles.Input}
|
|
onChangeText={text => onChangeUserName(text)}
|
|
placeholder="Gebruikersnaam"
|
|
value={UserName}
|
|
/>
|
|
<TextInput
|
|
style={Styles.Input}
|
|
onChangeText={text => onChangePassWord(text)}
|
|
placeholder="Wachtwoord"
|
|
value={PassWord}
|
|
secureTextEntry={true}
|
|
/>
|
|
<View style={Styles.BtnWrapper}>
|
|
<TouchableOpacity style={Styles.BtnOutline}>
|
|
<Text>Annuleren</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={Styles.Btn}>
|
|
<Text style={Styles.white} onPress={() =>
|
|
navigation.navigate('Home')
|
|
}>Login</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
}
|
|
|
|
const Styles = StyleSheet.create ({
|
|
Container: {
|
|
marginTop: '50%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
|
|
},
|
|
Input: {
|
|
height: 40,
|
|
borderColor: '#DE0000',
|
|
borderRadius: 5,
|
|
borderWidth: 1,
|
|
width: '60%',
|
|
marginTop: 30,
|
|
padding: 10.
|
|
},
|
|
Btn: {
|
|
backgroundColor: '#DE0000',
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 15,
|
|
borderRadius: 5,
|
|
marginLeft: 50,
|
|
},
|
|
BtnOutline: {
|
|
borderColor: '#DE0000',
|
|
borderRadius: 5,
|
|
borderWidth: 1,
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 15,
|
|
borderRadius: 5,
|
|
},
|
|
white: {
|
|
color: '#ffffff',
|
|
},
|
|
BtnWrapper: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
marginTop: 30,
|
|
},
|
|
})
|
|
|
|
export default Login; |