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

user_12060231 0
Viewed 212

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.

enter image description here enter image description here

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
    },
});
react-native css
2 Answers

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

user_8631100

Forget the padding as it might be different on your next screen or it might be different if your font changes.

Use two separate windows or forms which are shown side by side.

Get the size of the available screen (which must be minus any frame around it), then make a window the size that you need for the arrows, then subtract that arrow window width from the available screen width and that is your left window width.

user_126907920
Related