React Native Development Tools

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

To start your React Native development journey, check out React Native’s “Getting Started” guide with all the information you need to embark on that journey and our blog post that lists the top React blogs, newsletters, and online communities.

You’ll also need some tools to help you get started, which is why we’ve compiled below the essential tools needed for React Native development.

‍

‍

‍

‍

Atom

Atom is a text editor that's modern, approachable, yet hackable to the core. It's a tool you can customize to do anything but also use productively without ever touching a config file.

Atom allows you to choose from thousands of open source packages that add new features and functionality to it or build a package from scratch and publish it for everyone else to use. It's also easy to customize and style Atom. You can tweak the look and feel of your UI with CSS/Less and add major features with HTML and JavaScript.

• Developed by: GitHub
• Release date: February 26, 2014
• Platform: Windows, Mac, Linux
• Written in: Electron (CoffeeScript / JavaScript / Less / HTML)
• Pricing: Free, open source

‍

Nuclide

Nuclide is built as a single package on top of Atom to provide hackability and the support of an active community. It provides a first-class development environment for React Native, Hack and Flow projects.

Nuclide allows you to improve the quality of your JavaScript with built-in support for Flow, including autocomplete, jump-to-definition, and inline errors.

• Developed by: Facebook
• Release date: 2015
• Pricing: Free, open source

‍

Visual Studio Code

Visual Studio Code is a lightweight but powerful source code editor. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

Visual Studio Code combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging. First and foremost, it is an editor that gets out of your way. The delightfully frictionless edit-build-debug cycle means less time fiddling with your environment and more time executing on your ideas.

• Developed by: Microsoft Corporation
• Release date: April 29, 2015
• Platform: Windows, Mac, Linux
• Written in: TypeScript, JavaScript, Cascading Style Sheets
• Pricing: Free, open source

‍

React Native Tools

A Visual Studio Code extension that provides a development environment for React Native projects. Using this extension, you can debug your code, quickly run react-native commands from the command palette, and use IntelliSense to browse objects, functions, and parameters for React Native APIs.

• Developed by: Microsoft Corporation
• Pricing: Free

‍

You can check out G2 Crowd's IDE directory that features all the IDE tools with real user reviews.

‍

‍

‍

Redux

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-travelling debugger.

Redux is tiny (2kB, including dependencies) and can be used together with React or with any other view library.

• Developed by: Dan Abramov and Andrew Clark
• Release date: June 2, 2015
• Written in: Javascript
• Pricing: Free

‍

Expo

Expo is a toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React. Expo enables you to build cross-platform native apps using only JavaScript. Use your favorite text editor to write powerful React Native components without ever opening Xcode or Android Studio.

In addition to React Native components, you'll have access to the Expo SDK, a library that provides a wide variety of native APIs on iOS and Android. Expo can also manage your assets for you, take care of push notifications, and build your final native binary for submission to the app store.

• Developed by: Expo
• Release date: May 17, 2017
• Pricing: Free, open source. Optional paid support.

‍

Ignite

Ignite CLI is a React Native toolchain with boilerplates, plugins, and more. Choose from many existing boilerplates or start your own. Support standalone plugins as you need them. Ignite CLI adapts to your project, not the other way around. Sometimes called a "Style Guide" or "Pattern Library", Examples Screen is filled with usage examples of fundamental components for a given application. Use this merge-friendly way for your team to show, use, and test components. Examples are registered inside each component’s file for quick changes and usage identification.

The Usage Examples screen is a playground for third party libraries and logic proofs. Items on this screen can be composed of multiple components working in concert. Functionality demos of libraries and practices are included.

• Developed by: Infinite Red
• Release date: April 22, 2016
• Pricing: Free, open source

‍

Flow

Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale.

Flow checks your code for errors through static type annotations. These types allow you to tell Flow how you want your code to work, and Flow will make sure it does work that way.

• Developed by: Facebook
• Release date: November 18, 2014
• Pricing: Free, open source

‍

ESLint

ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines.

The primary reason ESLint was created was to allow developers to create their own linting rules. ESLint is designed to have all rules completely pluggable. The default rules are written just like any plugin rules would be. They can all follow the same pattern, both for the rules themselves as well as tests. While ESLint will ship with some built-in rules to make it useful from the start, you’ll be able to dynamically load rules at any point in time.

• Developed by: JS Foundation
• Release date: June 2013
• Pricing: Free

‍

Reduxsauce

Reduxsauce provides a few tools that make working with Redux-based codebases a lot easier, including createReducer that declutters reducers for readability and testing, createTypes to DRY define your types object from a string, createActions that builds your Action Types and Action Creators at the same time, and resettableReducer, which allows your reducers to be reset.

• Developed by: Infinite Red
• Release date: May 17, 2016
• Pricing: Free

‍

‍

‍

Snowflake

Snowflake is a React-Native starter mobile app or boilerplate for iOS and Android with a single code base, with two backends to chose from -- a Hapi or Parse Server solution -- to help you quickly get started.

• Developed by: Barton Hammond
• Release date: Dec 7, 2015
• Pricing: Free

