Login Screen Design

Copy to Clipboard

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, StatusBar} from 'react-native';

export default class SignIn extends Component {
constructor(props) {
    super(props);
}

onClick = () => {

}

render() {
    return (
        <View style={styles.container}>
            <StatusBar
                backgroundColor="#001B48"
                barStyle="light-content"
            />
            <View style={{alignItems:'center',justifyContent:'center',backgroundColor:'#001B48',width: '100%',height: '65%'}}>
                <View style={{flex: 1}}/>
                <View style={{flex:1, alignItems:'center',justifyContent:'center'}}>
                    <Text style={[styles.welcome,{color: 'white'}]}>~ HiChat ~</Text>
                </View>
                <View style={{paddingBottom: 15}}>
                    <TouchableOpacity style={[styles.buttonContainer, styles.sendButton,{backgroundColor: 'white'}]} onPress={() => this.onClick()}>
                        <Text style={styles.buttonText}>Facebook Login</Text>
                    </TouchableOpacity>
               </View>
            </View>
            <View style={{paddingTop: 30,height: '50%', backgroundColor:'white'}}>
            <TouchableOpacity style={[styles.buttonContainer, styles.sendButton,{backgroundColor: '#A72F1D'}]} onPress={() => this.onClick()}>
                <Text style={styles.buttonText}>Google Login</Text>
            </TouchableOpacity>
        </View>
    </View>
    );
}
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
     alignItems: 'center',
      backgroundColor: 'white',
    },
    welcome: {
      fontSize: 30,
      textAlign: 'center',
      margin: 10,
      marginBottom:50,
    },
    buttonContainer: {
      height:45,
      flexDirection: 'row',
      justifyContent: 'center',
       alignItems: 'center',
       marginBottom:20,
       width:250,
       borderRadius:30,
       paddingHorizontal: 20
     },
     sendButton: {
       backgroundColor: 'rgb(240,240,240)',
     },
     buttonText: {
       color: 'black',
       fontSize: 20
     },
  });