Introduction
React Native is a very popular framework for building native mobile applications. Just as React, React Native is unopinionated so you will have to make a lot of implementation decisions. In this article, we will look into what is the best way to build an app depending on your needs.
1. Bootstrap
There are several options to start a new project in React Native:
React Native CLI
This is the standard tool to create a React Native application.
✅ Pros:
- Highly customizable. It creates two separate applications, one for iOS and one for Android. These are native applications so if you want, you can change the native code.
- You can upgrade to the latest React Native version at any time.
- There are no limitations, so you can choose what works best for you.
❌ Cons:
- The initial setup is a bit complicated. You will need to configure Xcode and Android Studio.
- Hard to update to a new version of React Native as it requires changes in the native code.
- You don't get much out of the box.
Expo CLI
Expo is a set of tools built around React Native. It is similar to create-react-app and it has a lot of features.
✅ Pros:
- The easiest way to get started. No native code.
- Lots of features out of the box(Camera, OTA updates, Push Notifications, and many more).
- Easy to test on a real device.
❌ Cons:
- There are some limitations.
- Unless you eject, you cannot change the native code.
- When a new version of React Native is released, you will have to wait until Expo releases a compatible version.
Conclusion: There are plenty of cases where it makes sense to use Expo, especially if you are new to React Native. Personally, I think it is a great tool, but it also adds a new layer of complexity. It is worth noticing that you can anytime eject from Expo and have full access to the underlying native projects.
2. JavaScript or TypeScript
TypeScript is a language that extends JavaScript, adding type definitions.
Both React Native CLI and Expo CLI have TypeScript templates.
# React Native CLI
npx react-native init MyApp --template react-native-template-typescript
# Expo. Select TypeScript template.
expo init MyTSProject
Sometimes you will feel that TypeScript slows you down. This is especially because many packages do not have type definitions. But TypeScript is becoming more and more popular and this will be a non-issue in the future. The advantage of using TypeScript is that you catch more errors at compile-time and you also get better code completion.
Conclusion: If you are building a small app it probably doesn't make sense to use TypeScript. For medium and big applications I would definitely use TypeScript from the beginning.
3. Classes vs Functional Components
I see lots of people asking on Stackoverflow whether they should use class based components or functional components and hooks. I will not go into detail here because it is a complex topic, but Dan Abramov explains the benefits of using hooks in this video.
Conclusion: I like to build all my project using functional components and hooks. This is a trend that I see in many new codebases and tutorials. If you feel like using classes, don't worry, there are no plans to remove classes from React.
4. State Management
This is HUGE and can have a big impact on development. State management refers to the way you share data across your application. In React, every component can have its own state and data can be passed from a parent component to a child component through props. There is no easy way to pass data between two components which are not in the parent->child relationship. There are many libraries that are trying to resolve this problem, the most popular being Redux.
React 16.3 introduced Context which when combined with hooks can result in a powerful pattern for state management.
Make sure you check React State Museum. Here you can find the implementation of a Packing List App using different state management libraries.
Conclusion: If you are building a simple application you might not need a library like Redux or MobX. They require a lot of boilerplate code and will add a layer of complexity to your app. But if you are going to build a big app, with a lot of data fetching and manipulation and asynchronous actions, make sure you choose the right tool. Redux is still pretty popular, but you should definitely check MobX(especially MobX State Tree).
5. UI kit
An UI kit gives you a set of styled UI components which can help you to build your app faster. There are some popular kits out there :
Conclusion: It is really handy to use an UI kit and get out of the box components like Footer, Header, or Menu. But I can't stress enough how important is to choose an actively maintained library.
6. Styling
With React Native you style your application using JavaScript. Every core component accepts a style property. However, inline styles are not recommended since they make the code harder to read.
Stylesheet is a CSS Stylesheet abstraction that lets you move styles away from the render function.
Two powerful libraries are styled-components and emotion. They are similar and both are compatible with React Native.
Conclusion: Unlike the web, there are only a few popular options to style React Native applications. It is bad practice to use inline styles so I highly recommend choosing between Stylesheets and Styled Components.
7. Authentication
Most modern apps use some form of authentication. Many applications implement social login(login with Google, Facebook, Apple, or something similar) as it is a fast and secure way to handle authentication.Expo can be used to login to many providers. Other popular solutions are Firebase Authentication and AWS Amplify Authentication.
If you are going to implement authentication against your own backend, you will probably need to persist a JWT or a similar token. Keep in mind that Async Storage is not secure and a better option is to use React Native Keychain.
Conclusion: If social login is suitable for your needs, I definitely recommend it since it makes your life easier. I personally find Firebase really easy to use. There is also a package that bring Firebase support to React Native.
Summary
This is where we will stop for now.
In the second part of this article, we will discuss Push Notifications, OTA updates, analytics, and many other important features you should definitely add to your app.
Top comments (7)
Great article bro, for the number one, about Boostrap react native, i recommend for you'll guys that still planning to create the new react native app, consider check this post about react native boilerplate. dev.to/handipriyono/react-native-b...
you mean 2020 instead 2021 ?
Well, 2020 is almost over. I don't see anything big coming into React Native until the end of the year. If you plan to build an app in the following months, all the things that I discussed here will still be relevant.
Bold of you to assume that we'll be entering 2021.
Haha. I hope 2021 will be better...
he gave the event of high probability.
he might still be wrong -:)
Very impressive!!!