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:
xs: fontSize: 14,
sm: fontSize: 16,
md: fontSize: 20,
lg: fontSize: 26,
xl: fontSize: 32
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: