- December 13, 2021
Our Recommendations from the React Native Plugin Ecosystem
- Senior Application Developer
We have tried many platforms to develop mobile apps in the past, but lately we’ve settled on React Native as our platform of choice. It allows us to build native cross-platform (iOS and Android) mobile applications—all from one codebase. And, because it’s just React under-the-hood, anyone on our staff can contribute without having specialized mobile app expertise. This allows us to quickly build an app prototype and rapidly iterate to complete a production-worthy application, in a fraction of the time it would take to build separate applications for each mobile platform.
Another reason for choosing React Native is its extensive plugin ecosystem. This means that for virtually any functionality we need, there’s already a plugin for that. We’d like to highlight some plugins that we’ve used with success.
NativeBase is a utility-based component library for React Native. We use NativeBase as a foundation for building user interfaces that are consistent across multiple mobile platforms. NativeBase’s primitive components—layouts, buttons, form inputs, modals, alerts, menus, toasts, etc.—truly provide the building blocks we need to construct a custom user interface. Accessibility, responsiveness, and cross-platform consistency are all provided out of the box. Just like one of our favorite CSS frameworks, Tailwind CSS, NativeBase is utility-first. This allows us to describe our UI components with a coherent set of styling utilities, which can be configured at the project level (spacing, colors, typography, etc.) and made consistent throughout our applications. NativeBase gives our projects a head start when it comes to building UI.
(Source: NativeBase)
React Navigation is the go-to library when it comes to in-application page routing. Handling all the aspects of in-app navigation can be surprisingly complicated: there’s page routing, navigation history, back button control, deep linking, navigation tabs/menus, etc. React Navigation provides easy-to-use and well-documented tools to solve all of these interconnected problems. Judging from the consistent stream of releases (they’re up to version 6 now!), it’s clear that the authors of React Navigation take their stewardship seriously and are constantly moving this library forward.
Here at Happy Cog, we’re big fans of Stripe and Square and have been advocates for and customers to them for years. Stripe has finally created a first-party solution for React Native, while Square has excellent mobile payment SDKs for iOS and Android. The Stripe React Native SDK is a Swiss Army knife of utilities for handling payments in React Native. We can capture customer’s payment information securely and have the most onerous parts of PCI compliance handled for us by Stripe. We can also save the customer’s payment details for future purchases like credit card scanning, save-for-later functionality, Apple Pay / Google Pay support, and more.
(Source: Stripe’s “Accept a payment” Guide)
As for Square, we love their entire ecosystem for collecting payments on the web. Square’s React Native plugin for In-App Payments SDK is a bridge between the native iOS/Android SDKs and React Native. We’re really excited to have a wide range of options for collecting payments in React Native thanks to the Stripe and Square SDKs.
(Source: Square’s “Customize the Payment Entry Form” guide)
React Query is a data fetching and caching library. While data fetching libraries have been popular in the GraphQL API world for some time (see: Apollo Client and urql), this pattern has started to emerge in the REST API world, too. This represents a paradigm shift in how we build React applications. In the past, we’d have used Redux or other state management libraries as client-side cache for data fetched from our API. With React Query, we can reduce the footprint of our Redux usage and keep its associated boilerplate to a minimum. This frees us to use Redux for one simple purpose: client-side state management. Server-side fetching and caching are handled by React Query. Our React Query code is much less verbose and clearer in intent than the equivalent with Redux. There are now some similar libraries to React Query, like SWR and RTK Query, that we hope to experiment with in the future. React Query is fully compatible with React Native out of the box.
React Native Firebase is an SDK for React Native to interact with the many services that Firebase provides. Firebase is a cloud-based mobile back-end PaaS that has multiple utility services for building mobile apps, such as authentication, real-time NoSQL database, mobile notifications, analytics, crash and error logging.
We’ve used a number of these services. Firebase’s Cloud Firestore is an auto-scaling, globally available NoSQL database, and with the Firebase SDK we can sync data from our database to our React Native application in real-time with ease. Firebase Authentication is a user identity service, providing utilities to register and authenticate users. Firebase also has a pre-built UI for React Native that we can use to quickly build your login and sign up screens.
React Native has quickly become a vital tool in our arsenal, due in no small part to its rich selection of open source plugins. We anticipate building many more mobile apps for our clients with React Native and exploring more of the React Native plugin ecosystem.