Building Responsive Layouts in React Native with Restyle

Getting Started with React Native and Restyle

To follow along with this tutorial, you’ll need to have the following installed:

• React Native ≥ v0.63.0
• Expo ≥ v41
• TypeScript ≥ v4.1.0
• Node.js ≥ v16.13.1

Let’s start by installing the Expo CLI globally and creating a new React Native project called ResponsiveProject.

npm install -g expo-cli
expo init ResponsiveProject

What is Restyle?

Restyle is a library that provides a type-enforced system for building UI components in React Native with TypeScript. It offers theming capabilities, such as light and dark modes, and works seamlessly with React Native’s default styling. With Restyle, you can create UI libraries in React Native that are highly customizable and responsive.

Setting Up Restyle

Setting up Restyle is straightforward. First, install the library into your project, ResponsiveProject:

npm install restyle

Then, create an src folder in your root directory and add a components folder to hold your index.ts and Theme.ts files. In the Theme.ts file, define your custom theme, specifying set values for spacing, colors, and breakpoints.

// Theme.ts
import { createTheme } from 'estyle';

const theme = createTheme({
  spacing: {
    s: 8,
    m: 16,
    l: 24,
  },
  colors: {
    primary: '#333',
    secondary: '#666',
  },
  breakpoints: {
    phone: 360,
    tablet: 768,
  },
});

export default theme;

Defining Breakpoints for Responsive Components

Breakpoints are essential for building responsive components in React Native. They allow you to specify different styles for different screen sizes. To demonstrate this, let’s create an example card that maintains its styling on both widescreen devices and mobile screens.

// Card.tsx
import { View, Text } from 'eact-native';
import { useTheme } from './Theme';

const Card = () => {
  const theme = useTheme();

  return (
    
      Hello, World!
    
  );
};

export default Card;

Testing Responsiveness in Portrait and Landscape Modes

To test the responsiveness of your app in portrait and landscape modes, you’ll need to make some changes to your app.json file. Add a change to the orientation property to enable testing in both modes.

// app.json
{
  "expo": {
    "orientation": "portrait|landscape"
  }
}

Improving App Responsiveness

React Native provides several properties that enable you to improve the responsiveness of your application. The useWindowDimensions Hook automatically updates the width and height of components when the screen size changes.

// App.tsx
import { View, Text } from 'eact-native';
import { useWindowDimensions } from 'eact-native';

const App = () => {
  const { width, height } = useWindowDimensions();

  return (
    
      Responsive App!
    
  );
};

export default App;

Implementing Split Views

A split view is a crucial component of many mobile apps. It manages the presentation of hierarchical content at the top level of your application. Let’s implement a split view in our app.

First, create a navigation folder in your src folder and add three files: index.ts, sideNav.ts, and Navigator.ts.

// sideNav.ts
import { View, Text } from 'eact-native';

const SideNav = () => {
  return (
    
      Side Navigation
    
  );
};

export default SideNav;

// Navigator.ts
import { createStackNavigator } from '@react-navigation/stack';
import SideNav from './sideNav';
import MailScreen from '../Mail/MailScreen';

const Stack = createStackNavigator();

const Navigator = () => {
  return (
    
      
    
  );
};

export default Navigator;

Adding Mock Data for Display

The next step is to create your mail screens and add some mock data. You can use the Faker library and Lorem Ipsum Generator to generate mock data.

npm install faker @types/faker

// mailData.ts
import { faker } from '@faker-js/faker';

const mailData = Array(10).fill(0).map(() => ({
  id: faker.datatype.uuid(),
  subject: faker.lorem.sentence(),
  body: faker.lorem.paragraph(),
}));

export default mailData;

Creating the Mail Screen Component

Create a folder that contains your Mail components and a mock data file. Define your mail screen and add some mock data to it.

// MailScreen.tsx
import React from 'eact';
import { View, Text, FlatList } from 'eact-native';
import mailData from './mailData';

const MailScreen = () => {
  return (
    
       (
          
            {item.subject}
            {item.body}
          
        )}
      />
    
  );
};

export default MailScreen;

Creating the Side Column Interface

Create a SideStack.tsx file to complete your side-column interface.

// SideStack.tsx
import React from 'eact';
import { View, Text } from 'eact-native';

const SideStack = () => {
  return (
    
      Side Column Interface
    
  );
};

export default SideStack;

The Final Result

In this tutorial, we’ve implemented a simple component that adapts its content to any screen size, showed a technique for adjusting screen width and height using the useWindowsDimensions Hook, and created a simple split view application. With Restyle and React Native, you can build responsive and customizable UI components that enhance the user experience of your mobile app.