Find out how React Native Paper can help you create great-looking, fully accessible and inclusive apps (and prototypes) perfectly tailored to your needs.
We talk a lot about the benefits and advantages of using React Native Paper from the technological point of view but using this library can also bring a lot of benefits to your company from the business side!
In this article, we will:
- Explain what is Material Design and why is it so popular?
- What is React Native Paper and how can your business benefit from using it while creating apps?
- What companies use React Native Paper.
Where lies the power of Material Design?
Material Design (MD) is a design system introduced by Google. The main assumption is to provide a simple, consistent, and also legible graphic style ensuring the highest quality experience.
Currently, it’s the official style used in the apps created by Google such as Gmail, Google Drive, or Google Fit, but in general, it’s a global styling guideline. It’s growing in popularity, thanks to its simplicity and usability and nowadays is used not only on mobile applications but also more frequently on websites.
One of the factors that influence a large crowd of fans is undoubtedly the official documentation. It clearly presents the specifications of components, the main assumptions of the style, primarily based on mobile applications which can be translated into websites as well.
Material Design is mostly associated with Android, so can it be used on iOS as well?
The aforementioned documentation contains a section on cross-platform adaptation. It explains when adaptation is needed, what are the differences, and how to adjust them.
“The following guidelines indicate when to adapt to native platform conventions and adaptation is optional. Platform conventions constantly evolve, and Material Design is evolving with them to increase the quality of our design patterns.”Source: Material.io
React Native Paper
React Native Paper is a UI component library, arose as a result of a passion for React Native and Material Design. It allows building beautiful interfaces on Mobile and Web with high-quality cross-platform components. It is responsive, fast, and works reliably no matter the platform. Made with exceptional pixel precision, the components meet the standards imposed by Material Design, which gives them a native look and feeling.
The library is constantly maintained and developed. Currently, it contains about 30 customizable and production-ready components, which can be really helpful in the product creation process.
A few examples of React Native Paper components.
When necessary, the components retain native platform-specific. It improves their readability, minimizes user confusion, and ensures better UX. What’s more, Paper’s community really cares about accessibility. That’s why components are following the accessibility and RTL standards. The team also keeps watching the changes in Material Design and applies them directly in react-native-paper to be always up to date!
Switches, checkboxes, and iconography for back and more buttons are adjusted to iOS and Android (below)
You can check the demo app by running an Expo app and scanning the QR code located below or try it live on the Snack. Additionally, if you are interested in the react-native-paper integration with react-navigation, I can recommend you to check the simplified exemplary Twitter clone app.
Why should you use Paper?
If you are not sure if React Native Paper is the right UI component library for you, here are some benefits, that should convince you.
Rapid Time to market
Paper UI kit basically allows you to save the time that you would have to spend on crafting components from scratch. When building a React component, you have to style each of them by yourself, according to the guidelines of the platform you are targeting. It can be overwhelming and non-trivial to do right. Using a ready-made solution, you do not have to focus on the appearance of the components. All you have to do is to add functionality that each of them is supposed to fulfill. This approach greatly speeds up the application development process!
MVP and Rapid Prototyping
Do you have an idea for a cross-platform application and need to build a prototype or proof of concept that not only looks good but also works? It looks like a job for React Native Paper!
Currently, it’s supporting the web as well, so with Paper, you can have one codebase for even three platforms. Moreover, react-native-paper is also pre-installed in Expo Snack, which lets you run React Native projects in the browser without any downloads. Can it be easier?
Native feeling and platform adaptation
The accuracy and precision in creating components guarantee a snappy interface. Attention to the native specific details ensures user satisfaction. All these together are achievable with Paper to let you ship the finest product.
It’s understandable that each app can have different brand colors. That’s why themes are first-class citizens in react-native-paper. You can switch between dark and light mode as well as create your own theming system. Tailor it to your needs!
Accessibility & RTL support
A perfect product is an app that is accessible to everyone. With that in mind, Paper was created to be fully compatible with screen readers, readability tools, and right-to-left languages. There are many reasons to create inclusive applications, but with react-native-paper you’re doing it by default!
Paper’s components such as Drawer, Appbar, or Bottom Navigation can be fully integrated with react-navigation. @trensik in his blog post describes how to achieve it creating a simplified Twitter clone app. And that’s not all. The latest version of react-navigation (v5) introduced a great feature which is a preliminary web support and cross-platform native Stack. That sounds promising, right?
They already trusted React Native Paper
We could talk hours and hours about our library and its usability but we know it is important to show some use cases of the described product. To not be groundless, let’s take a closer look at some examples of companies using React Native Paper.
I assume that everybody has heard about CERN at least once. This one of the world’s largest and most respected centers for scientific research is using React Native Paper for their mobile application to make and receive calls. According to CERN Service Portal, the service is responsible for providing voice, messaging and data mobile phone services for CERN users:
- within the campus (outdoor, indoor and underground)
- within Switzerland via CERN’s national operator
- worldwide via roaming.
The service also includes:
- dedicated VPN to access CERN’s IP network
- Mail2SMS gateway
- Lost and theft declaration for mobile phones and subscriptions
- Accounting, mobile subscriptions configuration, and billing
- Engineering, operation, and maintenance of the required infrastructure to enable proper mobile services coverage in the underground facilities, experiments, and poorly covered buildings.
CERN used react Native Paper to create lists, buttons, and activity indicators by using the following components:
PandaDeals is a shopping companion app that helps users find promotions and discount codes such as coupons for AliExpress or retail deals (for tech, fashion, gadgets, etc.) on popular retail sites like Banggood or Gearbest.
PandaDeals, created with the help of React Native Paper is performing very well with:
- over 5000 downloads
- 285 reviews
- and 4.1 rating stars
PandaDeals used React Native Paper to create floating action buttons (FAB), entities, theming (dark/light mode), and cards.
You can find more examples here.
To wrap everything up, React Native Paper can certainly help you to develop your apps both from the technological and business side. It can be your great ally in building a prototype of your product as well as in making its full version more accessible, available for clients from all over the world (RTL support), and satisfying for the wide range of users (thanks to native feeling and platform adaptation).
Paper UI kit also allows you to say your time (and money) spent od the development process. With the help of our library, there is no need to craft all the components from scratch. Using ready-made solutions will significantly speed up the development process and you’ll be able to launch your app faster!
Also, I’d like to say thank you to all contributors for your awesome work, users for providing feedback and reporting issues, and last but not least, maintainers for keeping stability and quality as well as focusing on the new features!