State Management in React Native

MobX provides the functionality to update and manage the app state used by React. What makes it a good candidate for state management in React is its simplicity and testability. It also has a short learning curve, so things like async functions and computed values are already handled behind the scenes.

Redux

Redux is a predictable state container for Javascript. A JavaScript framework for managing and maintaining application state usually used in conjunction with other frameworks to build applications.

Relay

A powerful framework for building data driven applications, Relay is powered by the touted REST successor GraphQL. Devs usually chose either of these two, but it is worth noting that you can use them in complement to each other as well.

Alt

Unidirectional, isomorphic and boilerplate free way to manage your React native apps. I used to use Alt in a lot of projects before Redux came into picture.

Debugging tools in React Native

Chrome developer tools – The simplest way of debugging React native code is to use Chrome. You don’t need to install any other apps. Press ⌘+D on iOS simulator, ⌘+M on Android emulator, or shake real devices, you will see the in-app developer menu. Tap “Debug JS Remotely”.

Reactotron – Reactotron is a desktop app that allows you to debug React and React Native apps. Some of its key features include inspecting, modifying, and subscribing to the app state, tracking HTTP requests made through the app, benchmarking the app performance, and tracking errors. If you’re using Redux, you can even dispatch actions and track sagas from within Reactotron.

Testing and Automation Tools in React Native

Detox

Developed by Wix for React Native, Detox is an end to end testing library that help developers to test and simulate user behaviour on the basis of user’s interaction to the app. Best part is that it comes with multiple device configurations, permissions, notifications etc. that a user can expect from an app.

Enzyme

Developed by AirBnb as a Javascript testing utility for React, Enzyme is useful to assert, manipulate and traverse output of a React component. It has an intuitive and flexible API which is built by mimicking JQuery API for DOM manipulation.

It is compatible with almost all test runners and libraries out there.

Mocha

Mocha is Javascript test framework which runs on Node.js and browser. It was built to make asynchronous testing easier and fun. Mocha-react-native helps you to easily setup Mocha tests with React native.

LOKI

Loki is a lightweight tool for Visual Regression testing in StoryBook.

Bitbar

Bitbar is a cloud based mobile testing framework for automating and testing React Native apps. It supports many open source testing tools such as Appium, XCUITest, XCTest, Espresso, Calabash and many more. Bitbar also provides a REST API support for integration of various CI/CD tools such as Jenkins, Travis CI etc.

Appium

Appium is an open source test automation tool which allows developers to test native, hybrid and mobile web apps. When it comes to React Native, it allows you to run fully automated tests on emulators, actual devices, and simulator.

Robotium

Robotium is pretty decent test framework to write robust automatic test UI cases for applications developed in Android. With Robotium, Developers have the feasibility to write functions and different acceptance test scenarios for testing Android applications.

Jest

Jest is a standard automated Javascript test runner maintained by Facebook. While using Jest to test a React Native application, developers are required to write a snapshot test that will save the output of a rendered component to file and compare that components output to the snapshot on consecutive runs. This method is very useful in observing any behavioral change in components of an application.

Jasmine

Jasmine is an open source testing framework for React Native more specifically Javascript on its whole.

Bridge

Bridge provides you the complete native API access in your React Native app by executing your JS code into node.js so that you can hassle-freely test it mock free without having to dig into the native code. It goes handy when you are using testing tools such as Detox and Mocha testing framework.

Tools for Performance Monitoring and Crash reporting in React Native

New Relic

New Relic for Mobile Apps is deeply integrated with New Relic for web and mobile browser applications. It shares the same one-screen view, making New Relic’s combined services and capabilities the only solution to monitor software, no matter where it’s running in an app server, browser or mobile device. There’s an open source library called React native New Relic by Wix developers that is worth checking out.

Fabric Answers

Fabric answers let you keep an eye on real-time statistics about how your app is being consumed by your users. This will include the number of active users, retention rate, session length etc. The fabric also has built-in Crashlytics which is useful to track and report the crashing of an app.

BugSnag

BugSnag is a tool which helps React native developers to quickly resolve native and JS errors by capturing real-time exceptions from mobile applications. It offers two real-time APIs to track bugs:

The Notifier API – The Notifier API of BugSnag is mainly used to alert it whenever any error or exception is tracked

