Our great sponsors
-
ignite
Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more!
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
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.
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
-
-
-
-
bloc.js
A predictable state management library that helps implement the BLoC design pattern in JavaScript
-
-
-
NativeBase
Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
-
-
react-native-gesture-handler
Declarative API exposing platform native touch and gesture system to React Native.
-
-
-
-
-
react-native-camera
Discontinued A Camera component for React Native. Also supports barcode scanning!
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
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.
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.
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).
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.
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 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.
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.
another option is react-native-navigation which I haven't used yet but as the document says:
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 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.
in my future projects, I want to try ms appcenter and fastlane as well. specifically appcenter looks pretty useful.
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.
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.
in my future projects, I want to try ms appcenter and fastlane as well. specifically appcenter looks pretty useful.
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.
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.
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.
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.
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:
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:
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.
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:
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)
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)
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)
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.
for versioning builds, react-native-version beside np, is pretty helpful.
for versioning builds, react-native-version beside np, is pretty helpful.
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.
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 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 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.
by the way, if you want to access the native device keychain, react-native-keychain is the right tool.