15 Things to Consider When Setting Up a React Native App
Libraries and tools you should consider for your next React native app setup.
React native has revolutionized the mobile app development process, especially after hybrid mobile app development like Phone-gap, Ionic or other web-based mobile app development.
React Native is not sufficient if your aim is to develop a scalable and maintainable production app. You need to set up the project with various widely used npm packages built by the awesome open source community, which will help in accelerating the development process.
In this post, we will discuss various libraries and tools you should consider for your next React native app setup and I hope this will help you make the decision.
Also Read:
1. React-native base framework
If you follow React-native’s official website suggests two ways of setting up React Native, viz. Expo CLI or React native CLI. The pros and cons are as follows:
Expo CLI
✅ Quick to start writing the first screen.
✅ Quick distribution and installation of the app.
✅ Great for demo or POC apps.
🔴 Extra 20–25 MB of the size of the app.
🔴 Not recommended for long term projects. Follow this for more details.
🔴 You cannot write native code. You have to eject and reset expo configs.
React Native CLI
✅ Easy to add android and ios native code.
✅ For large scale applications.
🔴 Not easy to distribute and install the app.
🔴 You need a mac for iOS development.
2. Static typing
I, as Javascript developer slowly felt the need of strict typing for the code I write. The static type checking helps with early error detection, increases the code readability
Typescript
Typescript is an open-source programming language that is a strict syntactical superset of Javascript.
✅ Huge community and widely used in the backend and front end frameworks like NodeJs, Angular 2+, VueJs, etc.
✅ Faster than flow.
🔴 Lesser react support.
Flow
Flow is not a programming language, its just a static type checker for Javascript.
✅ Premium React support.
🔴 Facebook moving away from flow to TypeScript.
🔴 Small community.
🔴 Not rich documentation.
3. Http request client
I am assuming your app needs to call APIs and for that, we need one HTTP client. You can consider the following:
Axios
✅ A well tested and classic way of doing it.
🔴 You might need a separate library for consuming GraphQL APIs.
Graphql Appolo client
✅ One client for REST APIs and Graphql APIs.
✅ Out of the box helps in caching the data.
🔴 Not many have used in production.
4. Managing Reusable UI Components
If you’re looking for a way to reuse your code as much as possible, build easily maintainable codebase and keep a consistent UI, you’ll need to make use of cloud component hubs.
Bit.dev
✅ Continuously publish components from any codebase
✅ Easily import/install components into any repository
✅ Document and organize components, all in one place
✅ Excellent support for React Native
5. Unit testing setup
If you want your application to be more stable then quality unit testing is super important.
Jest and enzyme
✅ It is a very simple testing framework
✅ Also works with Typescript, Node, React, Angular and Vue
✅ Comes with mocking framework as well
✅ Huge community
6. State management
If your application is decent big or long term application then you would need a better strategy of managing the states and share across the components. The following options I can propose:
Redux
✅ Huge community and various pattern which is tested on the production.
✅ Time travel helps a lot during development and debugging.
🔴 Not much performant compared to state management libraries like Mobx.
Mobx
✅ Better performance.
🔴 Less scalable compared to redux.
🔴 Not a good fit for large and complex apps.
Hooks and Context API
Redux internally uses context API which was experimental API and has been released in v16.4+ for production. We can easily avoid depending on the library and avoid increasing the size of the app. The pros and cons are the following:
✅ No need to add a new library hence this helps to reduce some size of the app.
🔴 Needs planning and standard agreement among the team members.
7. Navigation
If you have more than a couple of screens then you need to define routing and navigation which is scalable and easy to maintain.
React-navigation
✅ Huge community
✅ Most of the use cases covered like name-based routing, passing data from routes, Tab navigation, authentication flows, deep linking, analytics trigger, etc.
✅ You can also use pre-defined navigation react hooks
8. Forms
The native forms in React are really not fun writing, I personally have struggled in most of the scenario, hence we need a better way of doing forms which is easy to write, maintainable and importantly developer-friendly. You can consider the following options:
Formik
✅ Huge community.
🔴 Less performant compared to react-hook-form.
React hook form
✅ Better performance compared to formik.
✅ React-hook-form is hook based, hence more developer-friendly and easy to use.
🔴 Small community.
9. Config loader
When we are working on a large and complex app, we want our app to be portable across environments, scalable, enabled for continuous deployment, hence we need a nice framework to set up our configs.
You can use react-native-config.
10. Internationalization (i18n)
React Context API
✅ Uses the context APIs from the React.
✅ Simple to use.
🔴 To use rich features like plurals or context (e.g male/female) needs custom implementation.
React i18 next
✅ Huge community and widely used.
✅ It has many rich features like plurals, context (e.g male/female), etc.
🔴 As this is an external package, it increases your app size compared to using the context API.
11. Dynamic app update
The way React native is architected, it enables us to fix the bug, or send an update directly to the user, i.e. without going through the lifecycle of packing, releasing to the app store and user updating the app. You can use Microsoft code push to do so.
12. Analytics
Analytics is really an important way to know and monitor the behavior of your customers. For most of the basic use cases, the obvious answer from my side would be Firebase google analytics. If you need support and have specific use cases like analyzing ads and its reach or you are seeking analysis in terms of marketing channel, you can consider Clever tap, Appsflyer or mix panel. Please note these need you to buy the licenses.
13. Crashlytics
Firebase crashlytics
The very famous crashlytics tool Fabric got merged with google and is known as firebase crashlytics. This is free of cost and gives a very nice report of crashes. Firebase has integration with slack as well, and you can receive real-time notifications on crashes.
14. Beta App distribution platforms
Most of the time we need to distribute the app to multiple team members or clients so that we can get early feedback before we actually publish our apps in-app store. The following are some options:
Firebase
✅ Free and comes along with a bunch of Google services like crashlytics, analytics, OCR, etc.
🔴 Setup and publishing an app may be time taking.
🔴 Currently in beta.
App center
✅ Distribution is free and comes along with a crashlytics and analytics.
🔴 Setup and publishing an app may be time taking.
Testfairy
✅ Targetted for enterprise with support.
✅ Fancy features like shake the device to report the bug and create a ticket in Jira.
✅ Automatic video record on what user flow leads to a crash/bug.
🔴 You need to buy a license.
15. Automated app signing and publishing
For any decent large team, if the team needs to distribute and publish a lot, we should automate the process which saves a lot of time and saves from human errors. You can consider the following options:
Inhouse automated pipelines
You can consider Fastlane for signing and building apk and ipa files. You can publish the app on any of the platforms mentioned in the previous section.
✅ Controlled and saves cost
🔴 Setup time is huge
🔴 Needs special skills and knowledge to set up end to end.
🔴 You need to run the pipeline on circle ci or Travis ci for building ipa or host your own mac mini for the same.
Bitrise
This is one of the easiest and quick ways of building and publish apps.
✅ Quick setup
✅ Seamless integration with firebase, slack, and other platforms
✅ Fastlane
✅ One-stop solution for building android or ios apps
🔴 Need to pay for a license
That’s all for this post I hope this was helpful.
Please share on comments if you think I missed some important pros and cons worth mentioning.
Please also let me know if you think I should have missed a better library to compare with others.
Keep on learning, keep on Reacting :)
If this article helped you, then you can buy me a coffee
