How to set position of an Image on the screen based on the dimension React Native Expo IOS App

Question

I have a page in React Native Expo IOS App.I want to display an Image in the same position on every devices with different screen size.Below is the code which helps to correctly postion Image in Iphone 5S device.

LoginScreen.js:

import React,{useEffect} from 'react';
import {  ActivityIndicator,StyleSheet, Text, View 
,KeyboardAvoidingView,TouchableOpacity,Image} from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import * as authActions from '../../store/actions/auth';
import AsyncStorage from '@react-native-async-storage/async-storage'
import Toast from 'react-native-root-toast';
import {useDispatch, useSelector} from "react-redux";
import { Dimensions} from 'react-native';
let deviceWidth = Dimensions.get('window').width;
let deviceHeight = Dimensions.get('window').height;


const LoginScreen = props => {

const [isLoading,setIsLoading] = React.useState(false);
const [error, setError] = React.useState('');
const dispatch = useDispatch();
const loginStatus1 = useSelector(state => state?.auth?.login_Status);

const loginHandler =  async () => {
  console.log(deviceHeight);
  let action
    action =  authActions.hashpassword(
             textemailid,
             textpassword
             );
   setError(null);
   setIsLoading(true);
         try{
          await dispatch(action);
  
          const userDatalogin = await
          AsyncStorage.getItem("userDatalogin");
          const obj = JSON.parse(userDatalogin);
          
      var loginStatus1 = obj.login;
      console.log(loginStatus1);
   
          if(loginStatus1 === 'Password doesnt match!'){
            let toast_success = Toast.show('Wrong Credentials');
        
           setIsLoading(false);
              
            }
             else if(loginStatus1 === 'Password matches!'){ 
              props.navigation.navigate({routeName:'Home'});
          
            } 
            
         } catch(err){
           setError(err.message);
           console.log(err.message);
          setIsLoading(false);
         }          
     };    
return(
<KeyboardAvoidingView style={styles.container}>
<ScrollView>
<View style={styles.container}>
 <View style={styles.subView}>
<View style={styles.imgcontainer}>
<Image
style={{flex:1, 
maxWidth: '30%',
height: 'auto',
alignSelf:'center',
bottom:deviceHeight-800
}}
 source={require('../../assets/person-icon.png')}
 resizeMode="contain"
 />
 </View>  
 </View>
 </View>
 </ScrollView>
 </KeyboardAvoidingView>
 )
 }

 const styles = StyleSheet.create({ 
 container: {
 backgroundColor: '#0B0B45',
 flex:1
 },
 subView: {
 backgroundColor: '#1D1F33',
 height:deviceHeight-100,
 marginTop:150,
 minHeight: 500,
 borderTopRightRadius: 40,
 borderTopLeftRadius: 40,
 },
 imgcontainer:{
 maxWidth: '100%',
 height: 'auto',
 alignSelf:'center',
 bottom:deviceHeight-80
 }
 });

 export default LoginScreen;

Below is the image of devices(simulators),I am checking for the position of the Image.First one is Iphone 5S, second one is Iphone Xs Max, third one is IPad Pro.

Can anyone tell how to style the imgcontainer to set the Image like on the first device(Iphone 5 S) on the other 2 devices.FYI in the other devices, maybe the Image is out of the application screen area.Thanks in Advance.