Boilerplates Libraries for React Native/Expo (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
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
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:
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=expoSummary
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.
- Official @nx/expo plugin: https://nx.dev/packages/expo
- Official @nx/react-native plugin: https://nx.dev/packages/react-native