Table of Contents
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
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.
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.
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:
1.3 Developing Component which extends a styling possibility
The main part will be explained here. The goal is to apply the particular style depending on the current breakpoint of the screen. It makes sense only for React components that have style property. We want to introduce a new property for them — sx where we may define a list of styles for some breakpoints if it’s needed. It seems that we may apply here one of the popular React patterns — High Order Componentwhich brings to our target component a new property and extend behavior.
If you don’t know what High Order Component is, I’ve written one article devoted this topic, I hope it will be helpful for you — link here.
At first, let’s create a shell for the future HOC:
So far it’s useless HOC, but we need to take a breath and focus on types. As I’ve already said before, we’re aimed to extend only components which have style property, therefore we need to put restrictions on React component props and we did it with the following Props xtend style?: StyleProp it means that component props must contain style property. If you try to use this HOC against a component without style property, TS will raise an issue:
Let’s add the implementation for our HOC:
Nothing special here, we use a previously developed useBreakpoint hook to define the current breakpoint and merge styles associated with a breakpoint with styles passed in style property.
1.4 How to extend React Native Paper component with developed HOC
It’s supposed to be the last thing which we need to do. Let’s take Text components from React Native Paper library and extend its behavior with developed HOC. It’s so simple:
And here is how we may use this component:
I’ve tested it on the web, but it works on iOS and Android as well:
We’ve almost done, but we may enhance the TypeScript experience. TypeScript may infer a type from passed arguments in most cases, but let’s have a look at how TS did it for sx property:
It’s unknown property, and it means that we may put any style property even it doesn’t exist for original Text component delivered from react-native-paper library, like this:
Well, we may easily fix it. Let’s define types for generics Style and Props explicitly:
Typescript immediately raises the issue:
All code may be found here: https://github.com/vladimirtopolev/react-native-paper-extended
Developing a Universal Application significantly reduces the cost of development, but React Native still does not have a design library that would smoothly migrate your experience from the library like Material UI to a library that is compatible with React Native. On the other hand, it’s not difficult to implement a bunch of HOCs, and hooks that would extend it and make your API close to Material UI.
Despite that in this article we will extend react-native-paper component, but it may be efficiently completed for build-in in React Native components as well. The main here is an approach.
