3 + 1 ways to start your React Native App

In this article, I’d like to summarize the 3 + 1 ways to start building your React Native App and compare them.

First three are listed below.

1. react-native init
2. create-react-native-app
3. expo

react native init

• Before react-native version 0.45, this was recommended to start RN project in front of react-native page. Now it has added another tab to start quickly with create-react-native-app. Downside of create-react-native-app and expo is that you should detach from their dependencies to work with react-native link which is to link the other native modules that don’t belong to them.
• Building app with react-native init will result in smaller app size because it doesn’t include existing native modules like create-react-native-app orexpo does.
• This will generate your pure react-native app project which gives you much freedom to integrate the native side.
• However, you should note that you will do much work in native side that will take much time in implementing or building native modules from other library projects in npm to make them work in your environment.
• If this is your first time working on native apps, consider using below clients.

create-react-native-app

• This cli is like hybrid of react-native and expo which actually is.
• I would recommend you to choose this project if your project don’t rely on native modules. You can eject your app to make it able to link native modules which I wouldn’t recommend with many reasons.
• Representatively, you will have to manage all the native dependencies yourself based on CRNA (aka creat-react-native-app) project which will be more difficult later on than just starting from react-native init project. Also, react-naitve-git-upgrade or react-native upgrade may not work as expected in ejected project which you may use to support newer version of react-native.
• Therefore, if you want to give a try for react-native for the first time, just go for it. I believe if you become more expert in react-native, you’ll not try this one anymore.
• Also, since create-react-native-app doesn’t have any seperate documentations like react native or expo, this will confuse you to read and implement yourself. What may confuse you using this is that it doesn’t have all the libraries that expo has implemented in its doc.
• This one will be nice if you want to make your web app to native app.

expo

• To start your project with expo, I highly recommend you to read expo docs first. Especially read what’s in SDK API REFERENECE.
• Check if it has all your requirements to develop your app. Do you want in-app-purchase in your project? Do you want video?
• If expo has all your requirements and if you use some native modules, I recommend you to try this one. In other words, if you think you don’t have to detach (aka eject in CRNA) your app from expo, try it out.
• If you think you need to detach from your expo app to fill your requirements, just don’t give up at the first time. Because even tough you may take some test and trial times to get used to with expokit (aka detached expo app) environment, it may save much time in developing other native modules that you may need.
• If you feel like you are needing more than 3 to 4 native libraries in expo that react-native doesn’t have, expo maybe useful to you because it manages upgrading native modules to newer react-native version as well as new android and ios version that may fail your builds during developement.
• I’ve experienced all of the above three environments including eject app from CRNA and expokit. Expokit is not a primarily supported environment from expo. However, I’ve felt quite reliable using it these days.
• I’ve wrote many posts in expo forums before days because expokit failed my build sometimes. However, it’s been quite reliable from sdk 26.
• Downside of using this one is your app size. Expo has quite many libraries that you might not need in your production which increases your app size dramatically. Also, expo is keep getting bigger and bigger as it’s been upgraded. However, don’t worry too much because I think it won’t get that much bigger than it is today.
• I’ve tested expo app to check how much it increases in size of my app. It resulted in around 23mb for android and 30mb for ios. If you don’t care about this much capacity, go install exp which stands for expo client.

I’ve just introduced you three ways to implement app with react-native. Then what is +1? What is one more thing?

It is react-native or expo app built with dooboo-cli which was made just for me. I’ll share this in here. I’m keeping it up to date to newer version of react-native or expo. It also has some basic commands that generates template to create components.

Why is this useful?

If you start your project with react-native or expo, you will feel like yourself standing on the dessert because like in react, you need more stable javascript libraries that will help your life easier. This is reason why there are so many boilerplates in github for react-native and expo. Also there isn’t built in navigator unlike other frameworks. In addition to building application, you need safer programming language rather than javascript. This is why google use typescript in angular2 framework and also made dart language.

• Therefore, I’ve done all that in dooboo-cli. They are all written in typescript.
• React App with typescript is based on repo.
• React Native App with typescript is based on repo.
• Expo App with typescript is based on repo.

If you go into each repo, you can see what is included in boilerplate. To summarize, react-native boilerplate contains below.

• typescript
• react-navigation
• test jest with typescript
• localization
• mobx
• example data models
• example api fetch

Thank you for reading.