Starting with React Native

Since I was working as React developer it was just a matter of time when I would check out React Native. My first touch with it did not go out good at all. And I am not talking about writing code, but starting demo project.

I admit. Everything was my fault. Trying to act too smart and just scanning documentation was more than enough to waste few hours. To be clear, I was trying to run “AwesomeProject” generated with react-native-cli on Android emulator on Windows. This simple task is not so simple if you are trying to use “the latest” versions.

While getting advice from a good old friend StackOverfow I came across a comment that cites official documentation stating that I need to use Android 6.0. I had it enough and went back to the roots, followed instructions to the letter, and believe it or not, everything worked just fine.

A couple of the months down the road I found myself trying to help others start with the React Native and hence this article. So, how should one start?

I found three different approaches that I am going to cover here:

1. create-react-native-app
2. react-native-cli
3. ignite-cli

Create React Native App

This should be more than enough for the beginner that wants to check basic concepts of React Native. All you need is Node on your machine and Expo client app on your device and you are ready to go. Next step is to run npm i -g create-react-native-app. Once this is done you will need to run

create-react-native-app MyReactNativeApp

.........

cd MyReactNativeApp npm start

Almost there. Start Expo on your device (ensure that your machine and device are on the same IP address) and scan QR code. Congratulations! You have just entered into the world of React Native.

So what is the catch?

Well… There are some limitations what you can do due to not building any native code. Not to worry thou, you will be able to do quite a lot, and once you need to take it up the notch you can “eject” project and create native builds. This comes with the price of having to install Xcode (for iOS) and JDK and Android Studio (for Android), besides some other requirements which differ from macOS, Windows, and Linux.

React Native CLI

One more time. Be sure to follow instructions as mentioned in the documentation. So, once you have run out of “OS-specific installations” and have you cli installed globally by running npm i -g react-native-cli, you are ready to create your first project.

react-native init MyReactNativeApp

.......

cd MyReactNativeApp

----------

react-native run-ios

------or--------

react-native run-android

It is that simple. Just be sure that you have your Android emulator running or that your device is connected, before running app for Android.

Ignite CLI

Even for Ignite, you will need to go through the same setup as for react-native-cli. Creating the project is a bit more complex than with react-native-cli. First install it globally npm i -g ignite-cli. Then let it run its magic

ignite new ILoveIgniteApp

You will be prompted with a couple of yes/no questions to let you chose what you want to install.

So, why would you choose something that seems more complex?

For starters ignite comes with a bunch of boilerplates that you can install from as easy as running ignite new MyNewAppName -b 'name of boilerplate'. Moreover, there is a number of plugins (npm packages) that are easily added by ignite. For beginners, it can be a source of learning how to organize the project. Ignite generates the code with clear instructions on how to modify the code so the app will work. For advanced users, it saves time with some copy-paste processes when adding native related dependencies, like google maps.

Conclusion

Sooner or later you will need to set up the environment, either to extend your app with native modules or to build it for AppStore or PlayStore or both. Even though you can use Expo and physical device for create-react-native-app, you can also use emulators to run your app. So do not postpone this painless, time-consuming process.

As for me, I like using create-react-native-app for trying out any non-native module related thing. When it comes to project I prefer ignite-cli since it speeds up my work. But when using a native module for the first time or playing with them, I like creating a new project with react-native-cli just to be sure I won’t miss anything that ignite will do for me.

It does not matter what approach will you chose, as long as you have chosen any.