title: React Native react-native-responsive-screen package not working on some devices
body: <p>I am currently using:</p>
  <p>react-native-responsive-screen package: &quot;^1.4.2&quot;,</p>
  <p>&quot;react-native&quot;: &quot;^0.64.0&quot;,</p>
  <p>and I have the following problem:</p>
  <p>One user claims that the UI layout does not fit the screen. He sent me the screenshot. (Attached)</p>
  <p><a href="https://i.stack.imgur.com/7ykyN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7ykyN.jpg" alt="UI layout wrong" /></a></p>
  <p>size: 1080x2009</p>
  <p>dpi: 420</p>
  <p>I am using the package: react-native-responsive-screen in order to make the layout responsive.</p>
  <p>It seems to work everywhere including an android emulator with the same screen characteristics like the device from the user. Same dpi, width &amp; height.</p>
  <p><a href="https://i.stack.imgur.com/wztkp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wztkp.png" alt="Screen Android Emulator same characteristics in device" /></a></p>
  <p>Here is the code from my stylesheet Account.js:</p>
  <p><code>import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    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%') 
      }</code></pre>
  </div>
  </div>
  </p>
  <p>And my HTML:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;View style={styles.menu}&gt;
   &lt;View style={styles.menuContainer}&gt;
    &lt;View style={styles.onboardingWhole}&gt;&lt;Text style={styles.onboardingTextHeadline}&gt;WELCOME TO SAGLY! LETS IMPROVE YOUR SUSPENSION SETUP OF YOUR MTB. &lt;/Text&gt;&lt;Text style={styles.onboardingText}&gt;We would recommend to follow the following steps: &lt;/Text&gt;&lt;Text style={styles.onboardingText}&gt;1) Set up your profile so that SAGLY can make SMART SUGGESTIONS.&lt;/Text&gt;&lt;Text style={styles.onboardingText}&gt;2) Create a new setup. Optionally with the EASY SETUP GUIDE.&lt;/Text&gt;&lt;Text style={styles.onboardingText}&gt; 3) Inspect setups with MANAGE SETUPS and tune them with the WHAT SHOULD I DO WHEN ... guide.&lt;/Text&gt;&lt;TouchableOpacity style={styles.submitButtonOnboarding} onPress={this.nextOnboardingView.bind(this)} title="next"&gt;&lt;Text style={styles.buttonTextNext}&gt;GOT IT!&lt;/Text&gt;&lt;/TouchableOpacity&gt;&lt;/View&gt;
   &lt;/View&gt;
  &lt;/View&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is it bad practice what I doing here? Should I not use this package? Or am I doing smt wrong?</p>
  <p>Thanks for your help!</p>