React Native Setup in Late 2021

React Native is a leading, cross-platform, declarative UI framework with hot reloading. If you want to make mobile apps, it, along with Flutter, is one of my top recommendations.

React Native has been undergoing a fundamental re-architecture, but the community packages have reached a very high level of maturity. This is important because, unlike Flutter, React Native (like React) is far from a complete framework, and for nearly every use case, you will want to leverage community packages.

Here, I describe a set of basic, effective libraries that will work in a wide variety of cases. I won't go into as much detail as in my previous article, but many of these kinds of details age poorly anyway.

Navigation

React Navigation has recently reached version 6. It is polished, looks good, and supports things like light/dark mode well. It is much more pleasant to use than most navigation approaches for single platforms, yet it supports both iOS and Android well.

State

For client-side state, I'd recommend Valtio as a very good default. I'm such a big fan that I even created a Valtio tutorial. It is a remarkably friendly, powerful, and scalable state management approach. You will write a fraction of the code that something like Redux requires, yet it will also, without any manual optimization effort, likely perform better than most state libraries.

For mostly backend API-driven applications, I'd recommend React Query, or for GraphQL, Apollo.

Animations

React Native now has one of the nicest animation libraries I've seen in React Native Reanimated 2. The documentation is a bit concise, but as of version 2, it is both friendly and powerful. I created a tutorial for Reanimated 2.

TypeScript

Use TypeScript. Unfortunately, TypeScript isn't a Facebook thing, and the TypeScript template for React Native often seems to be slightly out of date. However, as of Babel 7, it is pretty easy to adopt.

UI Libraries

I personally like React Native Paper, though with React Native's StyleSheet system, it is relatively easy to create your own custom look and feel (as most larger projects will likely expect).

Expo vs React Native

Expo combines many libraries, a build system, and friendly developer tooling that makes it much easier to get started with React Native. If you have no or little native mobile experience and/or are building a smaller app, it is probably a great choice.

More Libraries

Here are a few other libraries that might be useful:

react-native-snap-carousel

Simple, fun carousels. Very little code required.

react-native-vector-icons

Easily add vector icons. Pay attention to the setup instructions, as there are a few fiddly details.

@react-native-community/async-storage

You'll probably want a simple way to save things locally.

react-native-svg

Create fully custom vector graphics.

react-native-linear-gradient

Easily add gradients.

M1 Mac?

It is a bit tricky to set up on an M1 Mac. It is important to use the ARM versions of all the Homebrew dependencies to be consistent with Xcode. Android emulator options are much more limited, and I've had weird Xcode issues. You are probably better off with an Intel Mac until, perhaps, early 2022.