How I go with react native in late 2022

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • Sonar - Write Clean JavaScript Code. Always.
  • ignite

    Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more!

    ignite is a fine template too. the template is preconfigured with expo and react-native-cli. but I don't agree with some of their decisions. for example, using mobx and apisause. but I always use their template to use config files, etc. the sample app is configured so well.

  • SonarQube

    Continuous Inspection

    having a code review and analysis tool in CI/CD pipeline can help developers to keep their code clean. some examples of these tools are sonarqube and embold.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • axios

    Promise based HTTP client for the browser and node.js

    unless you are developing a calculator app or something like this, you will need some network access and API requests. in my opinion, axios is the best option for networking in any js-based application. axios is fully configurable, and it's easy to use compared to fetch API (which is the react-native default way).

  • Detox

    Gray box end-to-end testing and automation framework for mobile apps

    I haven't used it yet, but it seems detox is a fine e2e testing tool for react native. something like cypress in the web. I think it's a little hard to configure, but in the end, it's really helpful.

  • TanStack Query

    🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

    react-query helps us to handle server-client caching (btw, cache revalidation is one of the hardest problems in computer engineering), and also helps us write asynchronous code like it's synchronous. I mean we can get data from an external resource (eg. API call) without writing a single try catch block, and without any manual state changing.

  • react-navigation

    Routing and navigation for your React Native apps

    react-navigation is the best option for 99.9% of cases (that 0.1% is when you need to integrate react native with native code). it provides different navigation strategies, like stack, drawer, tab, etc.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    There's another option that I haven't used yet, but I think that it's a great option. nativewind brings tailwindcss to react-native. some other libraries try to do the same, but I think nativewind looks better than the others.

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  • react-native-navigation

    A complete native navigation solution for React Native

    another option is react-native-navigation which I haven't used yet but as the document says:

  • starter-workflows

    Accelerating new GitHub Actions workflows

    since my remote code repository is github, the best way to handle CI/CD pipeline is github actions. using this tool (or any other tool like gitlab-ci, circleci, etc), you can automate linting, testing, building, and publishing apps. github actions has great community support. its best feature is that it's free.

  • redux-toolkit

    The official, opinionated, batteries-included toolset for efficient Redux development

    redux-toolkit is the famous option for managing the global state in react-native. but most of the time, the project does not need a huge global state. the application is divided into smaller modules that have their state. also, redux-toolkit still requires more boilerplate code in comparison to its rivals. I had similar issues and recently I tried zustand on my react-native project and I enjoyed it. I will choose it for my next project as well. zustand is so small and does not need a provider or wrapper component. so it can be local to a module.

  • fastlane

    🚀 The easiest way to automate building and releasing your iOS and Android apps

    in my future projects, I want to try ms appcenter and fastlane as well. specifically appcenter looks pretty useful.

  • zustand

    🐻 Bear necessities for state management in React

    redux-toolkit is the famous option for managing the global state in react-native. but most of the time, the project does not need a huge global state. the application is divided into smaller modules that have their state. also, redux-toolkit still requires more boilerplate code in comparison to its rivals. I had similar issues and recently I tried zustand on my react-native project and I enjoyed it. I will choose it for my next project as well. zustand is so small and does not need a provider or wrapper component. so it can be local to a module.

  • bloc.js

    A predictable state management library that helps implement the BLoC design pattern in JavaScript

    there's another option that is not as practical as redux and zustand, but I like it. BLOC is a state management pattern (not necessarily a global state) that is so popular in the flutter community. this pattern is based on reactive programming and streams. Felix Angelov made bloc.js that help us to implement this pattern. as I said, it may not be a suitable option for enterprise-level react-native applications, but definately it's a cool library.

  • react-native-code-push

    React Native module for CodePush

    in my future projects, I want to try ms appcenter and fastlane as well. specifically appcenter looks pretty useful.

  • async-storage

    An asynchronous, persistent, key-value storage system for React Native.

    for most applications, AsyncStorage works fine. also, you can use it with redux-persist or persist middleware of zustand. in this way, you won't even need to touch the AsyncStorage. my first choice as a database (or just a persistor tool) is zustand and AsyncStorage. this combination can solve storage issues most of the time.

  • redux-persist

    persist and rehydrate a redux store

    for most applications, AsyncStorage works fine. also, you can use it with redux-persist or persist middleware of zustand. in this way, you won't even need to touch the AsyncStorage. my first choice as a database (or just a persistor tool) is zustand and AsyncStorage. this combination can solve storage issues most of the time.

  • NativeBase

    Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.

    UI libraries and frameworks try to solve this repetition issue by creating predefined components. unlike web UI libraries (like material UI, or mantine), react-native UI libraries are not full of ready-to-use components. most of them are incomplete in comparison to web UI libraries. but I think native-base is the best option among them. it provides theming options and a lot of reusable and configurable components. native-base overrides all react-native default components (like View, Flatlist, etc) and let us give styles attributes as props to those components and elements. I love this feature. native-base is my number one option for my react-native projects.

  • nativewind

    React Native utility-first universal design system - powered by Tailwind CSS

    There's another option that I haven't used yet, but I think that it's a great option. nativewind brings tailwindcss to react-native. some other libraries try to do the same, but I think nativewind looks better than the others.

  • react-native-reanimated

    React Native's Animated library reimplemented

    the solution is react-native-reanimated. reanimated helps us to create smooth and performant animations with minimal setup, with a lot of helpers, and is relatively easy to use. another useful library for handling gesture animations is react-native-gesture-handler which is defined as:

  • react-native-gesture-handler

    Declarative API exposing platform native touch and gesture system to React Native.

    the solution is react-native-reanimated. reanimated helps us to create smooth and performant animations with minimal setup, with a lot of helpers, and is relatively easy to use. another useful library for handling gesture animations is react-native-gesture-handler which is defined as:

  • moti

    🐼 The React Native (+ Web) animation library, powered by Reanimated 2.

    a high-level alternative to react-native-reanimated is moti. moti uses reanimated as its dependency and provides a high-level API for animations in react native. it looks like framer-motion on the web and provides similar APIs.

  • react-native-skia

    High-performance React Native Graphics using Skia

    another library that I want to try is react-native-skia which is not completely related to animations but I think this is the best section for mentioning it. it's a 2D graphical rendering engine that is popular for being used as a renderer engine in flutter. as the website says:

  • ESLint

    Find and fix problems in your JavaScript code.

    my version control tool is git and github is the platform that my source code lives on. there are some other tools like eslint (for linting and setting some rules), prettier (for having the same code style between different editors and IDEs), husky (for managing git hooks)

  • prettier

    Prettier is an opinionated code formatter.

    my version control tool is git and github is the platform that my source code lives on. there are some other tools like eslint (for linting and setting some rules), prettier (for having the same code style between different editors and IDEs), husky (for managing git hooks)

  • husky

    Git hooks made easy 🐶 woof!

    my version control tool is git and github is the platform that my source code lives on. there are some other tools like eslint (for linting and setting some rules), prettier (for having the same code style between different editors and IDEs), husky (for managing git hooks)

  • jest

    Delightful JavaScript Testing.

    There's nothing better than jest and testing-library/react-native in react-native. these tools are suitable for unit and integration tests and they have great community support, utils, and helper functions.

  • react-native-version

    :1234: Version your React Native or Expo app in a `npm version` fashion.

    for versioning builds, react-native-version beside np, is pretty helpful.

  • np

    A better `npm publish`

    for versioning builds, react-native-version beside np, is pretty helpful.

  • react-native-camera

    A Camera component for React Native. Also supports barcode scanning!

    for many years, react-native-camera was a good option for using the camera in react-native but now it's deprecated. a good option is react-native-camera-vision which includes a set of well-designed API. also this library is more optimized than react-native-camera.

  • react-native-vision-camera

    📸 The Camera library that sees the vision.

    for many years, react-native-camera was a good option for using the camera in react-native but now it's deprecated. a good option is react-native-camera-vision which includes a set of well-designed API. also this library is more optimized than react-native-camera.

  • react-native-maps

    React Native Mapview component for iOS + Android

    react-native-maps is the best option for handling location and maps in react native. you can use openstreet, google maps, apple maps, or any other tile overlay. also, it provides some good examples in its repository which covers most of the use cases.

  • react-native-biometrics

    React Native module for iOS and Android biometrics

    react-native-biometrics helps us to access functionalities like FaceID, TouchID, or any other biometric features that are available in the device. react-native-biometrics uses the device Keystore for biometric authentication. it's helpful when you develop an application that is security intensive.

  • react-native-keychain

    :key: Keychain Access for React Native

    by the way, if you want to access the native device keychain, react-native-keychain is the right tool.

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts