React Native Paper

React Native Paper

In this lesson we are going to add a design system to our app. A design system is the single source of truth which groups all the elements we need to design and develop in our app by providing a set of components. It also saves us a lot of time by solving all the major use cases, like creating layouts in our application.

My absolute favorite when it comes to React Native is react-native-paper. It is based on Material Design which provides us with easy-to-use and well designed components like <Buttons/> and <TextInputs/>.

You might ask if implementing a design system is essential? The answer is no, but it really speeds up the development process. All components are well tested and used by thousands of developers, so we don't have to worry about their implementation.

Installation is very simple. We use the following command to add react-native-paper to our app.

After installation is done we can start the implementation.

First we need to wrap our app with the <Provider/> component from react-native-paper. <Provider/> adds the theme to all the components in our application. It also acts as a portal to components which need to be rendered at the top level (for example modals).

By "theme" we mean all the colors and fonts that our components will use. I created the theme.js file to modify default colors and add some new ones. To use our theme we must pass it to the <Provider/> component as a prop.

You won't see any changes in the app yet, because we only set up the theme for future use.

Let's actually test some components and see how they look.

We'll start with the <Button/> component. We export <Button/> from react-native-paper and place it in our app. As we can see it is nothing special, just yet. We can add prop mode="contained" to make our button stand out in the UI.

For the purpose of this course I created a little abstraction over the <Button/> component to add some extra styles to it. It will make our button bigger and make it fit to our screen more.

We can replace the current button with our own implementation.

One thing worth noticing is that the color of our button is actually taken from the theme that we provide. For example if we change primary color to red, all buttons in the application will turn red. The same goes for text and background colors.

The second most important components in our app are <TextInputs/>. react-native-paper provides the component <TextInput/> that looks amazing and takes care of all the animations. We are going to use it a lot in our application.

I also created a little abstraction over the <TextInput/> that adds some extra styles to it. I implemented additional props description and errorText so we can control what is displayed below the input. This will be very useful later on.

It is always a good idea to add some basic typography to our project. In our case we are going to add <Header/> and <Paragraph/> components. They will be used to display important information on the screen.

As you can see we are using the <Text/> component exported from react-native-paper instead of the <Text/> component from react-native. This is because we want to ensure that our text will use the colors provided in our theme.js file.

To sum up, we have added a design system to our app with react-native-paper. Now we have more components to build our application with.

In the next lesson we are going to add another great library to help us with screen navigation.

Thank you and see you in the next lesson!

Start a new discussion. All notification go to the author.