Making of my first cross-platform app with React Native
The first thing I do when I build an application is to deploy a “hello world” version of the app to the targeted environment.
Web has it easy — if you are not building your server from scratch, you could use heroku, firebase, etc. to push your code to the web environment with one or two lines of commands with their CLI.
Mobile is a bit more complicated than that. Running it on the simulator can be as easy as the web, but publishing the app to the store usually takes more work than the web.
My initial goal was to create a publishable, cross-platform app as quickly as possible, but I knew an app that just displays a plain “hello world” text wouldn’t stand a chance at getting published on neither of the stores. Therefore, I decided to build a simple card game app.
The process took me about two weeks, and this is a quick summary of how I build “Mad Bunny — Card Game”.
Download
The app is available on both Apple Store and Google Play. Please try it out :)
Tools
- create-react-native-app
- exp CLI(only necessary if you’d like to publish it through Expo)
- firebase (added later for scoreboard)
- redux, react-redux, redux-thunk
- (optional) Adobe programs for image and video editing
If you are planning to build an app that doesn’t require network requests, firebase is not necessary.
I used redux because I’m familiar with it, but MobX or just using React state should be sufficient if you are building a simple app.
Building
As I mentioned earlier, the goal was to create a cross-platform mobile dev-environment for myself. I really didn’t want this to be a long-term project. I initially gave it from 1 to 1.5 weeks. I ended up spending 2 weeks.
A lot of it was due to the fact that I was creating graphic assets myself including videos, images, icons, and etc. I used to work as a graphic designer, so it wasn’t really a big task for me but it did take me some time.
Designing and coding
I had to be realistic and decide on what I can achieve with React-Native. I’m not an RN expert, and there were some APIs that I had to get familiar with.
Fiddling with the library took me a couple of days to get comfortable with, but the learning curve wasn’t so steep since I’ve been writing in React for quite some time.
I was very tempted to get creative and push the framework to its limit, but I tried to avoid incorporating any computationally expensive logic (like physics, 3D, etc… ). That might have required me to write in Object-C and Java and I wouldn’t have had the app published in time.
But I still wanted the app to be somewhat polished, and the Animated library helped me tremendously. Reading through this library enabled me to build reusable and highly-configurable wrapper components.
Here’s a quick rundown on how I allocated my first week
- Brainstorming the game (25%)
- Creating mock-up graphic assets, working on game logic (35%)
- Making a skeleton app — setting up router logic, redux, etc. (20%)
- Polishing transitions, animations (20%)
Week2 —more polishing, submitting and re-submitting …
The majority of the second week was spent to figure out how to publish to the appropriate store. My old MacBook was dead and I did not want to purchase a new one so I installed a virtual machine on my PC. And then, I bought developer accounts for both Apple($100) and Google Play($25). Setting up Xcode and testing things in that environment took me about a day.
When it comes to publishing the app to the store, I’d suggest you plan more time for publishing your app on Apple store. In my experience, submitting the binary to Apple and have that ready for testflight and review usually takes 3–5 times, if not up to 10+ times longer than Google Play.
And if Apple rejects your app, you will have to go through the whole process again. Be patient with them and have some side project you can work on while you are waiting on them to review your app. For me, it took 3.5 days for Apple to approve my app.
Week 2 rundown
- Finalizing the app, more polishing on Animations (25%)
- Creating screenshots, videos, promotional texts that are required (25%)
- Building .apk .ipa and submitting to stores and get an approval (5% for Android; 45% for Apple)
Expo
I decided to go with exp standalone app for this project. When you exp build:ios or exp build:android , this will build your app and will give you a link to download the binaries. The name is a bit misleading though, this is basically an expo app that serves your JS bundle remotely.
Pros
- Since the app is serving your JS remotely, updating the app is very convenient. You just publish the app again. No re-submitting required.
- It automates lot of app configurations that you would have had to deal with Xcode and Android Studio.
Cons
- You have less control over your project settings.
App.jsonhas some options that you can play with, but it’s very basic. - Since it’s another layer on top of RN, which is a bridge between Javascript and the native code, in my honest opinion, it felt a bit bloated.
You don’t have to go with Expo if you’d like to manually configure your project, build and submit. The downside would be that you would have to learn basics of iOS and Android development, and updating the app would be more work.
Conclusion
To me, building a cross-platform app with React Native felt more advanced and smoother than building a hybrid app with Ionic or PhoneGap.
The animation felt like its properly running in 60fps, which gives a better user experience. I would definitely write my next app in React Native again.
I probably won’t use Expo next time. It was a great experience, their Q&A forum is very well maintained, and the updating the app was a breeze. But I felt like it’s inevitable to go extra mile and tweak some native codes in Objective C and Java if I want more polished result.
Given the time constraint and that this was my first time building a native app, I’m happy with the result. I think it’s pretty cool that I can target both Android and Apple App market with same code base.
Thanks for reading, and happy coding!
*Korean version of this article hasn’t been written yet*
