Testing out React Native for Mobile Development

So working in Readify has its perks. One of which is that you have 20 paid days a year where you can allocate in Continuous Learning (Professional Development). So today, I spent it on checking out React Native for Mobile Development.

I have been a Mobile Developer for quite some time now, working mostly for Enterprise applications or Line of Business Apps. I have tried various tools and practices, but the one that really caught my eye was Xamarin; mainly because of my love of C#. JavaScript is not really my favourite language to work on, but as time goes by, I keep touching it from here and there.

So let’s get started. The first thing I did was to search to my favourite search engine and look for “React Native”. I landed in this Getting Started Guide: https://facebook.github.io/react-native/docs/getting-started.html


Installation

So basically, you need to make sure that you have installed Node.js in your machine (Mac, Windows or even Linux). Once you have installed node.js, all you need to do is run the following command in your Terminal / Prompt:

npm install -g create-react-native-app In some cases, you need to have elevated privileges

NPM Install

Then once you have installed React Native to your machine. You can now start creating your React Native project by using the node commands you just installed:

create-react-native-app AppName

This might take a while for the first time, since it will download all node module dependencies. After project creation, just quickly navigate to your App Directory:

cd AppName

then run the project by just doing:

npm start

You should now be able to see the following:

NPM Start


Running on a Simulator

So let me try and Run this first on an Android Emulator. First is, open your emulator by going to your AVD / Virtual Devices and boot your Emulator.

The way I usually do this is to open Android Studio. Then open a random project then go to Tools, Android, AVD Manager.

Then go back to Terminal / Prompt where you left the project running. Type “a” followed by enter key to choose Android emulator.

In the emulator, it will install Expo (we’ll go further that one later) then asks you to Permit to Draw over other Apps.

Expo Permit Draw

After you have enabled the Draw Permission, press Back key and you will see that the terminal/prompt is bundling the application. In the simulator, you will notice that it is also loading the resources with a preloader animation on top.

Once loading finishes, you can now see your app in action!

Expo Running

Similarly, if you want to test your application on an iOS Simulator, all you need to do is just press “i” from the Terminal / Prompt. It will undergo the same process of bundling the application, installing Expo then loading the app inside the Expo container.

Expo Running

On both Android and iOS, you can toggle Expo settings by doing a Shake Gesture.


"Expo XDE" and Running on an Actual Device

At this point, I’m quite convinced why a lot are hooked in React Native. Mainly because of ease in launching your apps on a simulator. But further more, managing and testing on an actual device is also easy!

So we’ve been using Expo for a while now, and the easiest way to explain what it is, is that- it is a container/hub that renders your React Native Project. It allows you to run your apps without the need of creating new App files every time you are debugging. Which is great! If you’re familiar with Docker Hub, you will find it fascinating. Because the idea is to create Web Endpoints where the app runs on Node.js. Fascinating! It means that technically, you’re just loading a website inside an app - BUT the elements are rendered Natively. This “web endpoint” is something you can access locally (within the same network) or you can share it publicly via your Expo account.

So that is where I am going next. Since it is a Hub, they have a Desktop App (MacOS, Windows and Linux) where you can easily manage your React Native projects.

So I would recommend you to download the tools here: https://expo.io/tools

Install it to your machine.

Register for an Expo Account: https://expo.io/signup You can also use your Github account to register.

Open the Expo app on your machine and login.

Navigate to the application and you will see your Expo App dashboard:

Expo Running

From there you can basically start / restart / close your project. As well as running it on a device in Graphical manner.

Before we try to publish and test a React Native app on our device, let’s try to use a good sample.

I then bumped in with this intuitive sample: https://github.com/react-native-training/react-native-elements/tree/master/example

Clone it by doing the following command on Terminal / Prompt (that has Bash). Apply the following command on a folder you want to clone the project.

git clone https://github.com/react-native-training/react-native-elements.git

Install the dependencies by applying “yarn” on the react-native-elements/example folder.

yarn

In case yarn, is not installed on your machine. Feel free to install it first: https://yarnpkg.com/en/docs/install

Cool. Now back to Expo XDE.

Close the previous project and open the React Native Elements example project. Once opened, Publish the project so that we can access it (online) on our mobile device. Note that you don’t really need to Publish the project if your phone and machine is connected in the same network.

Next thing to do is download the Expo Client App on your mobile Device. Here is the link for

Once you have downloaded the app. Open the App. Then you can connect to the project by manually typing the Address from your Expo XDE client:

  • Local: exp://yn-igj.mjtpena.example.exp.direct:80
  • Online: https://exp.host/@mjtpena/react-native-elements-app

Or you can just simply pair using SMS / QR Code from the Share button of Expo XDE. Then once pairing is done, it will install all the bundles then goes debugging!

There you have it! You can now debug the app on an iPhone without the need of an Apple Dev Account. Similarly, Xamarin also has this approach with their Xamarin Live Player .


Where to go from Here and my Verdict

Obviously, what we have done at this point is simply just the tip of the iceberg. There are still a lot of stuff to consider in Mobile Development such as Debugging, Testing, Available templates and controls, Community Support, etc.

But I guess, React Native would really work especially on cases where you want to reuse some code from Web (React.js) and mobile through React Native. But so far, in terms of setting up the project and the environment, it is fairly easy and would give developers an ease of debugging.

But more than the Hello World, where we discuss Platform Specifics, Code Reuse Metrics, Automated Tests, CI/CD Pipeline, etc; that is probably a discussion for another day. For now, HAPPY CODING! And thank you for reading. :)