How to Extend React Native Paper Component for Developing Responsive UX | by Vladimir Topolev | May, 2022

Right here I’ll go you thru steps that improve your expertise when it comes to creating a Common Utility primarily based on React Native and utilizing such design libraries as React Native Paper

Picture by charlesdeluvio on Unsplash

Our workforce lately developed an internet model for MVC of 1 undertaking primarily based on NextJS. We used Materials UI (v5) as a design system. As quickly as this undertaking confirmed its proper to life, the client would love us to develop a cellular utility. They’ve determined to maneuver on with the Common Utility strategy for iOS, Android, and Net platforms primarily based on Expo as a layer on high of React Native.

The primary problem is which library needs to be used as an alternative of Materials UI. And there have been two choices: Native Base or React Native Paper. We’ve picked up React Native Paper. However since we’re creating a cross-platform system with responsive design, React Native Paper is the dearth of instruments to implement this easily. Then again, we now have gotten used to the Materials UI expertise and we wish to decrease efforts emigrate our net utility developed beforehand right into a Common Utility.

Right here I’ll go you together with some easy utilities which lengthen React Native Paper parts which might have the performance to shut to Materials UI when it comes to flexibility and outline types dependently on the breakpoint. This strategy could also be relevant to different libraries, in all probability with modifications.

Let’s assume that we wish to have a title with a font measurement that’s altering relying on the present breakpoint. Properly, I’d be happy with the next API:

<Textual content sx=
xs: fontSize: 14,
sm: fontSize: 16,
md: fontSize: 20,
lg: fontSize: 26,
xl: fontSize: 32
>
Title
</Textual content>

I assume that this API is self-explanatory.

1.1 Extending Theme object of React Native Paper

By default, the React Native Paper theme doesn’t have any details about breakpoints, nevertheless it’s not a problem so as to add. Since we initiated a undertaking with Typescript, at first we have to override Theme sort through international augmentations and introduce the brand new discipline:

Right here we launched two new varieties Breakpoints , ThemeBreakpoints and added new properties in already present sort Themein React Native Paper which is offered through international namespace. Cool, it’s time to set the precise values for our prolonged theme and describe every breakpoint:

Proper now, the breakpoints can be found, after we use useTheme hook from React Native Paper:

1.2 Growing hook for breakpoint

Let’s develop a hook that defines the breakpoint that matches the present display width. For instance, if width=5000(xs) < 500 < 600(sm) , due to this fact it’s xs breakpoint, in the meantime when width=700 , it’s sm breakpoint 600(sm)< 700 < 900(md) :

Right here we used build-in useWindowDimension hook from react-native , which mechanically updates width and peak values when display measurement adjustments. Based mostly on a brand new width we discover the goal breakpoint. Let’s take a look at it:

I’ve examined it on the internet, nevertheless it works on iOS and Android as effectively:

1.3 Growing Element which extends a styling chance

The principle half can be defined right here. The objective is to use the actual fashion relying on the present breakpoint of the display. It is smart just for React parts which have fashion property. We need to introduce a brand new property for them — sx the place we might outline a listing of types for some breakpoints if it’s wanted. Evidently we might apply right here one of many widespread React patterns — Excessive Order Element, which brings to our goal part a brand new property and lengthen habits.

For those who don’t know what Excessive Order Element is, I’ve written one article devoted this matter, I hope it is going to be useful for you — hyperlink here.

At first, let’s create a shell for the longer term HOC:

Thus far it’s ineffective HOC, however we have to take a breath and give attention to varieties. As I’ve already stated earlier than, we’re aimed to increase solely parts which have fashion property, due to this fact we have to put restrictions on React part props and we did it with the next Props xtend fashion?: StyleProp , it implies that part props should comprise fashion property. For those who attempt to use this HOC towards a part with out fashion property, TS will elevate a problem:

Let’s add the implementation for our HOC:

Nothing particular right here, we use a beforehand developed useBreakpoint hook to outline the present breakpoint and merge types related to a breakpoint with types handed in fashion property.

1.4 Tips on how to lengthen React Native Paper part with developed HOC

It is alleged to be the very last thing which we have to do. Let’s take Textual content parts from React Native Paper library and lengthen its habits with developed HOC. It’s so easy:

And right here is how we might use this part:

I’ve examined it on the internet, nevertheless it works on iOS and Android as effectively:

We’ve virtually finished, however we might improve the TypeScript expertise. TypeScript might infer a kind from handed arguments generally, however let’s take a look at how TS did it for sx property:

It’s unknown property, and it implies that we might put any fashion property even it doesn’t exist for authentic Textual content part delivered from react-native-paper library, like this:

Properly, we might simply repair it. Let’s outline varieties for generics Model and Props explicitly:

Typescript instantly raises the difficulty:

All code could also be discovered right here: https://github.com/vladimirtopolev/react-native-paper-extended

Growing a Common Utility considerably reduces the price of growth, however React Native nonetheless doesn’t have a design library that might easily migrate your expertise from the library like Materials UI to a library that’s appropriate with React Native. Then again, it’s not troublesome to implement a bunch of HOCs, and hooks that might lengthen it and make your API near Materials UI.

Regardless of that on this article we’ll lengthen react-native-paper part, however it might be effectively accomplished for build-in in React Native parts as effectively. The principle right here is an strategy.

More Posts