‍

NativeBase

NativeBase is a sleek, ingenious, and dynamic front-end framework to build cross-platform Android and iOS mobile apps using ready-to-use generic components of React Native. What is really great about NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity.

When using NativeBase, you can use any native third-party libraries out of the box.

• Developed by: GeekyAnts
• Release date: April 19, 2016
• Pricing: Free, open source

‍

‍

‍

InVision

InVision is the world’s leading product design collaboration platform. It allows you to upload your design files and add animations, gestures, and transitions to transform your static screens into clickable, interactive prototypes. You can then create context around your projects with boards that are flexible spaces to store, share, and talk about design ideas. Built-in layout options allow you to create visual hierarchy for your ideas.

It also allows you to simplify your feedback process by having clients, team members, and stakeholders comment directly on your designs, giving you the ability see new feedback for all your projects in one convenient place, or drill down by active project, specific people, or your own name.

• Developed by: InVision
• Release date: 2011
• Pricing: Free. Paid plans start at $15 per month.

‍

Sketch

Sketch is a vector-based design tool for Mac with a focus on screen design. It’s used primarily by designers to create websites, icons, and user interfaces for desktop and mobile devices. For beginners and industry professionals alike, Sketch’s powerful and easy-to-use tools allow designers to focus on what they do best: design.

From its conception, Sketch was tailored to the needs of digital designers and it shows in every fibre of the app. Since then, Sketch’s popularity and fan base have been ever increasing and is now widely recognized as the design tool of choice for many digital companies and startups throughout the world.

• Developed by: Bohemian Coding
• Release date: September 7, 2010
• Platform: Mac
• Pricing: Plans start at $99 per year

‍

Balsamiq

Balsamiq aims to help designers work faster and smarter. It reproduces the experience of sketching on a whiteboard, but using a computer. Making the wireframes process faster allows you to generate more ideas so that you can throw out the bad ones and discover the best solutions. You can drag and drop to resize and rearrange elements, make changes without starting over, and your work is clear enough that you'll make sense of them later.

• Developed by: Balsamiq Studios, LLC
• Release date: June 2008
• Platform: Windows, Mac
• Pricing: Plans start at $9 per month

‍

Adobe XD

Adobe XD allows you to go from concept to prototype faster with an all-in-one UX/UI solution for designing websites, mobile apps, and more. It's built to meet the needs of today’s UX/UI designers, with intuitive tools that deliver breakthrough precision and performance and make everyday tasks feel effortless. It allows you to use time-saving features like Repeat Grid and flexible artboards to create everything from low-fidelity wireframes to fully interactive prototypes for any screen in minutes.

You can switch from static layouts to interactive prototypes in a single click, make changes to your design, and see your prototype update automatically with no syncing required. You can also review your prototypes, complete with transitions on iOS and Android devices, then easily share them with your team for fast feedback.

• Developed by: Adobe Systems
• Release date: October 18, 2017
• Platform: Windows, Mac
• Pricing: Plans start at $9.99 per month

‍

‍

‍

Enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

• Developed by: Airbnb
• Release date: December 3, 2015
• Pricing: Free

‍

Reactotron

Reactotron is a desktop application for inspecting React JS and React Native apps, full of great features to help you be more efficient when building apps. It allows you to view your application state, show API requests and responses, perform quick performance benchmarks, subscribe to parts of your application state, display messages similar to console.log, track global errors with source-mapped stack traces including saga stack traces, and more.

Reactotron also allows you to dispatch actions like a government-run mind control experiment, track your sagas, show image, overlay in React Native, and track your Async Storage in React Native.

• Developed by: Infinite Red
• Release date: April 23, 2016
• Platform: Windows, Mac, Linux
• Pricing: Free, open source

‍

‍

‍

Instabug

Instabug is the top React Native performance platform for mobile apps. It provides the most useful metadata on the market, exceptional customer support, and an in-app communication channel to chat with your testers and users.

‍

Bug Reporting and Crash Reporting

With each report, you automatically receive comprehensive data to help fix issues faster, including steps to reproduce errors, network request and console logs, and environment details. For bug reporting, your beta testers can also send screen recordings and annotate screenshots to provide further context.

‍

Mobile-first App Performance Monitoring

View your app's performance from your users' perspective with built-for-mobile performance monitoring that tackles the unique challenges of the mobile experience. Instabug's APM aligns your team around a single overall metric that reflects your app performance and helps you build a culture of performance for your team.

‍

In-App Surveys

Collect user feedback from your beta testers right inside your app to minimize interruptions and boost participation rates. Get powerful insights to enhance your product roadmap with surveys that you can target at specific tester segments and feature request voting to understand user pain points and desires.

‍

Visual Mobile Session Replay

Capture all your app's sessions and watch visual replays to see through your users' eyes. Instabug captures a series of screenshots along with all the events, actions, logs, and more, allowing you to quickly understand the issue, what's causing it, and how to fix it without wasting your time on needless back-and-forth questions. Additionally, you can ensure user privacy out of the box with customizable levels of auto-masking to protect sensitive information.