Just completed my first React Native app, here is what I learnt

Thoughts and Discoveries about building a React Native application

Just me showing the product, in the background

If you’ve read my last piece about React Native, you might be aware that I’ve made some bold statements about the platform. I dipped my feet in React Native last time but didn’t really write a finished product.

This time, I really went in and actually wrote a fully working calculator app, test it on my iPhone and Androids and deployed it. Try it here.

Calculator on Expo_@rajat1saxena created Calculator using Expo_expo.io

Psss! You will need to download an app to run my experience on your device.

Following are some of the things I learnt about building a React Native app, the create-react-native-app way.

1. JavaScript all the way

Although, React Native touts native modules support, if you go by the Facebook’s recommended way of creating a new React Native(RN) project, you’ll end up creating a new project using create-react-native-app command.

This actually creates an Expo project which is 100% JS and does not support loading native modules in your iOS or Android apps. Though you can always eject.

2. You won’t require XCode or Android Studio

If your app does not do anything complex with iOS/Android APIs, the project you built using create-react-native-app will be sufficient enough and you don’t need to install any of the recommended IDE and their corresponding heavy tooling on your system.

You write some JavaScript, React style, and test the app in development mode, right on your phone. It is as simple as that.

I built this project on a 10 years old laptop. It can run Android Studio, but it is slow as hell, when it does that.

3. How it actually works.

The way it works is, during the development time, your application’s JavaScript is bundled into a package and then served from a development server, which runs on your dev machine. You scan or enter the URL in Expo app and it loads up the resources.

For production, separate iOS and Android bundles are built. Disclaimer: I don’t really know why there is a need to build two separate bundles when the underlying JS code is same. Once the build is complete, the bundles are uploaded to CloudFront and you get a unique URL for your app.

You distribute this URL to your friends. When they open your app, the JS bundle which resides on CloudFront, gets served. That’s what I could make of how it is working in the background.

4. You can build standalone iOS and Android apps

Your reasons to use RN are probably code-sharing and native binaries, right? Of-course you can get .apk and .ipa files, which you can upload to the respective app store.

But I think it’s just an app wrapper which loads up some JS from CloudFront.

You kick-off the build the process in the cloud, using their servers. When the build is complete, you get a URL to download your .apk or .ipa file, which you can upload to the app stores.

And yes! you can also use your own Keystore or Distribution Certificate while building the native apps. In case you have no idea what those are, Expo can handle that for you.

5. The development is faster on the iPhone

I used an iPhone 6s, a Nexus 5X and and a Moto-G (1st gen) for development. Although, Nexus 5X and iPhone 6s have competing specs, the project actually gets build faster when I use the iPhone.

The react-native packager also runs faster, in-case of loading the app on iPhone. I don’t know why is that but that’s what I’ve discovered.

The “Shake-to-reveal Developer Menu” didn’t work on Moto-G (Android Lollipop) but worked on Nexus 5X (Android 7.1). Same is the case for debugger-ui.

So, there you go guys. In-case you have more questions, feel free to leave a comment on this post, I’ll try my level best to answer that.

Additionally, I’ve also open-sourced the app, for others to see. I’ve plans to do a short video/text tutorial about how to build such an app. So maybe, you might want to follow me if you are interested in getting updates about the same.

The source code is here:

rajat1saxena/react-native-calculator_react-native-calculator - A simple calculator built with React Native_github.com

If you liked this post, kindly recommend it to your network and follow me for more posts like this one. You should also subscribe to my YouTube channel, if you like developing digital things.

Twitter|YouTube|Rayn Studios

Till next time…