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, along with Flutter it 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 wide variety of cases. I won't go into as much detail as my previous article, but a lot of these kind of details age poorly anyway.

Navigation

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

State

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

For mostly backend API driven stuff 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 docs are 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 likely most larger projects will 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 stuff 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. Probably you are better off with an Intel Mac until, perhaps, early 2022.