Login screen

Add all this before doing 

 yarn add react-native-linear-gradient

 yarn add react-native-vector-icons

 yarn add react-native-animatable

import React from 'react';
import { Text, Button, StyleSheet,Platform,TextInput, View,TouchableOpacity, Dimensions, Imag
e} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import * as Animatable from 'react-native-animatable';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';

const SignInScreen = () => {
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.text_header}>Welcome !</Text>
            </View>
            <View style={styles.footer}>
                <Text style={styles.text_footer}>Email</Text>
                <View style={styles.action}>
                <FontAwesome 
                    name="user-o"
                    color="#05375a"
                    size={20}
                />
                <TextInput placeholder="Enter Email id" style={styles.textInput}/>
                <Feather 
                        name="check-circle"
                        color="green"
                        size={20}
                    />    
                </View>

                <Text style={[styles.text_footer, {marginTop:30}]}>Password</Text>
                <View style={styles.action}>
                <FontAwesome 
                    name="lock"
                    color="#05375a"
                    size={20}
                />
                <TextInput placeholder="Enter Password" style={styles.textInput}
                secureTextEntry ={true}/>
                <Feather 
                        name="eye-off"
                        color="grey"
                        size={20}
                    />    
                </View>
            </View>
           
        </View>
    );
};

export default SignInScreen;
const styles = StyleSheet.create({
    container: {
      flex: 1, 
      backgroundColor: '#009387'
    },
    header: {
        flex: 1,
        justifyContent: 'flex-end',
        paddingHorizontal: 20,
        paddingBottom: 50
    },
    footer: {
        flex: 3,
        backgroundColor: '#fff',
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        paddingHorizontal: 20,
        paddingVertical: 30
    },
    text_header: {
        color: '#fff',
        fontWeight: 'bold',
        fontSize: 30
    },
    text_footer: {
        color: '#05375a',
        fontSize: 18
    },
    action: {
        flexDirection: 'row',
        marginTop: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#f2f2f2',
        paddingBottom: 5
    },
    actionError: {
        flexDirection: 'row',
        marginTop: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#FF0000',
        paddingBottom: 5
    },
    textInput: {
        flex: 1,
        marginTop: Platform.OS === 'ios' ? 0 : -12,
        paddingLeft: 10,
        color: '#05375a',
        fontSize: 15
    },
    errorMsg: {
        color: '#FF0000',
        fontSize: 14,
    },
    button: {
        alignItems: 'center',
        marginTop: 50
    },
    signIn: {
        width: '100%',
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10
    },
    textSign: {
        fontSize: 18,
        fontWeight: 'bold'
    }
  });
Login Screen with check sign on 
import React, {useState} from 'react';
import { Text, Button, StyleSheet,Platform,TextInput, View,TouchableOpacity, Dimensions, Imag
e} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import * as Animatable from 'react-native-animatable';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';

const SignInScreen = ({navigation}) => {
// FOR OPENING ICON ON EMAIL ENTERY
    const [data, setdata] = useState ({email: '', password: '', check_textInputChange: false, 
secureTextEntry: true});

    const textInputChange = (val) => {
        if(val.length !==0) {
            setdata({...data, email: val, check_textInputChange: true});
        } else {
            setdata({...data, email: val, check_textInputChange: false});
        }
    }
// FOR PASSWORD HIDING ON ICON CLICK
    const handlePasswordChange = (val) => {
        setdata({...data, password: val});
    };

    const updateSecureTextEntery = () => {
        setdata({...data, secureTextEntry: !data.secureTextEntry});
    }

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.text_header}>Welcome !</Text>
            </View>
            <Animatable.View style={styles.footer}
            animation="fadeInUpBig"
            >
                <Text style={styles.text_footer}>Email</Text>
                <View style={styles.action}>
                <FontAwesome 
                    name="user-o"
                    color="#05375a"
                    size={20}
                />
                <TextInput placeholder="Enter Email id" style={styles.textInput}
                onChangeText = {(val) => textInputChange(val)}
                />
                {data.check_textInputChange ? 
                <Animatable.View
                animation="bounceIn">
                 <Feather 
                        name="check-circle"
                        color="green"
                        size={20}
                    /> 
                </Animatable.View>
               
                : null }
                   
                </View>

                <Text style={[styles.text_footer, {marginTop:30}]}>Password</Text>
                <View style={styles.action}>
                <FontAwesome 
                    name="lock"
                    color="#05375a"
                    size={20}
                />
                <TextInput placeholder="Enter Password" style={styles.textInput}
                 onChangeText = {(val) => handlePasswordChange(val)}
                secureTextEntry ={data.secureTextEntry ? true : false}/>
                <TouchableOpacity
                onPress={updateSecureTextEntery}>
                {data.secureTextEntry ? <Feather 
                        name="eye-off"
                        color="grey"
                        size={20}
                    />   :  <Feather 
                    name="eye"
                    color="grey"
                    size={20}
                /> 
                    }
                 
                </TouchableOpacity>
                
                </View>
                <View style={styles.button}>
                    <TouchableOpacity style={[styles.signIn, { backgroundColor: '#009387'}]}>
                        <Text style={[styles.textSign,{color: 'white'}]}>Sign In</Text>
                    </TouchableOpacity>

                </View>
                <View >
                    <TouchableOpacity style={[styles.signIn, {borderColor:'#009387', borderWi
dth:2, marginTop:  15}]} onPress={()=> navigation.navigate('SignUpScreen')}>
                        <Text style={[styles.textSign,{color: '#009387'}]}>Sign Up</Text>
                    </TouchableOpacity>

                </View>
            </Animatable.View>
           
        </View>
    );
};