The Deploy tracking API – The Deploy tracking API of BugSnag tracks multiple deploy versions of an app to keep developers informed about the deploy version in which the error was caught

Sentry

Sentry provides open source error tracking that shows you every crash in your stack as it happens, with the details needed to prioritize, identify, reproduce, and fix each issue. Here’s the link to React native SDK if you are feeling lazy today.

Pleak

Pleak is an upcoming performance monitoring tool for React Native apps. Their beta release will be out for trial soon. You can sign up on their official website to get notified about the release.

Tools for Continuous Integration and Deployment

Here are some really cool CI/CD tools that you may consider using in your React native project:

AppHub

The AppHub service allows a developer to combine one or more microapps together with global navigation and a common mechanism for user authentication.

Microsoft Codepush

CodePush is a cloud-based service by Microsoft which seamlessly provides React Native developers to deploy over-the-air updates directly to their user’s device. It acts a central repository so that developers can publish or deploy their changes to HTML, CSS, Javascript and images.

With CodePush, developers find a great deal for pushing bug fixes to their app without having the need to upload the newest version directly on appstore or to wait for users to update their app version.

Bitrise

Bitrise is a great tool for Continuous integration in React Native. It allows you to run your tests, build the app anytime code is merged in and automatically push the app to end user’s devices while deployment. The best feature of Bitrise is its ability to be integrate with bunch of services in every step of your development portfolio.

BuddyBuild

BuddyBuild is a continuous integration (CI) and continuous deployment (CD) platform that helps developers to seamlessly build, integrate and push the live updates to the app over the air without having to worry about the integration process.

Fastlane

Thinking DevOps? Fastlane builds continuous deployment pipeline for mobile apps. Though this solution works well with React native, it does often gets a bit difficult to setup.

CircleCI

CircleCI is cloud based system for Continuous integration and deployment of native apps. While working with CircleCi, developers have an access to projects, builds or artifacts. It’s a complete out of box solution for continuous integration that needs minimal configurations or adjustments.

TravisCI

Travis-CI is another sophisticated and well built automation tool that help developers help in understanding whether the application they are working on is fully tested and reported according to the build sequences they had configured. Having said that, Travis CI is a continuous integration tool which aids with the speed of development in React Native.

Fabric Beta Deployment

Fabric is used to catch crashes in both beta builds and apps live on production. It is helpful in tracking user metrics such as devices being used, retention, daily users etc.

WatchMan

WatchMan is a wonderful tool which can detect when your code changes thereby providing an automatic build and push update facility. This facilitates developers fastly deploy their code without having to refresh the code manually. It is one of the most helpful tools available for React Native and is open source.

Watchman can also made to work with storyshots to automatically generate UI snapshot tests so that developers can both build the view and write tests for it at the same time.

NeverCode

NeverCode‘s API might be crazy helpful for you to implement continuous integration for your React Native build. The best part is it doesn’t require you to write your code twice. Instead it will scan your repository and let you configure your build from it.

Payment providers for React native apps

React-native-paypal

Though not an official commit made by Paypal, React-native-paypal by Matt Foley goes to great lengths to support React native with Paypal and supports both iOS and Android platforms.

Tipsi-Stripe

Similar to Paypal, Stripe isn’t backing an SDK for React native either. Thankfully the folks at Tipsi have created a wrapper (Tipsi-stripe) that helps you safely integrate Stripe with your apps.

RazorPay

Thankfully, RazorPay has created a React native wrapper for iOS and Android apps that facilitates making payments from the app itself. If you are looking for a payment provider that has an official support, Razorpay is something definitely worth checking out.

I still don’t know the reason why these giants like Paypal and Stripe aren’t committed towards building a SDK for React native, but hopefully the situation should change real soon.

Tools for Push Notifications in React Native



SendBird – SendBird provides the chat API and messaging SDK for in-app messaging on your mobile apps and websites.

Urban Airship – This library is a Github module in React Native to seamlessly integrate push notification services with the apps (be it iOS or Android) developed in React Native. The module is designed to be as cross-platform therefore it is possible for developers to leverage it using the same codebase on both platforms.

React Native Push Notifications – Useful to implement local as well as remote push notifications in React Native for both Android and iOS.

OneSignal Push Notifications – A module for implementing push notifications in React Native.

PushWoosh – For integrating Push notifications in React Native using PushWoosh service.

