How to Extend React Native Paper Component for Developing Responsive UX

How to Extend React Native Paper Component for Developing Responsive UX

Here I will go you through steps that enhance your experience in terms of developing a Universal Application based on React Native and using such design libraries as React Native Paper

Photo by charlesdeluvio on Unsplash

Prerequisites

Our team recently developed a web version for MVC of one project based on NextJS. We used Material UI (v5) as a design system. As soon as this project confirmed its right to life, the customer would like us to develop a mobile application. They’ve decided to move on with the Universal Application approach for iOS, Android, and Web platforms based on Expo as a layer on top of React Native.

The first challenge is which library should be used instead of Material UI. And there were two options: Native Base or React Native Paper. We’ve picked up React Native Paper. But since we’re developing a cross-platform system with responsive design, React Native Paper is the lack of tools to implement this smoothly. On the other hand, we have gotten used to the Material UI experience and we would like to minimize efforts to migrate our web application developed previously into a Universal Application.

Here I will go you along with some simple utilities which extend React Native Paper components which would have the functionality to close to Material UI in terms of flexibility and define styles dependently on the breakpoint. This approach may be applicable to other libraries, probably with modifications.

Problem Statment

Let’s assume that we would like to have a title with a font size that is changing depending on the current breakpoint. Well, I would be satisfied with the following API:

<Text sx={{
xs: {fontSize: 14},
sm: {fontSize: 16},
md: {fontSize: 20},
lg: {fontSize: 26},
xl: {fontSize: 32}
}}>
Title
</Text>

I assume that this API is self-explanatory.

Extending library

1.1 Extending Theme object of React Native Paper

By default, the React Native Paper theme does not have any information about breakpoints, but it’s not an issue to add. Since we initiated a project with Typescript, at first we need to override Theme type via global augmentations and introduce the new field:

Here we introduced two new types Breakpoints , ThemeBreakpoints and added new properties in already existing type Themein React Native Paper which is available via global namespace. Cool, it’s time to set the specific values for our extended theme and describe each breakpoint:

Right now, the breakpoints are available, when we use useTheme hook from React Native Paper:

1.2 Developing hook for breakpoint

Let’s develop a hook that defines the breakpoint that fits the current screen width. For example, if width=500 — 0(xs) < 500 < 600(sm) , therefore it’s xs breakpoint, meanwhile when width=700 , it’s sm breakpoint 600(sm)< 700 < 900(md) :

Here we used build-in useWindowDimension hook from react-native , which automatically updates width and height values when screen size changes. Based on a new width we find the target breakpoint. Let’s test it:

I’ve tested it on the web, but it works on iOS and Android as well:


How to Extend React Native Paper Component for Developing Responsive UX was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.

0
(Visited 1 times, 1 visits today)