React Native Responsive Screen

Question

I have a question about screen design in React Native.

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?

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.

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?

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center"
  },

  headerText: {
    fontSize: 30,
    color: "black"
  },
  DateContainer: {
    marginTop: 10,
    marginBottom: 10
  },
  DateText: {
    position: "absolute",
    fontSize: 16,
    color: "black",
    top: 14,
    left: -100
  },
  phaseButton: {
    position: "absolute",
    top: -42,
    right: -95,
    height: 30,
    backgroundColor: "#a51717",
    borderRadius: 45
  },
  checkbox: {
    position: "absolute",
    top: -5,
    right: -180,
    height: 30
  },
  ZeitText: {
    position: "absolute",
    fontSize: 16,
    color: "black",
    top: 12,
    left: -199.5
  },
  ZeitInput: {
    position: "absolute",
    left: -150,
    top: 8,
    width: 100,
    height: 35,
    borderWidth: 1,
    textAlign: "center"
  },
  checkText: {
    position: "absolute",
    top: 12,
    right: -115,
    height: 30,
    color: "black"
  },
  button1: {
    position: "absolute",
    left: -120,
    top: 8,
    height: 30,
    marginHorizontal: 20,
    backgroundColor: "#a51717"
  },
  button2: {
    position: "absolute",
    left: -60,
    top: 8,
    height: 30,
    backgroundColor: "#a51717"
  }
});

Edit2.0: I changed my absolute positions to flexDirection: row and the width to percent. Is a Button that takes width: "30%" responsive? so does it always take 30% of the space there is?

Amir Doreh Amir Doreh · Accepted Answer · 2020-06-04T07:12:37

you can use so many approaches for having a responsive application , one of the most common and i think the best one , is giving the style values according to the width and height of the devices. you can easily import Dimensions from react-native and do your styling according to width and height property of the device running the app! e.g.

import { Dimensions } from 'react-native';
const {width,height} = Dimensions.get('window')

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    marginLeft:width*.01
  },})

and so on, For more informations i recommend you to read https://reactnative.dev/docs/dimensions

i hope it helps

React Native Responsive Screen

2 Answers