React native responsiveness issue

Question

I am using flex, EStyleSheet and $rem. I am avoiding absolute values of height, width, margin and using % everywhere for my components. However, on different screen resolutions, the position of my components looks different.

E.g My company logo is lower on a smaller (or because of Android/iOS) screen and also there is much less space left at the bottom of the page (2nd Image).

Could you please explain why this is happening and how to fix it?

import React from 'react';
import {View, StyleSheet, Text, ImageBackground, TouchableHighlight, Image, Dimensions} from "react-native";
import {connect} from 'react-redux';
import EStyleSheet from 'react-native-extended-stylesheet';


class SignInUpGender extends React.Component{
    render() {
        return (
            <ImageBackground style={styles.Image} source={require('../../assets/images/background_loading.png')}>
                <View style={styles.LogoView}>
                    <Text style={styles.Logo}>My company</Text>
                </View>

                <View style={styles.RegistrationView}>

                    <View style={styles.GreetingsView}>
                        <Text style={styles.GreetingsText}>
                            Hey, you are ...
                        </Text>
                    </View>

                    <View style={styles.GenderView}>
                        <TouchableHighlight style={styles.GenderButton}
                            onPress={() => this.props.handleNext('MALE')}>
                            <View style={styles.GenderAndIconView}>
                                <Image style={styles.GenderImg} source={require('../../assets/images/gender_male.png')} />
                                <Text style={styles.GenderText}>MALE</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight style={styles.GenderButton}
                            onPress={() => this.props.handleNext('FEMALE')}>
                            <View style={styles.GenderAndIconView}>
                                <Image style={styles.GenderImg} source={require('../../assets/images/gender_female.png')} />
                                <Text style={styles.GenderText}>FEMALE</Text>
                            </View>
                        </TouchableHighlight>
                    </View>

                    <View style={styles.OrBorderView}>
                        <View style={styles.Border}/>
                        <Text style={styles.OrText}>or</Text>
                        <View style={styles.Border}/>
                    </View>

                    <View style={styles.AlreadyRegisteredView}>
                        <Text style={styles.AlreadyRegisteredText}>Already registered?</Text>
                        <Text style={styles.SignInText}>Login</Text>
                    </View>

                </View>
            </ImageBackground>
        )
    }
}
export default connect(mapStateToProps, mapDispatchToPros)(SignInUpGender);


const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});

const styles = EStyleSheet.create({

    Image: {
        flex : 1,
    },
    LogoView: {
        flex: 2,
        justifyContent: 'center',
        flexDirection: 'row',
    },
    RegistrationView: {
        flex: 1,
    },
    GreetingsView: {
        alignItems: 'center'
    },
    GenderView: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    Logo: {
        marginTop: '16%',
        fontSize: '36rem',
        fontWeight: 'bold',
        color: '#FFFFFF',
        opacity: 0.7,
        letterSpacing: '12rem',
    },
    GenderButton: {
        flex: 1,
        borderRadius:10,
        borderWidth: 1.5,
        borderColor:'#FFFFFF',
        padding: '8rem',
        margin: '2%'
    },
    GenderAndIconView: {
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    GenderText: {
        color: '#FFFFFF',
        fontSize: '16rem',
        alignSelf: 'center'
    },
    GenderImg: {
        width: '26rem',
        height: '26rem',
    },
    GreetingsText: {
        color: '#FFFFFF',
        fontSize: '22rem',
        fontWeight: 'bold',
        marginBottom: '5rem'
    },
    OrBorderView: {
        margin: '10rem',
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
    Border: {
        flex: 1,
        backgroundColor: '#E8E8E8',
        height: 1,
        borderRadius:1,
        alignSelf: 'center'
    },
    OrText: {
        alignSelf:'center',
        paddingHorizontal:'5rem',
        fontSize: '14rem',
        fontWeight: '500',
        color: '#E8E8E8'
    },
    AlreadyRegisteredView: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
    AlreadyRegisteredText: {
        color: '#E8E8E8',
        fontSize: '14rem',
    },
    SignInText:{
        fontSize: '14rem',
        fontWeight: '600',
        textDecorationLine: 'underline',
        color: '#FFFFFF',
        marginLeft: '5rem'
    }
});

@MCMatan, When I am running on iphone5s there is still less space at the bottom of the page, however, My company logo looks better. — Wild Goat, Feb 12 '19 at 22:55

Soleil · Answer 1 · 2019-02-14T16:18:22.727

1

You need has multiples images with aspect ratio from screens, because there has many, here a list, because when you resize(proportional) image with diferent aspetc this cause distorsion image, or you need center o position image, when you use same aspect ratio you only need resize

So you example is like to next sample image, because aspect ratio is diferent

in html you can like to :

 <picture>
      <source srcset="extralarge.jpg" media="(min-height: 1000px)">
      <source srcset="large.jpg" media="(min-height: 500px)">
      <img srcset="medium.jpg" alt="">
    </picture>

css like to:

   .img {
  background-image: url(medium.jpg);
}
@media (min-height: 500px) {
  .img {
    background-image: url(large.jpg);
  }
}
@media (min-height: 1000px) {
  .img {
    background-image: url(extralarge.jpg);
  }
}

edited Feb 14 '19 at 16:18

answered Feb 12 '19 at 23:27

Soleil

381
4
9

But if you look at the images why my bottom buttons in android is lower than on Iphone X? This should be nothing to do with image itself. – Wild Goat Feb 13 '19 at 16:26
becasue width is same , but height not – Soleil Feb 13 '19 at 16:58
but with flex it should be proportionally distributed. – Wild Goat Feb 13 '19 at 21:56
but if screen has same aspect ratio like to 5:3 – Soleil Feb 13 '19 at 22:33
would you mind to update your answer to explain it with more details? I am still not getting it. – Wild Goat Feb 14 '19 at 09:34

React native responsiveness issue

1 Answers1