JPush – JPush is a proven large-scale APP push platform that delivers more than 500 million messages daily. They have a dedicated React native SDK that you can use to easily build push notification services.

Pushbots – PushBots allow your React native app to send Push notifications to any mobile platform just by accessing the dashboard.

Localytics – Provides in-app, e-mail, and remarketing campaigns. Allows you to trigger instant notifications through Localytics Push API, with joint sessions, events, and profile data to easily create and define target segments.

UI Frameworks/ libraries/ Boilerplates

React Native Pop Menu

Built by developers at Instea, React Native Popup menu is an easy-to-use and customizable popup menu for React Native on iOS and Android. The library has recently crossed over 500 stars on Github and is actively contributed by React Native community members from time-to-time. Aside from React Native mobile, It also works on React-native-web and Universal Window platforms app.

React Native Paper

React Native Paper is developed by developers at Callstack.io with an aim to provide a material design component for React Native apps on both Android and iOS. Paper boasts of well crafted and beautifully designed Material Design components which gives you exactly (yes exactly!) the same feel on both Android and iOS platforms. Team at Callstack had announced that they will be adding more exciting components such as Buttons, ToolBars, Papers etc. in its upcoming version. All-in-all if you are a great fan of Material Design (like me) then you should give React Native Paper a try.

Carbon-UI

Carbon-UI is a material design library for React native apps that works well on all platforms(iOS, Android), and is extremely customizable when it comes to theming, animations and grid systems.

Ignite CLI

Here’s the thing about React native, there are so many parts, so many updates and a myriad of things to take care of for devs. Thankfully, we have Ignite CLI, a React native toolchain that is highly adaptive to your projects. If you are starting a new React native project, this should be on your checklist.

Next-Frame

Developed by Kyle Corbitt, Next frame is a library that helps your app break background tasks into chunks so that they don’t block UI operations. Next frame helps you build really high performance user interfaces. I would note that the codebase hasn’t been updated since 2016, but you can derive great performance just by minor modifications.

React-Virgin

React-Virgin is a beautiful UI kit for React Native that brings the following UI elements to the table:

React-navigation boilerplate

Horizontal and vertical list

Buttons and headers

GridView, chat bubble and loaders

Snowflake

Snowflake was originally built as a boilerplate that could help you built a React native app for iOS and Android, with seamless connectivity to Parse(now dead!) and Hapi.

NativeBase

One of the most appreciated UI kits of all time, NativeBase is a cross platform UI Kit solution specifically designed to provide your app a truly native look and feel. It offers you many options to choose from in the form of custom components such as Spinners, Form components and floating action buttons. The best part is that the implementation of these modules are somewhat similar for both iOS and Android platform.

BuilderX

BuilderX is a great tool for both React native designers and developers. All you have to do is to design your app inside of BuilderX, the design would automatically produce a source code for you. Isn’t that amazing?

Shoutem

Shoutem UI is a highly customizable UI kit for React native. It has components that seamlessly integrate with UI and makes it extremely easy to develop complex user interfaces.

Pepperoni’s React native starter kit

Instead of having to build your React native app from ground up, Pepperoni has a React native starter kit that helps you remain focused on your product development by utilising pre-built React native components.

Nachos

Developed by devs at Avocode, Nachos UI is open source, React native based UI Kit made with an aim to provide ready-to-use components in your React Native app.

TeaSet

This is a UI library for React Native strongly focused on features such as content display and action control.

Panza

Diligently Inspired by popular Rebass library, Panza provides a set of commonly used functional UI components for React Native. These components have higher degree of customization and works well in both platforms – Android and iOS.

React Native UI Kitten

React Native UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. Using this library, you can focus more on business logic – it takes care of visual appearance.

Ant Design Mobile

Ant Design UI is much more than a React Native UI kit, it has many usable UI components such as Modals, navigation menus, etc to name a few. However, I will suggest you to go with its minimalistic usage of the ecosystem since it could also cause a deal breaker in the longer run. The reason being to go minimalist with it is that the repository is filled with issues in chinese language.

React Native Material Design

If you are planning to use physics and animations from material design with you React native app, you should definitely go through Facebook’s official Material design port for React native. I you are looking for something specific to android and found something missing there, there’s a React native material kit and Material React native as well.

React Native Elements

