title: React Native Responsive Screen
body: <p>I have a question about screen design in React Native.</p>
  <p>I am building an App with Expo. It runs on my AS Emulator - Nexus 5x. When I take my real device - Samsung S9 the pages look different for example text on the left and right is cut away because the screen seems to be to small. However both devices have the same width kind of 72mm and 69mm but S9 is curved. How do you guys keep your apps responsive?</p>
  <p>I already did some componentWillMount checks where I make the fields height larger if the screen is to high. Should I do the same for the width? Or should I maybe use react-native-responsive-screen package for example? If there are some more experienced RN-Devs please give me a quick tip on how you actually manage this.</p>
  <p>Edit :: Is this code below actually a good practice? Its my StyleSheet and I tried to work with absolute position - which looks nice on the Emulator but I guess it's not good practice.. Should I rewrite the styles?</p>
  <pre><code>const styles = StyleSheet.create({
    container: {
      justifyContent: &quot;center&quot;,
      alignItems: &quot;center&quot;
    },
  
    headerText: {
      fontSize: 30,
      color: &quot;black&quot;
    },
    DateContainer: {
      marginTop: 10,
      marginBottom: 10
    },
    DateText: {
      position: &quot;absolute&quot;,
      fontSize: 16,
      color: &quot;black&quot;,
      top: 14,
      left: -100
    },
    phaseButton: {
      position: &quot;absolute&quot;,
      top: -42,
      right: -95,
      height: 30,
      backgroundColor: &quot;#a51717&quot;,
      borderRadius: 45
    },
    checkbox: {
      position: &quot;absolute&quot;,
      top: -5,
      right: -180,
      height: 30
    },
    ZeitText: {
      position: &quot;absolute&quot;,
      fontSize: 16,
      color: &quot;black&quot;,
      top: 12,
      left: -199.5
    },
    ZeitInput: {
      position: &quot;absolute&quot;,
      left: -150,
      top: 8,
      width: 100,
      height: 35,
      borderWidth: 1,
      textAlign: &quot;center&quot;
    },
    checkText: {
      position: &quot;absolute&quot;,
      top: 12,
      right: -115,
      height: 30,
      color: &quot;black&quot;
    },
    button1: {
      position: &quot;absolute&quot;,
      left: -120,
      top: 8,
      height: 30,
      marginHorizontal: 20,
      backgroundColor: &quot;#a51717&quot;
    },
    button2: {
      position: &quot;absolute&quot;,
      left: -60,
      top: 8,
      height: 30,
      backgroundColor: &quot;#a51717&quot;
    }
  });
  </code></pre>
  <p>Edit2.0: I changed my absolute positions to flexDirection: row and the width to percent. Is a Button that takes width: &quot;30%&quot; responsive? so does it always take 30% of the space there is?</p>