export default SignInScreen;
const styles = StyleSheet.create({
    container: {
      flex: 1, 
      backgroundColor: '#009387'
    },
    header: {
        flex: 1,
        justifyContent: 'flex-end',
        paddingHorizontal: 20,
        paddingBottom: 50
    },
    footer: {
        flex: 3,
        backgroundColor: '#fff',
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        paddingHorizontal: 20,
        paddingVertical: 30
    },
    text_header: {
        color: '#fff',
        fontWeight: 'bold',
        fontSize: 30
    },
    text_footer: {
        color: '#05375a',
        fontSize: 18
    },
    action: {
        flexDirection: 'row',
        marginTop: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#f2f2f2',
        paddingBottom: 5
    },
    actionError: {
        flexDirection: 'row',
        marginTop: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#FF0000',
        paddingBottom: 5
    },
    textInput: {
        flex: 1,
        marginTop: Platform.OS === 'ios' ? 0 : -12,
        paddingLeft: 10,
        color: '#05375a',
        fontSize: 17
    },
    errorMsg: {
        color: '#FF0000',
        fontSize: 14,
    },
    button: {
        alignItems: 'center',
        marginTop: 50
    },
    signIn: {
        width: '100%',
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
       
    },
    textSign: {
        fontSize: 18,
        fontWeight: 'bold'
    }
  });

Status Bar 
Add below view
 <StatusBar backgroundColor='#009387' barStyle='light-content'/>

SIGN UP SCREEN.JS 
import React, {useState} from 'react';
import { Text, Button, StyleSheet,Platform,TextInput, View,TouchableOpacity, Dimensions, Imag
e, StatusBar} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import * as Animatable from 'react-native-animatable';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';

