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.
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
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
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:
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:
then run the project by just doing:
You should now be able to see the following:
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.
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!
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.
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:
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.
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
- Android: https://play.google.com/store/apps/details?id=host.exp.exponent
- iOS: https://itunes.apple.com/us/app/expo-client/id982107779?mt=8
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. :)