REACT NATIVE - Simple Login Screen

// Day 2 Learning

//import liraries

import React, {Component, useState} from 'react';

import {

View,

TouchableOpacity,

Text,

TextInput,

StyleSheet,

} from 'react-native';

// create a component

const LoginScreen1 = () => {

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const handleSubmitPress = () => {

console.log(email + ' -- ' + password);

};

return (

<View style={styles.container}>

<Text

style={{

fontSize: 30,

textAlign: 'center',

}}>

Welcome back

</Text>

<TextInput

placeholder="Email"

placeholderTextColor="#010101"

onChangeText={text => {

//console.log(text)

setEmail(text);

}}

style={styles.input}

/>

<TextInput

placeholder="Password"

placeholderTextColor="#010101"

secureTextEntry={true}

onChangeText={text => {

//console.log(text)

setPassword(text);

}}

style={styles.input}

/>

<TouchableOpacity onPress={handleSubmitPress} style={styles.submitButton}>

<Text style={styles.submitButtonText}> Login </Text>

</TouchableOpacity>

</View>

);

};

// define your styles

const styles = StyleSheet.create({

safeAreacontainer: {

flex: 1,

},

container: {

flex: 1,

paddingTop: 30,

justifyContent: 'center',

},

input: {

backgroundColor: '#F4F4F5',

margin: 15,

height: 48,

borderColor: 'transparent',

borderWidth: 1,

padding: 10,

},

submitButton: {

backgroundColor: '#057AFF',

padding: 10,

margin: 15,

height: 40,

alignItems: 'center',

},

submitButtonText: {

color: 'white',

fontWeight: 'bold',

justifyContent: 'center',

},

});

//make this component available to the app

export default LoginScreen1;

 Screenshot