DEV Community

Aneeqa Khan
Aneeqa Khan

Posted on

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;
};
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

App images

Discussion (1)

Collapse
minhtc profile image
MrMeo

I think it's better to move the ratio out of function like this:

import { Dimensions } from "react-native";
const { width } = Dimensions.get("window");
const ratio = width / 768;

const Dimension = size => {
  return size * ratio;
};

So we don't need to re-calculate the ratio every time get Dimension size.