Originally published on Logrocket Blog
The React Native community is one of the more vibrant open source communities on the web. According to GitHub, the React Native repository is one of the top-rated repos based on the number of contributors. You can find modules and third-party libraries for almost anything you want to implement in your next mobile application.
You’re bound to encounter issues related to deprecated and unmaintained packages, especially packages from the early days of React Native — it’s simply a fact of life. I think it’s an acceptable burden since maintaining a React Native library requires maintaining a project that can depend on at least three languages.
It is crucial to know which libraries to use to create the best possible user and developer experience. In this tutorial, we’ll introduce you to 15 React Native UI libraries that I’ve used in virtually every React Native application I’ve worked on so far in 2021.
We’ll cover the best React Native libraries for:
- Splash screens
- App icons
- Loading placeholders
- Handling and tracking errors
- Fetching data
Then, we’ll go over some tips , including how to:
Restyle is a library developed by Shopify with a type-enforced system for building UI components. With Restyle, you can make a complete design system by defining colors, spacing, and variations and creating your components based on React Native core components and Restyle utilities.
The best feature of Restyle is that it forces you to use only configurations you already declared in your theme, which keeps the application clean and guides your coworkers by keeping their choices as minimal as possible.
Restyle requires you first to create a theme that reflects your design system config (colors, spacing, breakpoints, and variants), like this:
This what your components will look like using Restyle:
If you had asked me two years ago, I would’ve cautioned against using React Navigation due to some performance challenges and recommended using a native library, such as React Native Navigation, instead.
Fortunately, the React Navigation community, with some help from Software Mansion, developed and optimized three of the most-used libraries in the React Native ecosystem: React Native Screens, React Native Gesture Handler, and React Native Reanimated. Those three libraries are the secret behind the huge performance improvement you’ll notice starting from version 4.
Today, React Navigation should be your first choice; you don’t need to think twice.
To start working with React Navigation, you must first install all its dependencies:
You can use three common types of navigator with React Navigation:
Drawer. You can also combine multiple navigators and create a complex app architecture.
Here’s a simple example of a stack navigator:
Adding a splash screen to your mobile application is a tedious task, and the best way to accomplish tedious tasks is to automate them.
react-native-bootsplash enables you to create a fancy splash screen using CLI. All you need to do is provide an image and background color and the package will do the work for you.
I prefer using
react-native-bootsplash over the most popular package,
react-native-splash-screen, because the former prevents you from seeing the red errors if you’re facing an issue on startup and sticks on the splash screen instead, which is annoying.
The following command generates a splash screen in
This is another tedious chore we need to automate. To automate generating app icons, we’ll use a plugin called React Native Make. The plugin is available through the React Native CLI and is designed to help you generate app icons for iOS and Android platforms.
react-native-make, you just need a 1024×1024 version of your app icon and you’re ready to generate app icon assets using the following commands:
One of the most common questions I receive about React Native mobile apps is how to create a loading experience similar to apps such as Facebook and YouTube.
There are multiple solutions to create such an experience, but I would recommend using the
react-content-loader package. This package is based on the
react-native-svg and Reanimated libraries, which seem to work very smoothly. The package also provides a playground to help you create a placeholder in your browser.
Here’s an example of a loading placeholder similar to that in the Facebook app:
Handling and tracking errors
We all aim to make our React Native application bug-free by using a typing system and increasing testing coverage. However, even with high testing coverage, users are still sure ti encounter and report bugs.
Therefore, it’s crucial to handle your errors and provide feedback to users whenever the app is not working as expected.
You should track these errors with a third-party tool that notifies you of the errors users encounter in your application so you fix them in future releases.
My suggestion in this section will depend on your back-end implementation. If you are using a REST API, react-query is your best choice here. But instead, if you’re using graphQL, you can use urql. Those two libraries will provide you with everything you will need to handle API in your application. You will benefit from a ton of unique features like caching, offline support, optimistic UI, prefetching, and much more.
After installing react-query you can create your own hook to fetch tasks as example:
And use it inside your components to fetch tasks :
Most articles I’ve seen about using icons in React Native suggest using React Native Vector Icons as a default choice. It’s true that this library has numerous icons and fonts, but more often than not, my team found itself creating new fonts to accompany custom designs in our icons. In my opinion, creating a custom font with react-native-vector-icon makes for a suboptimal experience because you need to generate a new font whenever you want to add a new icon.
Instead, my team start using
react-native-svg for our icons with the amazing SVGR package, which can generate a React component from any SVG file. You can even directly export a React component from a Figma file.
Below is a simple example of an SVG icon generated as React Native components using the SVGR Figma plugin:
If your application depends mainly on images, you’ll notice some performance issues, especially with lists and scroll view.
Using FastImage, a performant React Native image component, will help you improve your application without any extra effort. It exactly replaces the image component from React Native and adds some amazing features, such as caching and prioritizing and reloading.
I used to use Formik, but I’ve been hooked on React Hook Form ever since I discovered it. In my opinion, this is the best solution for handling simple and complex forms in React.
Other benefits of using React Hook Form include state management, validation, errors management, and multiple array fields.
If you’ve already worked with the testing libraries to test your frontend applications, your knowledge and experience will be applicable to testing in React Native. React Native Testing Library has virtually the same API.
Here’s a simple counter unit test using React Native Testing Library:
To test your application’s behavior with confidence, I would recommend writing end-to-end tests using the Detox library from Wix.
Tips and best practices for using React Native UI libraries
Below are some bonus tips to help you get the most out of the React Native libraries detailed above.
Create a React Native template
If you expect to use all these libraries in your upcoming React Native projects, it might be worth your time to create a simple template so you can easily start a new project.
We recently created a template for our mobile team to start new projects with all the aforementioned libraries. Here it is if you want to use it:
Get updates about new libraries
One of the most effective ways to get updated about new libraries and best practices is to follow open source projects. I like to check the package.json file for every React Native project shared on my network. Whenever I find a new library, I search for it to learn more.
Also, be sure to follow the react-native topic on GitHub explore page. You’ll receive a ton of React Native projects and discussions.
Use TypeScript with React Native
I started using TypeScript as the primary language for React Native projects about a year-and-a-half ago, and I wish I had done so earlier. Using TypeScript helps you improve the quality of your code and the developer experience because it helps you prevent errors while typing and improve autocomplete functionality.
If you think I am missing some great libraries that can help me improve my React Native Application please make sure to let me know in the comments.
I hope you found that interesting, informative, and entertaining. I would be more than happy to hear your remarks and thoughts.
If you think other people should read this post. Tweet, share and Follow me on twitter for the next articles.