Responsive Design

We are working on the react native app which needs to be display on different devices like IPads or IPhones and different devices have different screen sizes. So this is the solution we used in our project to make our App responsive on different screens.

Implementation

Initially app designs were created for IPad screen of width "768". So we wrote a simple function named "Dimension" which accepts size and divide it to the default width and then multiply it to the current screen's width.

import { Dimensions } from "react-native";

const Dimension = size => {
  const { width } = Dimensions.get("window");
  const designBenchmark = 768;
  return (size / designBenchmark) * width;
};

Here designBenchmark is describing the width of the designs given, you can always change it with your given designs width and Dimensions class is being imported from "react-native"

Usage

And then export this function to access it from any other component. You can use it like this.

marginBottom: Dimension(20);

It magically worked for us and designs are quite responsive on different devices. You can check the below images of app screenshots on IPad and IPhone respectively.