Login Screen Design

Copy to Clipboard

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableHighlight, Image} from 'react-native';
import personaltext from './images/personaltext.png';

export default class Login extends Component {

constructor(props) {
    super(props);
    this.state = {
        email : '',
        password : '',
    };
}

onClick = () => {
    console.log('Login', this.state.email, this.state.password);
}

render() {
    return (
        <View style={styles.container}>
            <Image style={{height : 300 , width : 300, top: 0}}
                resizeMode={'center'} source={personaltext}
            />
            <View style={styles.inputContainer}>
                <TextInput style={styles.inputs}
                    placeholder="Email"
                    onChangeText={(email) => this.setState({email})}/>
            </View>
            <View style={styles.inputContainer}>
                <TextInput style={styles.inputs}
                    placeholder="Password"
                    onChangeText={(password) => this.setState({password})}/>
            </View>
            <TouchableHighlight style={[styles.buttonContainer, styles.sendButton]} onPress={() => this.onClick()}>
                 <Text style={styles.buttonText}>Send</Text>
            </TouchableHighlight>
        </View>
    );
}
}

const styles = StyleSheet.create({
    container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: 'white',
    },
   inputContainer: {
       borderColor: 'black',
       backgroundColor: '#FFFFFF',
       borderRadius:30,
       borderWidth: 1,
       width:300,
       height: 50,
       marginBottom:20,
       flexDirection: 'row',
       alignItems:'center',
   },
   inputs:{
       height:45,
       marginLeft:16,
       fontSize: 20,
       borderBottomColor: '#FFFFFF',
       flex:1,
   },
   buttonContainer: {
       height:50,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
       marginBottom:20,
       width:200,
       borderRadius:30,
   },
   sendButton: {
       backgroundColor: '#000000',
},
   buttonText: {
      color: 'white',
      fontSize: 18,
   }
});