How to Add Material Design to React Native With Paper

[00:00 - 00:12] In this lesson, we are going to add the design system to our app. A design system is the single source of truth, which groups all the elements who need to design and develop our app by providing a set of components.

[00:13 - 00:24] 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.

[00:25 - 00:36] It is based on material design, which provides us with easy to use and well- designed components, like buttons and text inputs. You might ask if implementing a design system is essential.

[00:37 - 00:47] 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 the implementation.

[00:48 - 00:54] Installation is very simple. We use the following command to add React Native Paper to our app.

[00:55 - 01:03] After installation is done, we can start the implementation. First, we need to wrap our app with the provider component from React Native Paper.

[01:04 - 01:15] Provider has led him 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 models.

[01:16 - 01:24] By team, we mean all the colors and fonts that our components will use. I created that heme.js file to modify default colors and add some new ones.

[01:25 - 01:36] To use our team, 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 team for future use.

[01:37 - 01:42] Let's actually test some components and see how they look. We will start with the button component.

[01:43 - 01:50] We export button from React Native Paper and place it in our app. As we can see, it is nothing special just yet.

[01:51 - 02:04] We add prop mode contained to make our button stand out in the user interface. For the purpose of this course, I created a little abstraction over the button component to add some extra styles to it.

[02:05 - 02:13] It will make our button bigger and make it fit to our screen more. We can replace the current button with our own implementation.

[02:14 - 02:26] One thing worth noticing is that the color of our button is actually taken from that heme that we provide. For example, if you change primary color to red, all buttons in the application will turn red.

[02:27 - 02:33] The same goes for text and background colors. The second most important components in our app are text inputs.

[02:34 - 02:49] React Native Paper provides the component text input 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 text input that adds some extra styles to it.

[02:50 - 03:03] I implemented additional props, description and error text 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.

[03:04 - 03:11] In our case, we are going to add header and paragraph components. They will be used to display important information on the screen.

[03:12 - 03:41] 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 heme.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.

[03:42 - 03:43] Thank you and see you in the next lesson.