How to build Responsive React Native Components using Restyle

In this blog I will show you how to build a responsive react native components using Restyle.

The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It’s a library for building UI libraries, with themability as the core focus.

Installation

Yarn

$ yarn add @shopify/restyle

NPM

$ npm install @shopify/restyle

Define Theme

Let’s create a global theme object. It should contain values for spacing, colors, breakpoints and more.

Below is an example of how a basic theme could look.

Access theme

This theme should be passed to a ThemeProvider at the top of your React component tree:

Here Box and Text are predefined components from restyle

Creating responsive components

Using breakpoints we can specify different styles for different screen sizes.

Let’s create a card example with acts as list on wide screen devices.

Define the different values of flex direction for different screen sizes.

flexDirection={{ phone: ‘column’, tablet: ‘row’ }}

For more details visit restyle documentation

Reference:

ReStyle - Snack

https://github.com/Shopify/restyle