In the upcoming Code in the Woods camp we will learn how to build an app that displays real data from some server on the internet, and this will take us just a few days! In fact, most of the time we will learn about the tools, and the actual app development can be done in a few hours.
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.
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.
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.
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
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.
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!
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.
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.
Real native user interfaces
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.
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!