CODEWITHSUNDEEP
javascriptandroidreact-native
yesIamFaded
yesIamFaded

Reputation: 2068

React Native Responsive Screen

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 too small. However, both devices have the same width kind of 72mm and 69mm but the S9 is curved. How do you guys keep your apps responsive?

I already did some componentWillMount checks where I make the field height larger if the screen is too high. Should I do the same for the width? Or should I maybe use the 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? It's 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?

Upvotes: 5

Views: 4523

Answers (2)

SyafiqNazim
SyafiqNazim

Reputation: 36

I always set a flex to the screen first. And style it accordingly.

<View style={{flex: 1}}>
  <View>
    "Any styling here"
  </View>
</View>

This will give me a full screen flex at first. And this will adjust accordingly to the device's screen.

Upvotes: 1

Amir Doreh
Amir Doreh

Reputation: 1429

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

Upvotes: 3

Related Questions