5 React Native Libraries You Might Have Missed

By Fabian Lee

Fabian Lee
Image for post
Image for post
Photo by CHUTTERSNAP on Unsplash

As React Native developers, I think we are all familiar with those essential libraries from react-native-community, as well as other ground-breaking ones like React Navigation and Reanimated.

In fact, there are also smaller contributors out there and their work are worth mentioning. I would like share 5 remarkable libraries that I’ve found and hopefully they would be useful in your project.

1. gorhom/bottom-sheet

Bottom sheets are mounted through a portal which references the common practice in creating overlay content in web development. The concept is similar to React Portals.

It can also integrate with React Navigation which mimics the iOS native modal stack behavior. The setup is simply wrapping a stack navigator with a bottom sheet. No custom navigator is required. This opens up more creative freedom when implementing a modal stack.

Image for post
Image for post
Demo video from the documentation

The downside would be the annoying keyboard avoiding view issue. There are imperfect hacks around it and the owner is looking to resolve it in v3 which requires Reanimated v2. It would be a walk in the park if you don’t plan to have any input fields inside your bottom sheets.

2. react-native-notifier

There’s also a queue mode where you can line up multiple notifications and transition through them.

You can essentially mimic native push notifications. Everyone should find the user experience familiar and intuitive.

3. react-native-render-html

The greatest potential I would say it’s to pair it with a back-end service where you can serve HTML templates to your React Native app for rendering. This is particular useful for dynamic content like promotions or disclaimer documents.

4. react-native-haptic-feedback

iOS seamlessly implemented haptic features in its Eco-system, for example when you use Apply Pay or confirming an app download. Try adding this feature in one of your user journey and bring your app alive.

5. react-native-parsed-text

This library would be your savior. You can use RegExp or predefined patterns to select individual text. Then you can add styles and handlers to them. For example, you can select URLs and add a handler to open up the browser.