const SignUpScreen = ({navigation}) => {
// FOR OPENING ICON ON EMAIL ENTERY
    const [data, setdata] = useState ({email: '', password: '',confirm_password: '', check_te
xtInputChange: false, secureTextEntry: true, confirm_secureTextEntry: true});

    const textInputChange = (val) => {
        if(val.length !==0) {
            setdata({...data, email: val, check_textInputChange: true});
        } else {
            setdata({...data, email: val, check_textInputChange: false});
        }
    }
// FOR PASSWORD HIDING ON ICON CLICK
    const handlePasswordChange = (val) => {
        setdata({...data, password: val});
    };

    const updateSecureTextEntery = () => {
        setdata({...data, secureTextEntry: !data.secureTextEntry});
    };

    const handleConfirmPasswordChange = (val) => {
        setdata({...data, confirm_password: val});
    };

    const updateConfirmSecureTextEntery = () => {
        setdata({...data, confirm_secureTextEntry: !data.confirm_secureTextEntry});
    }

    return (
        <View style={styles.container}>
   <StatusBar backgroundColor='#009387' barStyle='light-content'/>
            <View style={styles.header}>
                <Text style={styles.text_header}>Welcome to Sign Up Screen !</Text>
            </View>
            <Animatable.View style={styles.footer}
            animation="fadeInUpBig"
            >
                <Text style={styles.text_footer}>Email</Text>
                <View style={styles.action}>
                <FontAwesome 
                    name="user-o"
                    color="#05375a"
                    size={20}
                />
                <TextInput placeholder="Enter Email id" style={styles.textInput}
                onChangeText = {(val) => textInputChange(val)}
                />
                {data.check_textInputChange ? 
                <Animatable.View
                animation="bounceIn">
                 <Feather 
                        name="check-circle"
                        color="green"
                        size={20}
                    /> 
                </Animatable.View>
               
                : null }
                   
                </View>

                <Text style={[styles.text_footer, {marginTop:30}]}>Password</Text>
                <View style={styles.action}>
                <FontAwesome 
                    name="lock"
                    color="#05375a"
                    size={20}
                />
                <TextInput placeholder="Enter Password" style={styles.textInput}
                 onChangeText = {(val) => handlePasswordChange(val)}
                secureTextEntry ={data.secureTextEntry ? true : false}/>
                <TouchableOpacity
                onPress={updateSecureTextEntery}>
                {data.secureTextEntry ? <Feather 
                        name="eye-off"
                        color="grey"
                        size={20}
                    />   :  <Feather 
                    name="eye"
                    color="grey"
                    size={20}
                /> 
                    }
                 
                </TouchableOpacity>
                
                </View>
                <Text style={[styles.text_footer, {marginTop:30}]}>Re-enter Password</Text>
                <View style={styles.action}>
                <FontAwesome 
                    name="lock"
                    color="#05375a"
                    size={20}
                />
                <TextInput placeholder="Re-enter Password" style={styles.textInput}
                 onChangeText = {(val) => handleConfirmPasswordChange(val)}
                secureTextEntry ={data.confirm_secureTextEntry ? true : false}/>
                <TouchableOpacity
                onPress={updateConfirmSecureTextEntery}>
                {data.secureTextEntry ? <Feather 
                        name="eye-off"
                        color="grey"
                        size={20}
                    />   :  <Feather 
                    name="eye"
                    color="grey"
                    size={20}
                /> 
                    }
                 
                </TouchableOpacity>
                
                </View>

                <View style={styles.button}>
                    <TouchableOpacity style={[sty
les.signIn, { backgroundColor: '#009387'}]}>
                        <Text style={[styles.text
Sign,{color: 'white'}]}>Sign Up</Text>
                    </TouchableOpacity>

                </View>
                <View >
                    <TouchableOpacity style={[sty
les.signIn, {borderColor:'#009387', borderWidth:2
, marginTop:  15}]} onPress={()=> navigation.navi
gate('SignInScreen')}>
                        <Text style={[styles.text
Sign,{color: '#009387'}]}>Sign In</Text>
                    </TouchableOpacity>

                </View>
            </Animatable.View>
           
        </View>
    );
};

export default SignUpScreen;
const styles = StyleSheet.create({
    container: {
      flex: 1, 
      backgroundColor: '#009387'
    },
    header: {
        flex: 1,
        justifyContent: 'flex-end',
        paddingHorizontal: 20,
        paddingBottom: 50
    },
    footer: {
        flex: 3,
        backgroundColor: '#fff',
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        paddingHorizontal: 20,
        paddingVertical: 30
    },
    text_header: {
        color: '#fff',
        fontWeight: 'bold',
        fontSize: 26.9
    },
    text_footer: {
        color: '#05375a',
        fontSize: 18
    },
    action: {
        flexDirection: 'row',
        marginTop: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#f2f2f2',
        paddingBottom: 5
    },
    actionError: {
        flexDirection: 'row',
        marginTop: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#FF0000',
        paddingBottom: 5
    },
    textInput: {
        flex: 1,
        marginTop: Platform.OS === 'ios' ? 0 : -12,
        paddingLeft: 10,
        color: '#05375a',
        fontSize: 17
    },
    errorMsg: {
        color: '#FF0000',
        fontSize: 14,
    },
    button: {
        alignItems: 'center',
        marginTop: 50
    },
    signIn: {
        width: '100%',
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
       
    },
    textSign: {
        fontSize: 18,
        fontWeight: 'bold'
    }
  });

For dimensions 