Cannot get object to start on the right side of the screen

Question

So I am using React native size matters and until right now it has worked pretty much perfectly. I cannot get the arrows of these two to match up. Right now I have it lined up on android but when I line them up on the iphone the android ones get way wonkier.

I have been using paddingLeft and left to try and make this work. I was trying to use right: but that was not really working. I am trying to accomplish something like flex rtl so that the scale might work easier coming from the right side of the screen rather than the different distances on the left? I am not sure the best way to go about this.

Like I said, when I line it up for the iphone instead, the difference is a lot more dramatic. Thank you for any insight at all!

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

export default function HomeScreen() {
  return (
    <LinearGradient
      colors={['#272933', '#272933', '#272933']}
      style={styles.container}>

     {/* Beginning of Click for Accoutn Settings */}
    <TouchableOpacity>
     <View style={{flexDirection: 'row', top: scale(150)}}>
        <View style = {{paddingLeft: scale(10)}}>
            <MaterialCommunityIcons 
                name="account-outline" color='white' size={50}>
            </MaterialCommunityIcons>
        </View>
        <View style = {{justifyContent: 'center', paddingLeft: scale(10)}}>
            <Text style={styles.accountPlaceholder} >
               Click for Account Settings 
            </Text>
        </View>
        <View style = {{justifyContent: 'center', left: scale(5)}}>
            <MaterialCommunityIcons 
                name="chevron-right" color='white' size={50} >
            </MaterialCommunityIcons>
        </View>
      </View>
      </TouchableOpacity>
      {/* End of Click for Accoutn Settings */}

      {/* Beginning of Click to Sign Out*/}
      <TouchableOpacity>
      <View style={{flexDirection: 'row', top: scale(150), paddingTop: scale(30)}}>
        <View style = {{paddingLeft: scale(15)}}>
            <MaterialCommunityIcons 
                name="logout" color='white' size={50} >
            </MaterialCommunityIcons>
        </View>
        <View style = {{justifyContent: 'center', paddingLeft: scale(10)}}>
            <Text style={styles.accountPlaceholder} >
               Click to Sign Out 
            </Text>
        </View>
        <View style = {{justifyContent: 'center', paddingLeft: scale(80)}}>
            <MaterialCommunityIcons 
                name="chevron-right" color='white' size={50}>
            </MaterialCommunityIcons>
        </View>
      </View>
      </TouchableOpacity>
      {/* End of Click to Sign up */}

    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }, 
  accountPlaceholder: {
      color: 'white',
      fontSize: 20,
  },
     userName:{
      color: 'white',
      fontSize: 32,
      fontWeight: 'bold',
      padding: 20
    },
});

Answer 1

Using padding to make the Click to Sign Out button as wide as Click for Account Settings might leads to changes between devices and preferences (fonts, resolution etc.)

Instead, I'd suggest to make the buttons flex container and make the text flexGrow 1 so it will take the all free space, and as a result, will "push" the arrow to the right.

export default function HomeScreen() {
  return (
    <LinearGradient
      colors={['#272933', '#272933', '#272933']}
      style={styles.container}>
      {/* Beginning of Click for Accoutn Settings */}
      <View>
        <TouchableOpacity style={styles.button}>
          <MaterialCommunityIcons
            name="account-outline"
            color="white"
            size={50}></MaterialCommunityIcons>
          <View style={styles.text}>
            <Text style={styles.accountPlaceholder}>
              Click for Account Settings
            </Text>
          </View>
          <MaterialCommunityIcons
            name="chevron-right"
            color="white"
            size={50}></MaterialCommunityIcons>
        </TouchableOpacity>
        {/* End of Click for Accoutn Settings */}

        {/* Beginning of Click to Sign Out*/}
        <TouchableOpacity style={styles.button}>
          <MaterialCommunityIcons
            name="logout"
            color="white"
            size={50}></MaterialCommunityIcons>
          <View style={styles.text}>
            <Text style={styles.accountPlaceholder}>Click to Sign Out</Text>
          </View>
          <MaterialCommunityIcons
            name="chevron-right"
            color="white"
            size={50}></MaterialCommunityIcons>
        </TouchableOpacity>
        {/* End of Click to Sign up */}
      </View>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 150,
    alignItems: 'center',
  },
  accountPlaceholder: {
    color: 'white',
    fontSize: 20,
  },
  button: {
    width: '100%',
    flexDirection: 'row',
    paddingHorizontal: 10,
    alignItems: 'center',
    marginBottom: scale(15)
  },
  text: {
    flexGrow: 1,
  },
});

Working example https://snack.expo.io/@moshfeu/so-67117698