gistfile1.txt

import React, {Component} from 'react';
import {
  StyleSheet, TouchableOpacity,
  View, Text, Image, ImageBackground,
} from 'react-native';
import {
  Form, Item, Input, Label,
  Icon, Button
} from 'native-base';

import bgSrc from '../img/bgpic5.gif';
import logoImg from '../img/logo.png';
import LoginForm from '../components/LoginForm'

export default class LoginScreen extends Component {
 
  handleSubmit = () => {
    alert('this is login !')
   }


  render() {
    return(
      <ImageBackground style={styles.picture} source={bgSrc}>

        <View style={styles.container}>
           <View style={styles.conImg}>
             <Image source={logoImg} style={styles.image} />
           </View>
           <View style={styles.form}>
            <LoginForm {...this.props} onSubmit={this.handleSubmit} />
          </View>
           <View style={styles.sign}>
            <TouchableOpacity>
              <Text style={styles.text1}>Create Account</Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style={styles.text1}>ForgotEmail?</Text>
            </TouchableOpacity>
           </View>
        </View>

      </ImageBackground>
    )
  }
}

const styles = StyleSheet.create({
  picture: {
    flex: 1,
    width: null,
    height: null,
  },
  container: {
    flex: 1,
  },
  sign: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems:'center'
  },
  form: {
    flex: 1,
    justifyContent: 'center',
    marginRight:70,
    marginLeft:60
  },
  conImg: {
    flex: 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 125,
    height: 125,
  },
  text1: {
    color: "#f9fafc",
    backgroundColor: 'transparent',
    alignItems:'center',
    fontFamily:'Gabriola Regular'
  },
  conbutton:{
    flex:0.5,
    justifyContent:'center',
    alignItems:'center',
  },

});