LoginScreen

import React, { Component } from 'react'
import { ScrollView, View, TextInput, Text, Image, StatusBar } from 'react-native'
import { Button } from 'native-base'

class LoginScreen extends Component {
    static navigationOptions = {
        header: null
    }

    render() {
        return (
            <ScrollView style={{ flex: 1, backgroundColor: 'white' }}>
                <StatusBar backgroundColor='#fb5858' barStyle="dark-content" />

                {/*------------ App Head ---------*/}
                
                <View style={{ backgroundColor: '#fb5858', flex: 1, flexDirection: 'column', padding: 30 }}>
                
                {/*------------ Header Text ---------*/}
                
                    <View style={{ alignItems: "center", marginBottom: 20 }}>
                        <Text style={{ color: 'black' }}>تسجـــيل الدخول</Text>
                    </View>
                
                   { /*------------ Header Image ---------*/}
                
                    <View style={{ alignItems: "center" }}>
                        <Image source={require('../Images/logo.jpg')} style={{ width: 143, height: 168 }} />
                    </View>

                </View>

                <View style={{ marginTop: 60, flex: 2 }}>
                {/*------------ Phone Num Input ---------*/}
                    <TextInput
                        keyboardType='numeric'
                        placeholder="رقم الجوال"
                        style={{ borderWidth: 1, margin: 5, backgroundColor: '#f9f9f9', borderColor: 'gray', width: '80%', marginRight: '10%', marginLeft: '10%', borderRadius: 40 }}
                    />
                     {/*------------ Password Input ---------*/}
                    <TextInput
                        secureTextEntry
                        placeholder="كلمه المرور"
                        style={{ borderWidth: 1, margin: 5, backgroundColor: '#f9f9f9', borderColor: 'gray', width: '80%', marginRight: '10%', marginLeft: '10%', borderRadius: 40 }}
                    />
                    
                    {/*------------ Log In Button---------*/}
                    <View>
                        <Button
                            rounded
                            style={{ width: '80%', marginRight: '10%', marginLeft: '10%', marginTop: 15, backgroundColor: '#fb5858' }}
                            onPress={() => this.props.navigation.navigate('List')}
                        >

                            <Text style={{ textAlign: 'center', color: 'white', width: '100%', fontWeight: 'bold' }}>تسجـــيل الدخول</Text>
                        </Button>
                        <Text style={{ textAlign: 'center', marginTop: 35, color: '#fb5858', fontSize: 20 }}>نسيت كلمه المرور؟</Text>
                        <View style={{ flexDirection: 'row', justifyContent: "center", marginTop: 15 }} >
                            <Text style={{ textAlign: 'center', color: '#fb5858', fontSize: 15, marginRight: 10 }}>سجل الان</Text>
                            <Text style={{ textAlign: 'center', fontSize: 15, fontWeight: 'bold' }}>ليس لديك حساب؟</Text>
                        </View>
                    </View>
                </View>

            </ScrollView>
        );
    }
}

export default LoginScreen;