What Is React Native Paper & How to Use It?
June 11 , 2020 Posted by Creatix9
React Native Paper is a component library for User Interface that implements MD guidelines. It allows app designers to build beautiful interfaces for high-quality cross-platform apps. It supports both mobile and web application development and has become an important UI library. With the adoption of React Native development, powerful libraries were needed to create amazing user-interfaces. Introduction of React Native Paper, designers were attracted towards these libraries due to the benefits it provided, making the designing process easier and faster. It provides you with full theming support so you can add themes with the option of customization according to your needs.
High accessibility, RTL and platform adaption is offered by this popular UI library. You can just start creating your React Native app with ready to use components. In this article, you will learn everything related to React Native Paper and a guide on its usage.
Begin with Native Paper installation by opening a terminal on the folder of your project. Run the terminal and add ‘yard add react-native-paper’ or ‘react-native-paper npm’ statement. If you are using vanilla React Native project, then react-native-vector-icons installation and link are required. But if the version of your React Native is 0.60 or above then you don’t need to link it. You can also skip the installation of vector icons by using babel-plugin-optional-require to opt-out. On the other hand, if you are building the project with Expo then don’t install a vector icon. For babeljs, ensure that it included babel-present-expo. To exclude modules, you’ll not use, get smaller bundle size by using optional babel plugin. This plugin has the functionality of rewriting the import statements automatically. Instead of importing the entire library, it just imports modules you use.
Place the root component in Provider from the react-native-paper. You can add the vanilla React Native project in the component that you passed to AppTregistry.registerComponent, that is in the index.js.file. In case you are working with the Expo project, do it within the exported component placed in App.js.file. The PaperProvider component is used to provide components of the theme within the framework. Components that need to be rendered, this work as the portal at the top level. If you have a provider like Redux, in order to make context available to components, place it outside PaperProvider. It is used for the components that are rendered from the library inside a Modal. You can customize the fonts, colors etc using Reactive Native Paper. Check multiple default themes available for customization options and even look at React Native-Paper Github to go through several projects.
Applying A Theme
You can apply the theme to create React Native app as paper supports custom themes. It also exports a provider component, just place your root component with the provider so that it starts supporting themes. If you don’t specify a prop, then default themes will be applied to the components. You have the option to provide a theme object with a theme prop having the same properties like the default one. In order to update the components automatically to support a new theme, change the theme prop dynamically. A React Native-Paper theme contains properties like dark (Boolean) that gives either lighter or dark themes and color mode for dark theme ‘mode(/adaptive’ | ‘exact’). It also contains roundness (number) that gives roundness of elements like React-Native-Paper button, colors (object) giving various colors options for different elements and many others
Icons & Fonts
Many of the components need the react native-paper icons to render properly. If you have Expo then it eliminates the need for adding anything extra to the project. But if you are using vanilla React Native project then a link to the library will be required. For icon prop, you will not be able to use icon names if you opt-out vector icons support with babel-plugin-optional-require. Components may need extra configuration if they don’t look correct with the vector icons. To display an icon, many components accept the icon prop like button. An icon properly supports values like icon name that is used to display the icon, an image source to use an icon and a render function that receives properties like object size and color. You have the option to use other icons, for this you need to import the icons and within PaperProvider pass the icons to settings prop.
React Native paper is a popular UI library that is used to create cross-platform mobile and web apps. Mobile app development companies eliminate the need for the reimplementation of the same elements by giving ready to use elements. This library is being used largely by most of the React Native developers due to its amazing features and easy-to-use components. Its elements include react-native-paper card, react-native dialogue and a react-native-paper snack bar that helps in creating outstanding interfaces. When it comes to reacting native paper vs native base, this library surely wins the race.