javascripthtmlcssreact-native

React Native react-native-responsive-screen package not working on some devices

I am currently using:

react-native-responsive-screen package: "^1.4.2",

"react-native": "^0.64.0",

and I have the following problem:

One user claims that the UI layout does not fit the screen. He sent me the screenshot. (Attached)

UI layout wrong

size: 1080x2009

dpi: 420

I am using the package: react-native-responsive-screen in order to make the layout responsive.

It seems to work everywhere including an android emulator with the same screen characteristics like the device from the user. Same dpi, width & height.

Screen Android Emulator same characteristics in device

Here is the code from my stylesheet Account.js:

import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';

    container: {
        flexDirection: "row",
        flex: 1,
        flexWrap: 'wrap',
        alignItems: "center",
        backgroundColor: "black"
    },
        menuContainer: {
        flex: 1
    },
    onboardingWhole: {
        justifyContent: 'center',
        alignSelf: 'center',
        marginTop: hp('20%'),
        flex: 1,
        alignItems: 'center',
        padding: 10,
        borderRadius: 5,
        zIndex: 3,
        elevation: 3,
        position: 'absolute'
    },
    onboardingText: {
        fontSize: hp('2%'),
        marginTop: hp('1.5%'),
        marginLeft: wp('5%'),
        marginBottom: hp('1.5%'),
        marginRight: wp('5%'),
        color: "white",
        textAlign: 'center',
        fontFamily: "Anton-Regular"
    },
    onboardingTextHeadline: {
        fontSize: hp('3%'),
        marginTop: hp('1.5%'),
        marginLeft: wp('5%'),
        marginBottom: hp('1.5%'),
        marginRight: wp('5%'),
        color: orangeStyle,
        textAlign: 'center',
        fontFamily: "Anton-Regular"
     },
        cancelButtonOnboarding: {
        justifyContent: 'center',
        padding: 6,
        width: wp('45%'),
        margin: 5,
        borderRadius: 5,
        borderColor: redStyle,
        borderWidth: 2,
        height: hp('8%') 
    }

And my HTML:

<View style={styles.menu}>
 <View style={styles.menuContainer}>
  <View style={styles.onboardingWhole}><Text style={styles.onboardingTextHeadline}>WELCOME TO SAGLY! LETS IMPROVE YOUR SUSPENSION SETUP OF YOUR MTB. </Text><Text style={styles.onboardingText}>We would recommend to follow the following steps: </Text><Text style={styles.onboardingText}>1) Set up your profile so that SAGLY can make SMART SUGGESTIONS.</Text><Text style={styles.onboardingText}>2) Create a new setup. Optionally with the EASY SETUP GUIDE.</Text><Text style={styles.onboardingText}> 3) Inspect setups with MANAGE SETUPS and tune them with the WHAT SHOULD I DO WHEN ... guide.</Text><TouchableOpacity style={styles.submitButtonOnboarding} onPress={this.nextOnboardingView.bind(this)} title="next"><Text style={styles.buttonTextNext}>GOT IT!</Text></TouchableOpacity></View>
 </View>
</View>

Is it bad practice what I doing here? Should I not use this package? Or am I doing smt wrong?

Solution

  • To me this looks like the user has increased their OS font-size in the accessibility features. And since you are using relative font sizes (which is great, exactly for that reason) you might just want to wrap this screen inside a scroll view.