Tips and Tricks for Working with React Native
This post serves as an expanded edition of a talk my team gave at a meetup with the NYC JavaScript React Group.
React Native is an exciting new framework for building native applications, but of course with anything new there is a learning curve. We wanted to share the lessons we learned while developing our company’s first native app, ThisAM, utilizing React Native.
When our company, Refinery29, a lifestyle digital media company, decided to make its first native app back in mid 2015, we thought it was a cool opportunity to explore something that was brewing in the developer community.
In January 2015, Facebook released React Native, a JavaScript framework for creating native applications for both iOS and Android. The possibility of being able to build a native app utilizing the same skills and language we’ve already honed to create our web experiences was intriguing.
Furthermore, the app itself, ThisAM, is a great candidate for this new approach as it is designed to be very minimalist. ThisAM is a simple daily rundown of everything you need to start off your day with a fresh editorial eye. It’s simple, beautiful, and parses down the essential news of the day in a delightful way. Download the app here to see if you agree.
But not everything went smoothly. It would have been awesome to work with an established framework, with polished versions, using tricks and tips from the community that were well-documented. Instead, we were facing a situation where a new stable version was released every two week or so, for a framework that was only recently established (React.js — 2013, React Native -2015), and with a community that has different priorities than we do.
We still believe that React Native is the future of native app development. If you are a developer and are interested in learning how to work in React Native while it is still getting its sea legs, here is a rundown of our most important learnings.
- We’ve had to scale down our Google Analytics expectations over the course of building ThisAM. We started by forking React Native Google Analytics in order to add support for custom dimensions. This worked really well for us until we realized that the returning users weren’t being recognized because the library’s getClientId() implementation was returning a new user ID every time. We’ve since solved this problem with the help of a library called React Native Device Info. DeviceInfo.getUniqueID() generates a consistent, unique ID for each user and is currently the community-recommended solution for this problem.
- When we first started development way back in July of 2015, we used React Native Webpack Server instead of the default React Packager. To make matters worse, we forked React Native Webpack Server. This turned out to be a mistake because RNWS was abandoned in favor of the default packager and we had to switch back when upgrading our React Native version. Bottom line: stick with the default React Packager.
- In terms of testing, here’s where we landed. For the full rundown on tests, check out this post from my colleague.
— Jest for unit tests
— Calabash for feature tests
— Running both unit tests and feature tests in full on Travis CI - Don’t be shy about using third-party libraries, especially if you are more comfortable with JavaScript than Objective-C. Forking and building functionality yourself is out of the question if you want to continue to upgrade and take advantage of new features — not to mention community support.
- Keep on eye on the community and their release notes, and make sure to upvote or submit your requests on Product Pains. The more feedback we give contributors, the more they can “React” (hehe) to the needs of the community.
In all, we are proud and excited to have built our app in React Native. We hope these tips can help you smooth out some of the rougher patches of utilizing an exciting new technology. You can also read more about my team’s product and testing strategies if you’re interested.
Thanks for reading, and please contact me at ilana.sufrin@refinery29.com with any questions.
