Boilerplates Libraries for React Native/Expo (2024)

5 min readJan 12, 2024

Now it is the year 2024. In programming, there are always hot new shiny libraries for us to choose from; however, the hot new shiny libraries are not always flawless.

Years ago, as a web developer, I was completely clueless about how to start creating a Native app. This blog will show you how I would create a new React Native/Expo app now with my opinioned choice of libraries. If you are a new developer in React Native and do not where to start, hopefully, this blog will help you.

Component Library

For React Native component libraries, the popular ones are:

Npm trends: https://npmtrends.com/native-base-vs-react-native-elements-vs-react-native-paper

All these libraries are themeable, have good accessibility support, have good documentation, and provide a similar set of components.

react-native-elements

At the time of writing this blog, react-native-elements have the most components. However, some components, I do not see myself using it in my project, such as AirbnbRating, PricingCard, or SocialIcon.

However, I think this library also has the most flexible theming. This library allows developers to customize themes for each type of component: https://reactnativeelements.com/docs/customizing#using-themeprovider.

const theme = createTheme({
  components: {
    [themeKey]: {
      // ... props
    },
  },
});

react-native-paper

react-native-paper follows Google’s material design. If I have a website that uses material design, then react-native-paper provides good consistency.

gluestack

gluestack is utility-first, meaning components have props like margin, marginTop, fontFamily; whereas react-native-paper and react-native-elements use only one prop style.

For example, in React Native, to style a component, I have to create a style sheet:

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#0891b2',
    paddingVertical: 16,
    paddingHorizontal: 12,
    borderRadius: 5,
    alignSelf: 'center',
    width: 375,
    maxWidth: '100%'
  },
});

Then I have to apply the style to my component: <View style={styles.topContainer}>.

In native-base, I can simply add to the props of that component: <Box bg=”primary.600" py=”4" px=”3" borderRadius=”5" rounded=”md” width={375} maxWidth=”100%”>.

My opinionated choice

react-native-paper

If I am a new developer who is trying to start a new project from scratch, I would choose react-native-paper because it has the most npm downloads, so it has a big community; also it is pretty easy to use on the web.

CSS Utility

CSS utility libraries provide a list of predefined CSS classes such as flex, pt-4, text-center and rotate-90.

There is native-base mentioned above for utility-first styling; however, are there CSS utility libraries similar to tailwind or tachyons for React Native? Yes.

Libraries I used before are:

Npm trends: https://npmtrends.com/nativewind-vs-react-native-style-tachyons

My opinionated choice

small project: built-in styling, no library at all
large project: Native Wind

For small projects, built-in styling would be sufficient enough. For a large project, if my team is already familiar with Tailwind, I would choose Native Wind. I am already familiar with the Tailwind library, and I found it pretty easy to start using this library for my native project.

Navigation

Popular choices are:

Npm trends: https://npmtrends.com/@react-navigation/native-vs-expo-router-vs-react-router-native

Another library for Expo only: expo-router. This is a file-based routing convention that reminds me of Next.js.

If you are a React web developer, you are probably familiar with react-router. There is a native version of it: react-router-native; however, it is not widely used.

My opinionated choice

@react-navigation/native

This library is now almost the go-to library for React-Native navigation.

State Management

For state management, there are way more libraries to choose from, or you can also choose not to use a library at all. The popular ones are:

Redux
TanStack Query (also known as React Query)
Redux Toolkit Query ( also known as RTK Query)
React Context (built-in, no library needed)
MobX
Jotai
Recoil
XState

Npm trends: https://npmtrends.com/@tanstack/react-query-vs-@xstate/react-vs-jotai-vs-mobx-vs-react-redux-vs-recoil

My opinionated choice

Good old Redux + TansSack Query

These 2 are the most popular ones and have been out for many years. They are bulletproof and have a large community of developers.

Check out my blog post on how to do state management with Redux + TansSack Query:

State Management Nx React Native/Expo Apps with TanStack Query and Redux

There are currently countless numbers of state management libraries out there. This blog will show you how to use state…

blog.nrwl.io

Monorepo

Disclaimer: I am a developer who works for Nx, so my choice is very opinioned.

What is monorepo?

A monorepo is a single repository containing multiple distinct projects , with well-defined relationships . (https://monorepo.tools/)

If I need to have multiple React native apps or have common logics shared between a web and native app, monorepo will be a good tool.

This is also a crowded space, some popular choices are:

My super-biased opinion is @nx/react-native / @nx/expo.

For yarn workspace and Lerna, developers need to do their configuration and setup. Turborepo provides a starter app; however, it is locked to the Expo and Next.js tech stack; if developers want to use a different tech stack, they still need to do their configuration.

For new developers, @x/react-native and @nx/expo provide a good developer experience and documentation to start; nevertheless, it still gives developers flexibility on the tech stack. To start, run this command:

# react-native
npx create-nx-workspace --preset=react-native

# expo
npx create-nx-workspace --preset=expo

Summary

Here is the list of libraries to choose from when I need to create new React Native / Expo apps based on my trial and error. They are not the only choices.

Let’s build beautiful React Native apps.