Get In Losers, We’re Going Mobile

To begin, let me preface this story by saying that I am new to programming in general, and have not once touched programming for a mobile device. The purpose of this story is really so I can learn about React Native and how to start a project with this Javascript based framework, and hopefully help others get a start on React Native.

I, like I’m sure many of you do, have a bunch of ideas in my head that would be better suited for a mobile app. So, where do I begin? There are many programming languages out there that could be used to build a mobile native app, but React Native seems a great choice. Especially since I’ve already started to learn Javascript and React.

Well, What is a Native App Anyway?

A native app is an app that is downloaded from an app store like Apple’s App Store or Google Play and is able to leverage all of the advantages of the mobile device, like running on its processor. There are also web apps that may look like a native app but are accessed through a browser and are based in HTML. You also have hybrid apps, which as the name implies, are a mix of the two. Often a native app is written specifically just for Android, or specifically just for iOS. What React Native offers is a way to write one application for both operating systems.

How Similar Is It To React?

As it turns out, pretty similar. It is an extension of React. Although, you have to keep in mind that React Native does not use HTML, and you will not be interacting with the DOM. Instead you will begin using native APIs for the most part. You will still see similar syntax and workflow, and still work with components and tags, but they are not what you are used to. So there will be a learning curve. Take a look at this simple piece of React Native code below using probably the most common component: <View>. This example creates a View that wraps two boxes with color and a text component in a row with padding.

Ok, So Where Do I start?

I’m glad you asked. Because we’re starting this journey together! React Native provides great docs on everything you need to know about the framework, like setting up your environment. I should mention that I am using a Mac for this and npm. The docs do provide instructions for installing with Yarn, as well.

Step 1 — Install the recommended CLI

React Native docs recommend installing and using a CLI called EXPO CLI. You might want to read up on EXPO since it provides built in tools for React Native. Click here for the EXPO docs. Moving on, here is the terminal command for installing EXPO CLI: [npm install -g expo-cli]

Step 2 — Initiate the project

The second command you want to run is [expo init AwesomeProject]. “AwesomeProject’’ can be replaced with whatever name you would like. Once this command is run you will be asked the following:

I just picked the first choice.

Step 3 — CD into your newly created project

Your project is basically ready! Just make sure to cd into it first.

Step 4 — Start it

While in that project file, the next command to run is [npm start]. This does some weird things…

The follow will pop up in your terminal:

And this server in you browser:

Ignore the error message

Nothing happened when I scanned the QR code. Specifically the QR reader let me know that there is “No usable data found.” But, I then chose “open iOS simulator” by pressing “i”. Another error message: “Xcode needs to be installed”. Thankfully it does then give you the option to open the App Store on your computer right to the Xcode install page. My download is taking a very long time, so you should probably just start installing it now if you haven’t already. You also will want to download it on your phone. On your phone’s app store look for Expo Go. Also, make sure your phone and computer are on the same network so everything is connected once installed.

With Expo CLI installed on my computer and iPhone I was ready to continue with my setup. I canceled out of the server (control + c) and ran npm start again. The QR code popped up again and things seemed to be correctly on my phone but eventually a new error message popped up:

In my attempt to figure out how to fix this I found a couple of things. One, that it is recommended to install Watchmen [brew install watchman] if you don’t already have it installed. For more info on Watchmen click here. Two, apparently there is a bug in the recently released version of Babel. There is a lot of talk on the forums about how to get around this issue. But, the easiest way to avoid this issue is to use yarn start instead of npm start. I am new to yarn so I cannot explain why this works but it did. To install and learn about yarn follow the instructions here.

Step 5 — Write your code

You should be all set now! You can open the App.js in your text editor which will come with some initial code to get you started. You will also have a simulator at hand that will automatically update with any saved changes to your code so you can see what your app will look like on a mobile device.

Step 6 — Learn how to write in React Native

Easier said than done. At least we got past the hurdle of learning how to start a React Native project. There are many ways to learn React Native. Pick your favorite route. If you want to play around with React Native without having to go through the set up check out Snack. It is a text editor and simulator in one. Just make sure to connect your phone to your computer to be able to use the simulator.

Conclusion

Aside from the Babel bug the installation was pretty start forward. React Native provides great docs to answer any questions you may have. And, as always, Google is your friend.