Thoughts and Discoveries about building a React Native application Just me showing the product, in the background If you’ve read my last 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. piece 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. _@rajat1saxena created Calculator using Expo_expo.io Calculator on Expo 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 way. create-react-native-app 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 command. create-react-native-app This actually creates an project which is 100% JS and does not support loading native modules in your iOS or Android apps. Though you can always . Expo 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 will be sufficient enough and you don’t need to install any of the recommended IDE and their corresponding heavy tooling on your system. create-react-native-app 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. . Once the build is complete, the bundles are uploaded to CloudFront and you get a unique URL for your app. Disclaimer : I don’t really know why there is a need to build two separate bundles when the underlying JS code is same 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? you can get and files, which you can upload to the respective app store. Of-course .apk .ipa 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 or file, which you can upload to the app stores. .apk .ipa 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 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. react-native 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: _react-native-calculator - A simple calculator built with React Native_github.com rajat1saxena/react-native-calculator 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…
