Реагируйте на родные устройства iOS с разным расположением. Как позволить им выглядеть правильно?

Question

Я хотел создать экран входа в систему, но кнопка входа в систему имела разные позиции на разных устройствах. Мне кажется, что поле для входа также не всегда имеет 30% -ое расстояние до вершины, но я не уверен. Я использовал EStyleSheet для расстояний в процентах. Пожалуйста, помогите, я не знаю, как это исправить.

Вот мой код:

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
  Alert,
  TouchableOpacity,
  TextInput,
  Switch,
  Image,
  SafeAreaView
} from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
import { StackNavigator } from 'react-navigation';
const util = require('util');

EStyleSheet.build({
  $textColor: 'white'
});

export default class loginScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isActive: true }
  }
  static navigationOptions = {
      title: 'Login',
      header: null,
  };
  render() {
      var {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>
        <View style={{height: '100%',width: '100%',alignItems:'center'}}>
        <Text style={styles.loginText}>Thats the first line of text!</Text>
        <View style={styles.loginView}>
        <View style={{width: '100%', height: 8, backgroundColor: 'red',}}></View>
        <Text style={styles.loginViewText}>LOGIN</Text>
        <View style={{top: '35%',}} >
        <TextInput style={styles.emailfield} underlineColorAndroid="transparent" placeholder="E-mail" />
        <TextInput style={styles.passwordfield} underlineColorAndroid="transparent" secureTextEntry={true} placeholder="Passwort" />
        </View>
        <View style={styles.rememberView} ><Switch style={styles.switch} value={this.state.isActive} onValueChange={(val) => this.setState({isActive: val})}/>
        <Text style={styles.rememberMe}>Remember me</Text></View>
        </View>
        <View style={styles.ButtonView} pointerEvents='box-none'>
        <TouchableOpacity
          style={styles.loginScreenButton}
          onPress={() => navigate('Second', {})}>
          <Image style={{width: 80, height: 80, }} source={require("../assets/LoginButton.png")}/>
        </TouchableOpacity>
        </View>
        </View>
        <View style={styles.createAcc}></View>
      </View>
    );
  }
}
const styles = EStyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
  },
  loginScreenButton:{
    position: 'absolute',
    right: '5%',
    bottom: '25%',
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 15 },
    shadowOpacity: 0.1,
    shadowRadius: 18,
    elevation: 2,
  },
  loginText:{
    textAlign:'center',
    width: 350,
    top: '20%',
    fontSize: 36,
  },
  passwordfield:{
    width: 200,
    fontSize: 18,
    borderBottomColor: 'grey',
    borderBottomWidth: 1,
    marginTop: 30,
  },
  emailfield:{
    width: 200,
    fontSize: 18,
    borderBottomColor: 'grey',
    borderBottomWidth: 1,
  },
  loginView:{
    top: '30%',
    height: '30%',
    minHeight: 250,
    width: 300,
    backgroundColor: 'white',
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 15 },
    shadowOpacity: 0.1,
    shadowRadius: 18,
    elevation: 2,
    borderRadius: 8,
    alignItems: 'center',
  },
  loginViewText:{
    fontSize: 30,
    left: '8%',
    top: '8%',
    position: 'absolute',
    fontWeight: 'bold',
  },
  rememberMe:{
    position: 'absolute',
    left: '30%',
  },
  switch:{
    left: '8%',
    position: 'absolute',
  },
  rememberView:{
    width: 300,
    height: 50,
    position: 'absolute',
    bottom: 0,
    justifyContent: 'center',
  },
  createAcc:{
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 15 },
    shadowOpacity: 0.1,
    shadowRadius: 18,
    elevation: 2,
  },
  ButtonView:{
    height: '30%',
    minHeight: 250,
    width: 300,
    alignItems: 'center',
  }
});

Iphone 5s

Iphone X