React-native Tutorial : Making a login screen

Hello everybody, this is a React Native Tutorial , follow this we gonna learn how to make a real app with React Native.  This is a step 1 , create a login screen.

After finish this tutorial we have something like this.

Step 1 : Open terminal : react-native init YourProjectName

Project Struct :  // You can click here to read more about React native project structure, maximum code reuse

Login.js

/** start code here **/

import React, { Component } from 'react';

import LoginForm from './LoginForm';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  Image

} from 'react-native';

export default class Login extends Component {

  render() {

    return (

      <View style={styles.container}>

          <View style = {styles.logoConten}>

            <Image

             style = {styles.logo}

             source={require('../images/ic_githug.png')} />

          <Text style = {styles.titleApp}>An App make for github using React native</Text>

          </View>

          <LoginForm style ={{flex:0}}/>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#1B8057',

  },

  logoConten:{

    flexGrow :1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  titleApp: {

    width : 200,

    fontSize: 18,

    textAlign: 'center',

    margin: 10,

    color :'#ffffff'

  },

  logo:{

    width:100,

    height: 100

  },

  instructions: {

    textAlign: 'center',

    color: '#333333',

    marginBottom: 5,

  },

});

LoginForm.js

/** start code here **/

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  TextInput,

  TouchableOpacity,

  KeyboardAvoidingView,

  StatusBar

} from 'react-native';

export default class LoginForm extends Component {

  render() {

    return (

      <KeyboardAvoidingView behavior = "padding" style={styles.container}>

      <StatusBar

        barStyle = "light-content"

      />

        <TextInput

          placeholder = "User name or email"

          placeholderTextColor = '#cccccc'

          returnKeyType="next"

          keyboardType = "email-address"

          autoCorrect = {false}

          autoCapitalize = "none"

          onSubmitEditing = {()=> this.passwordInput.focus()}

          style = {styles.input}>

        </TextInput>

        <TextInput

          placeholder ="Password"

          placeholderTextColor ='#cccccc'

          secureTextEntry

          returnKeyType="go"

          ref = {(input)=>this.passwordInput = input}

          style = {styles.input}>

        </TextInput>

        <TouchableOpacity style = {styles.buttonContainer}>

        <Text style ={styles.loginbutton}>LOGIN</Text>

        </TouchableOpacity>

      </KeyboardAvoidingView>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    padding :20

  },

  input:{

    minWidth:300,

    flexWrap:'wrap',

    height : 40,

    backgroundColor: 'rgba(255,255,255,0.2)',

    paddingHorizontal : 10,

    color:'#fff',

    marginBottom : 10,

  },

  buttonContainer:{

    backgroundColor: "#1980b9",

    paddingVertical:10,

    marginTop:15,

    marginBottom:20

  },

  loginbutton:{

    color: '#ffffff',

    textAlign:'center',

    fontWeight:'700'

  }

});

index.ios.js

/** start code here **/

import React, { Component } from 'react';

import Login from './src/components/login/Login';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  Image

} from 'react-native';

export default class RNT extends Component {

  render() {

    return (

      <Login/>

    );

  }

}

AppRegistry.registerComponent('RNT', () => RNT