After having used React Native for well over a year, these are some of the pro tips I’ve learned working on Exponent:

Environment

Surround yourself with people who are excited about React Native: in many ways React Native is already operating at levels above the traditional native frameworks, but the reality is that there are several features that are easier to implement in UIKit or Android. When inevitably encountering such features, teams who believe in React Native think, “How can we solve this issue? What improvements do we need to make to React Native?” instead of lamenting how much easier things would be with a traditional native framework.

in many ways React Native is already operating at levels above the traditional native frameworks, but the reality is that there are several features that are easier to implement in UIKit or Android. When inevitably encountering such features, teams who believe in React Native think, “How can we solve this issue? What improvements do we need to make to React Native?” instead of lamenting how much easier things would be with a traditional native framework. Many editors work fine: we use Atom, Atom with Nuclide, Emacs, Vim, Emacs with Vim bindings 😇

we use Atom, Atom with Nuclide, Emacs, Vim, Emacs with Vim bindings 😇 Use a Mac: macOS is definitely the best-supported platform for React Native development. If you are using React Native for professional development, a high-end MacBook Pro is one of the best investments you can make. You will be aligned with most of the React Native core contributors including the React Native team at Facebook.

macOS is definitely the best-supported platform for React Native development. If you are using React Native for professional development, a high-end MacBook Pro is one of the best investments you can make. You will be aligned with most of the React Native core contributors including the React Native team at Facebook. Use a real Android device: real devices tend to be faster than the simulators, although Genymotion is popular too. Some recommendations for which device to get: I like the Nexus 5X, Charlie Cheever seems to like the Nextbit Robin, and the Nexus 6P is good too.

real devices tend to be faster than the simulators, although Genymotion is popular too. Some recommendations for which device to get: I like the Nexus 5X, Charlie Cheever seems to like the Nextbit Robin, and the Nexus 6P is good too. Install Watchman: the React Native packager will scan files several times faster with Watchman installed. Run “brew install watchman”.

Developing

Learn modern JavaScript: React Native supports most of ES2015, some of ES2016, and other proposed features. Look at React Native’s default Babel preset to see exactly which features are supported.

React Native supports most of ES2015, some of ES2016, and other proposed features. Look at React Native’s default Babel preset to see exactly which features are supported. Read the source code when in doubt: this is a very good skill to learn in order to get unstuck.

this is a very good skill to learn in order to get unstuck. Use JavaScript navigation components: at first your inclination may be to use the native navigation components like NavigatorIOS and ToolbarAndroid. You may have to use these components if you are integrating with an existing app. However, if your app is pure Exponent or React Native, I highly recommend using navigation components written in JavaScript. They are cross-platform, work well with other React components, and much easier to customize; after all, you always have the power to fork if you need to. We made and use ExNavigation, which is built with NavigationExperimental, supports the Android back button, and uses natively optimized animations where possible.

at first your inclination may be to use the native navigation components like NavigatorIOS and ToolbarAndroid. You may have to use these components if you are integrating with an existing app. However, if your app is pure Exponent or React Native, I highly recommend using navigation components written in JavaScript. They are cross-platform, work well with other React components, and much easier to customize; after all, you always have the power to fork if you need to. We made and use ExNavigation, which is built with NavigationExperimental, supports the Android back button, and uses natively optimized animations where possible. Write your own List View if you need to: several companies that heavily use React Native internally have their own versions of List View for different workloads. Brent Vatne’s React Europe talk covers some of the different techniques you could use in a custom List View.

several companies that heavily use React Native internally have their own versions of List View for different workloads. Brent Vatne’s React Europe talk covers some of the different techniques you could use in a custom List View. Check out Sentry and Fabric Crashlytics for logging crashes [suggested by Brent Vatne]: Sentry allows you to collect JavaScript stack traces and supports Source Maps v3, which is what React Native’s packager generates. Crashlytics, which is part of Twitter’s Fabric library, allows you to collect native stack traces.

Sentry allows you to collect JavaScript stack traces and supports Source Maps v3, which is what React Native’s packager generates. Crashlytics, which is part of Twitter’s Fabric library, allows you to collect native stack traces. Redux works pretty well [suggested by Charlie Cheever]: Redux with its React bindings is fairly simple, especially if you don’t get clever with middleware, and can grow to support complex, production-quality apps like li.st. One nice thing about Redux is that it centralizes all mutation in its reducers, so there are fewer pieces of code to think about when migrating to another library if you want to.

Contributing

These are tips for contributing code to React Native and also other projects in general.