React-Native: Single day build and deploy
Last weekend a friend of mine Bevan Rudge and I set out to build our first React Native app. Neither of us had used React-Native before (or even React for that matter) but we’d heard so much about it that we had to try it.
Our goals were to:
- Learn how React Native works
- Deploy to Google Play
- Deploy to the Apple Store
- Setup push notifications for both platforms (Apple/Android)
- Create a fun app that might be somewhat interesting to a niche market
Bevan and I felt it was important to actually deploy the app because we wanted to learn how the entire process worked.
Wire framing
We quickly drafted up some wireframes. We didn’t bother with mock ups; time was of the essence so we’d freestyle that as we went along.
Getting started
Rather than go to the hassle of writing a backend, we chose to use Firebase to manage our data. Firebase is fantastic because it manages synchronization of data for you. If you’ve never used it before I thoroughly recommend checking it out.
Integrating Firebase with React-Native was a bit troublesome. At the time of writing there seem to have been some recent changes to React-Native which broke the Firebase integration. We found that the following (older) versions worked well together:
{
"name": "PhonePlate",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"firebase": "2.4.2",
"react": "15.0.2",
"react-native": "0.26.2"
}
}
To setup the project and figure how things fit together, we loosely followed the Grocery App Tutorial. Each entry would be a conversation and would like to another page where messages can be exchanged.
React
React seems very natural. It has a very well defined sequence of events, and felt very much like a Java “paint” loop to me. My somewhat naive view is that something causes an event to be triggered (page load / user clicks a button /hits submit or perhaps an ajax response returns) which causes a component’s state to change and triggers React to update the DOM in the most efficient manner it can. Components hook into the events of their children using event handlers and can trigger events in their parents. For more details on React, I recommend checking out this article by Josh Haberman. His article summarises React in this diagram:
Deploying to the Android Store
I followed the instructions in the React Native documentation to generate a signed APK and then uploaded that to the google play store. Deployment was very different to my experiences with the Apple Store, however it was straight forward. Basically you create a .keystore file and then modify your android build.gradle to reference that. There are a few build.gradle files around the place — you want the one located in android/app/
…
android {
…
defaultConfig { … }
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes
{
release {
…
signingConfig signingConfigs.release
}
}
}
…
Next I generated the key by running:
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
And then generated the signed APK. An APK is a ZIP file based on the java JAR format used to install the application on devices:
cd android && ./gradlew assembleRelease
Before I uploaded the APK, I tested on my phone to check that it ran as expected. The following command will install your APK on whichever device is running:
cd android && ./gradlew installRelease
If you need to reinstall you can completely remove your app by running:
adb -e uninstall com.phoneplate
Uploading to the play store is fairly straight forward. You need to register an account and pay your $25 developer tax to have the right to submit. Next you’ll need to create an app in the developer console. Once that’s done you can upload your app. I used sketch3 (which I can’t speak highly enough of) to make our app icon and added a description. Before you can publish an app you need to rate the app’s content and accept the terms and conditions. Unlike an iOS submission it’s very clear what you still need to do, as there are ticks beside each menu option which fill green once that section has been completed. Once all ticks are green you’re ready to publish.
Conclusion
We achieved 3 of our 5 goals. I’ve been able to message my friends (using their number plates as their identifiers) who downloaded and installed the app from the play store. We failed to deploy to the Apple Store as we ran out of time and we also didn’t setup push notifications. I wasn’t overly concerned about missing these goals as I have published iOS apps before and setting up push notifications with android isn’t too much of a stretch for my imagination. I was excited to try Google Messaging and I still don’t really understand how that all fits together. If I do decide to make the time, I might make a follow up post where I complete the 2 remaining goals.