R eact Native makes it easy to write code once and run your apps on both Android and iOS at the same time. But a problem arises when trying to make the app responsive. Unlike CSS, there is no such thing as media queries in React Native. To make the app look good on phone, tablets, and a variety of other devices, we need to scale all of our styles.

Prerequisites

For this tutorial, you need a basic knowledge of React Native and some familiarity with Expo. You’ll also need the Expo client installed on your mobile device or a compatible simulator installed on your computer Instructions on how to do this can be found here.

Throughout this tutorial, we’ll be using yarn . If you don't have yarn already installed, then install it here.

Also, make sure you’ve already installed expo-cli .

If it’s not installed already, then go ahead and install it:

$ yarn global add expo-cli

To make sure we’re on the same page, the following are the versions used in this tutorial -

Node v12.6.0

yarn 1.17.3

expo 3.0.9

Make sure to update expo-cli if you haven't updated it in a while, since expo releases are quickly out of date.

To create a new project using expo-cli , type the following in the terminal:

$ expo init responsive-react-native-layout

It will then prompt you to choose a template. You should choose blank and hit Enter .

1. Expo Init — Choose A Template

Then it will ask you to name the project—type responsive-react-native-layout and hit Enter again.

2. Expo Init — Name the Project

Lastly, it will ask you to press Y to install dependencies with yarn or n to install dependencies with npm . Press y .

3. Expo Init — Install the dependencies

This will create a folder called responsive-react-native-layout , which will bootstrap a new Expo project.

Now go ahead and change the directory to responsive-react-native-layout using the following command:

$ cd responsive-react-native-layout

Type the following to start running the app:

$ yarn start

Press i to run the iOS Simulator. This will automatically run the iOS Simulator even if it's not opened.