react-native

Essential tools and resources for React Native developers

fabian-grohs-423591-unsplash.jpg

When you get started using React Native, the upside is that there are many community tools and material on the internet. The downside is also that there are so many community tools and material on the internet, that you can easily get lost.

It can be hard to find tools to debug or profile how the app is working. Community UI components can come in varying degrees of quality. Some components work but are not up-to-date with the framework. Browsing through tools on the internet can take time and not end up fixing the issue at hand.

This short guide will highlight some essential tools that should be the first recourse for developers beginning to use React Native.

Basics

React Native docs and GitHub issues: the official documentation is the number one resource to start with, but also the GitHub repository is useful to read release notes (and there are quite often new releases). It is also useful to search through the issues and see if your issue has already been experienced by other people.

React docs: when building React Native apps, you'll be writing React components and it's useful to refer to its official documentation sometimes to learn to properly use lifecycle hooks, performance optimization, and when modeling your application through props and state.

DevDocs: you can combine both React and React Native documentations together at DevDocs.io, a handy webapp with aggregated documentation. It also includes documentation for JavaScript, Node.js, npm, TypeScript, Babel, Flow, Redux, Jest, which you might want to see in one place. You can also customize it to show only the tools that you'll be using.

Expo: although it's not an official RN tool, Expo is probably the quickest way to get started when building a React Native app, so it's ideal for the initial stages of a project or when collaborating with a designer. It's handy to keep the Android Expo app or iOS Expo app installed on your phone, as well as use Expo Snack (code an app in the browser!) for quick experimentations.

Community resources

React Native Navigation: the topic of navigation (managing the state and transitions between screens in your app) has been sometimes officially supported in the framework, but it has had better solutions in the community as well. Nowadays the framework still has some navigation-related components, but the wise choice is to use either React Navigation or React Native Navigation (RNN). If you can afford the time to propely setup RNN by following its documentation, it will turn out to be the best navigation solution you can find out there, with good API, platform look and feel, and responsive performance.

JS.coach: there are so many community components for React Native, that it becomes useful to have a curated list of components, with an easy way of detecting whether they support Android or iOS or both. JS.coach is such list, with a search field and sub-categories in React Native.

Awesome React Native: an alternative curated list is awesome-react-native which includes components, but also native modules, utilities, example open source projects, blog posts, conferences, etc. Search here before searching on the wild web.

Debugging and profiling

log-ios and log-android: in Web Development we are used to opening the browser's console to view debugging information. For React Native apps, you can also open the browser (shaking the device, then starting "Remote JS Debugging") to view the console. However, some logging information related to the native app is outside of JavaScript, and in those cases running react-native log-ios or react-native log-android can help. For Android, you can run just adb logcat and it will show logs on everything happening in the device, not only in your app. Read more about debugging tools in the docs.

React Devtools: you can inspect the hierarchy of UI components with React Devtools which works for both React (web) and React Native.

systrace: for profiling performance in Android applications, systrace is a tool (in the Android SDK) not so familiar to many developers, but essential. It has a rather inconvenient way of using, but once you gather profiling data, it shows a lot of important important that helps you improve the performance of your app. Read more about React Native profiling in the docs.

Learning material

Conference videos: React Native is a constantly evolving framework, and some of its internals are still not documented, so sometimes React Native conference videos (from e.g. React Native EU, ReactiveConf, Chain React) on YouTube can help gaining insight.

Egghead courses: sometimes you may want a video course where another developer guides you step-by-step in creating a real world app, so Egghead has a couple of these courses. Some of them are specific to topic, for instance, animations. You may find free videos also on YouTube, of various quality levels.

People to follow: some people in the community are influential and often send out news about the framework. Eric Vicenti is a React Native core team member at Facebook. Brent Vatne is the main developer for Expo, and overall is involved with React Native. Leland Richardson works at Airbnb with large React Native projects, and authors some libraries. Mike Grabowski is a member of React Native core team and runs a company specialized in React Native, as well as running React Native EU conferences. Emil Sjölander works on the native side (C) of React Native, Yoga. Martin Konicek previously worked on React Native internals, e.g. the bridge and often still shares some knowledge about React Native.

