SignInScreen.js

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




export default class SignInScreen extends Component {
  render() {
    return (
      <View style={styles.SignInBox}>
        <TextInput style={styles.txtEmailSign} placeholder="Email"  />

        <TextInput style={styles.txtPassSign} secureTextEntry={true} placeholder="Password"  />

        <View style={styles.masterRow}>

          <View style={styles.subColumn1}>

            <TouchableOpacity style={styles.btnForgot}>
                <Text style={styles.txtBottomHelp}>
                    I forgot my password
                </Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.btnDontHave}>
                <Text style={styles.txtBottomHelp}>
                    I don't have an account
                </Text>
            </TouchableOpacity>

          </View>

          <View style={styles.subColumn2}>

            <TouchableOpacity style={styles.btnNext} activeOpacity={0.5}>
              <Image style={styles.imgBtnNext} source={require('../assets/arrowRightBlue.png')}/>
            </TouchableOpacity>

          </View>

        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  SignInBox: {
    position: 'absolute',
    height: 250,
    backgroundColor: '#fff',
    bottom: 0,
    width: '100%',
    paddingHorizontal: 10,
  },
  txtEmailSign: {
    alignSelf: 'stretch',
    height: 40,
    fontSize: 18,
    color: 'black',
    borderBottomColor: 'black',
    borderBottomWidth: 1,
    top: 25,
    marginBottom: 30,
  },
  txtPassSign: {
    alignSelf: 'stretch',
    height: 40,
    color: 'black',
    fontSize: 18,
    borderBottomColor: 'black',
    borderBottomWidth: 1,
    marginTop: 25,
    marginBottom: 25,
  },
  btnForgot: {
    marginBottom: 10,
  },
  txtBottomHelp: {
    color: '#007AFF',
    fontSize: 16,
  },
  btnNext: {
    bottom: 2,
    right: 2,
    alignItems: 'center',
    width: 60,
    height: 60,
  },
  imgBtnNext: {
    resizeMode: 'stretch',
    width: 60,
    height: 60,
    bottom: 2,
    right: 2,
  },
  masterRow: {
    flexDirection: 'row',
    marginTop: 25,
    width: '100%',
    justifyContent: 'space-between',

  },
  subColumn1: {
    flexDirection: 'column',
    marginRight: '30',

  },
  subColumn1: {
    bottom: 2,
    left: 0,
  },
});