React native elements is set of elements that does not follow any platform specific design language. It is a great component library for building consistent interfaces across iOS and Android devices using React native.

React Native Style Tachyons

Built upon the philosophy of functional styling, React native style tachyon brings user testing and developing UI for a scale. This library is something that you should definitely check if people with varying levels of dev skills are going to work with your React native app. I have seen some devs use this library to design a system that works for everyone, no matter their dev skills.

Lists in React Native

Creating lists can often be one-hell-of-a-ride for React native developers. We spoke about some of these issues in our react native performance blog post. Here are some open source libraries that you can use within your React native app to avoid some of these issues

React-native-largelist

If you have used SectionList before, you would’ve faced some issues that are common with really large list views on React native. React-native-largelist solves these issues that exists with large list views when you are using SectionList, and it has significantly low CPU usage.

AtoZList

A fork of Brett Vante’s ListView, AtoZlist brings enhanced performance to large lists views. You can define and configure list height, cell structure, etc using AtoZlist as well.

React-native-scrollable-list

A scrollable ListView component in React Native. If you ever found yourself in a situation where the list items won’t stretch horizontally, then React-native-scrollable-list is for you.

React Native Sortable List

If you ever found yourself in a situation where the list items won’t stretch horizontally, then React-native-sortable-list is for you. Some really amazing work here by Tim Gibadullin.

React-native-synchronous-list

Last September, Tal Kol spoke about synchronous Rendering in React native. If you haven’t checked it yet, do check it out! React-native-synchronous-list makes it extremely easy to implement infinite scroll through synchronous rendering, which otherwise could be a really huge challenge.

React-native-immutable-list-view

If you have immutable data, nested objects or need better performance with animated screen transitions, React-native-immutable-list-view has been built keeping these three in mind. I have seen many replace ListView, FlatList and VirtualizedList with this library for more fluidity and higher performance.

Animations in React Native

React Native Re-Animated

Developed by Krzysztof Magiera, React Native’s Re-Animated library is a low-level abstraction built on the top of the official Animated API. It provides you much greater flexibility especially when it comes to handling gesture-based Animations. It was first revealed at React Europe conference.

Krzysztof started working on re-animated when he found out that the official Animated library has some limitations when it comes to gesture-based Animations.

In the words of Krzystof,

I started working with re-animated to fix the matter of pan interaction when the object can be dragged along the screen and when released it should snap to someplace on the screen. The situation there is that despite the fact that we are using Animated.event, we could map gesture state to the position of the box and make this whole interaction run on UI thread with useNativeDriver flag, we still had to call back into JS at the end of the gesture for us to start “snap” animation. It is because Animated.spring({}).start() cannot be used in a “declarative” manner, that is when it gets executed it has a “side effect” of starting a process (an animation) that updates the value for some time.

Here’s the video from the Kryzstof’s gesture handler and re-animated talk from the React Europe’s conference.

React Native Interactable

React-native-interactable is an animation library that specifically focuses on animations that are highly interactive in nature. They even have interactive demos available on App stores that you can download on your mobile and see what animations you can build using this library.

React Native Animatable

Planning to use animated visual feedback, animations for system status, connected transition states or even grab user’s attention using animations? React-native-animatable is everything you need.

Ideally suited in the development of general applications and games, React Native Animated Sprite is a feature rich declarative component particularly used for animation, tweening and dragging. It uses React Native Animated class for tweening and React Native Pan Responder for dragging actions.

Lottie

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing React native apps to use animations as easily as they use static images. That too without bringing in any performance overhead. Lottie was written by developers from Airbnb, and is one hell of a gem. And it’s beauty is that it renders all animations natively!

MISC Tools

Yarn – A dependency manager tool for React Native.

Flow – Flow is a static type checker that helps prevent Javascript’s natural ambiguity from causing bugs in an application.

StoryBook – With Storybook for React Native you can design and develop individual React Native components without running your app.

React Native CLI – It is a small Node application that offers a simple init command used to create new React Native applications. Using React Native CLI you can create a standard React Native app with all the necessary files and dependencies needed to build an app for iOS and Android and you can open your native projects with Xcode or Android Studio.

Conclusion

While I have tried covering as much as I could, this blog post had to end somewhere. If you feel there’s something in React native’s ecosystem that I missed, feel free to reach out to me on rakshit@simform.com or drop a comment.