That should cover most of what you need to know when developing mobile apps with this framework!

6 reasons to learn React Native

React Native was created in 2015 by Facebook developers as a framework to build sophisticated mobile apps using JavaScript and React (a web framework). When it was released, it was seen as either revolutionary or naive, because so far JavaScript had been a poor choice for developing mobile apps. Today, some 3 years later, the framework and the community around have grown mature enough that it's easily a good choice for professional development of apps for Android and iOS. Let's see a couple of reasons why.

Modern way to build a mobile app

Typically, to create a mobile app, first you must make a decision between the two dominating platforms: Android or iOS. That choice will affect the tools to use, since these two platforms have entirely different software development kits (SDKs). The tooling sometimes takes minutes or hours to download and setup. After that, the first app template takes a minute to compile. Only then, will you see an app on the device and can start programming, that is, if you have learned the languages (Java for Android, ObjectiveC or Swift for iOS) and their development kits. Once you make a code change, the app needs to be recompiled. These SDKs follow an old style of application development.

With React Native, the development workflow is closer to web development. First of all, you don't need to make a choice between one platform or another. Whichever you choose, you'll download the same tools to begin with.

Then, when running one command in the terminal,create-react-native-app you will have an initial project to work on. Install it on the device, and after that you can reload the app in the same way you can reload a website, leading to shorter development cycles. This way, React Native has reinvented mobile development to be modern like web development.

JavaScript is the world's most commonly known programming language among developers, and it's the language used to develop apps in React Native. While ObjectiveC and Swift can be nice languages with interesting properties, they are outside of the comfort zone of many programmers.

Other frameworks on the same level as React Native, such as Xamarin and Flutter, utilize different and less popular languages, respectively: C# and Dart. Hence React Native is has unique qualities when it comes to popularity.

Not only is the language popular, but also the library for UI components, React, has been growing to become the most commonly known web framework. Both JavaScript and React are comfort zone technologies for a majority of programmers today.

Real native user interfaces

There are other JavaScript frameworks to build mobile apps, such as Apache Cordova and tools built on top of Cordova. These are also known as "hybrid mobile apps" frameworks, because they produce apps that are basically small websites ("WebViews") packaged as if they were actual apps. The result is not always a great user experience, even though the apps are convincing and can be used in practice.

React Native takes a different approach. The resulting apps have UI components built with the platform's official SDK, but orchestrated behind the scenes with JavaScript. This means there are no WebViews involved, and the user often cannot recognize the difference between a React Native app and one built with the platform's SDK, leading to better user experience.

Cross platform

Since JavaScript controls native Android and iOS UI components behind the scenes, it's possible for a JavaScript React component to be supported by both platforms. This gives developers some possibility to reuse code.

The framework focuses on "learn once, write everywhere", though, because not all UI components should be exactly the same for both platforms. For instance, Android and iOS have different design guidelines, which means often one Android UI component should not exist in iOS.

That said, many components can have the same look and feel on both platforms, and that's how React Native allows those to be coded just once. The convenience of using one codebase and one framework for building apps for two platforms saves development time.

Share code from browser or server

There are many frameworks that allow cross platform app development, but few that allow you to take snippets of browser code or server code and include that in the mobile app.

Since JavaScript runs in the browser and on servers (Node.js), there are thousands of libraries from npm that could be reused from one context to another. Some libraries don't make any assumption about the context they are running in, for instance, Date libraries such as Moment.js. Those could be easily utilized in the browser, in the server, and in React Native apps. This kind of universal usage of libraries is an exciting benefit of React Native.

Not a lock-in

React Native is open source (MIT license), but it's also important that it doesn't lock you into this choice in the long run. You can choose to develop only one screen of your app using React Native, while the other screens are built with the official SDKs. Or, you can develop all screens in React Native, or anything in between. It allows itself to be partially used in the project.

This creates a path for migrating away from React Native if you so wish in the future, or creates a path for you to migrate an existing app to React Native. That kind of flexibility is important for business and managers to allow developers to evolve the codebase while minimizing risk.


If you want to learn more about React Native, and how to actually start coding with it, be sure to participate in our Code in the Woods training to be held on 21st and 22nd of April. Welcome!