React Native Projects on mac Cheatsheet

I’ve been looking into React Native development recently and by lots of trial and error and searching Stack overflow, github and Facebook’s own documentation to get it up to speed. Its not quite as straight forward to set up as a general Android Studio and Xcode set up, so I’ll drop in some links and tips. This is more of a reminder to myself but hopefully it will be of use to anyone else as well.

I’ve just finished my first app submissions online, a coin collector game. Its a simple one screen app with a giant coin on the screen. Press the coin to hear a coin collect sound. Collect enough coins and you hear a surprise sound. I have a few years experience with iOS and Android on Xcode and Android Studio (mostly on Eclipse) but almost zero experience with Javascript and absolutely none with React. So most of the content here will probably insult your intelligence.  This guide assumes you know Xcode and Android Studio, and have set up your local machine to get builds sent to and running on devices.

React Native projects end up generating runnable Xcode and Android Studio projects. The business logic and screens happen in React Native, but things like build flavours, targets, icons, etc are all done in the native IDEs. You build and test in React Native land first, before “bundle”ing the build to native projects for deployment to the stores.

I’m using mac OS 10.12 Sierra. Necessary for iOS builds. Currently React Native is at 0.45.1

Set up React Native

Follow the instructions from the main page. But when creating your own project, I never used expo or “create-react-native-app” like it says to on the first page. As I understand it, it creates a project that can run on a local server to test projects in Expo, either running on the computer, simulator or a device running expo. Whilst its probably a good way to begin to learn react native, my first goal was to get Admob ads into the project and get it out on to the stores as quickly as possible.

react-native init AwesomeProject

creates the React Native Project with ios and Android internal folders for the deployment folders.


Set up IDE

Thanks to my buddy Torben, he suggested getting set up with Visual Studio Code with the relevant plugins mentioned here. This also explains setting up the debug environment too. Microsoft clearly isnt the same company it was 10 years ago, as the editor is super fast, light and a real pleasure to use. Alternatives would be to use Sublime editor to open the entire project files, but you can debug VS Code too.


Deployment to devices and stores

This is the least documented part I have found on line, and lots of arbitrary CLI steps.

By the time you are ready to deploy, you will have noticed that when you run builds on simulator or device, a Node JS server is being run locally and the app is connecting to it for the business logic code. Great for updating code on the fly, but when you want to create your final build, you need to Deploy your code to the respective platforms


Run this line from the project directory in terminal

react-native bundle –dev false –platform ios –entry-file ./index.ios.js –bundle-output ios/main.jsbundle –assets-dest ios

Also need to change a line of code in the project to tell it to look for a local app bundle for the Javascript.

In AppDelegate.m:

  jsCodeLocation = [[RCTBundleURLProvider sharedSettingsjsBundleURLForBundleRoot:@”index.ios” fallbackResource:nil];

  //jsCodeLocation = [[NSBundle mainBundle] URLForResource:@”main” withExtension:@”jsbundle”];

You can also change the Bundle id, Icon, bundle name, etc. Don’t try to rename the project from React Native. Once you’ve init’ed with a name, I found it too much of a pain to change. You dont need to change it anyway, but it can be changed in Xcode instead.

Android Studio

Run this line from the project directory in terminal

react-native bundle –platform android –dev false –entry-file –bundle-output android/app/src/main/assets/ –assets-dest android/app/src/main/res/

Like in Xcode, Bundle Id, icon, name, etc can be customised.



Node JS Server

To list processes that are using the 8081 port  –  lsof -i :8081

Kill a process by id:   kill -9 65486

Good luck!

I finally got both Android and iOS coin collector apps uploaded to the stores for submission, so I would like to take some time and maybe write a tutorial outlining the process, including the fun with adding sound playback libraries and assets.

Share Button
No Comments

Getting back into developing StudyNWalk

Ive recently restarted work on the StudyNWalk Flashcard app that I started a few years ago. Between that time and now became a thing, and then it didn’t. At least the ‘free’ ‘serverless’ part of it. Now Google has Firebase ‘serverless’ services and I’ve decided to take the plunge.
For the StudyNWalk app, I’m looking at allowing the users to share decks of cards with other users. After a few weeks of playing with the APIs and structures, I’m very close to releasing the first version that has sharing support.
I’ve been looking at this project from an MVP standpoint, making new features as and when they are ready. Two things that have taken a back seat in this development process are UI and marketing. Of course, it’s been a while since I last worked on this app (designed for Android 4.4 in 2013) and now the general level of app design has evolved.
I even had to port the project over from eclipse to android studio, which while at least it still uses Java, the build process has completely changed. For the better, I will definitely say. Projects can now have multiple builds with Gradle and everything is a heck of a lot faster than in the eclipse days. Still, it required a bit of re-learning and adapting to get up to speed.
I’m extremely impressed with the ConstraintLayouts the template wizards want you to use now. From my previous work on iOS there finally feels like there’s a commonality between UI design concepts between the iOS and Android.

As far as the marketing side of things, I’d like to step that up as well. I’m not sure exactly what my plan will be to attempt this, but I’ll get into student mode and find out what there is to do. Since the start of this year I have regularly attended a Japanese language exchange meetup In London. Usually it degenerates into conversation in English about completely unrelated topics, but I’m sure it would be great to actually talk about studying foreign languages once in a while and see how my app might fit into that.
I’m also hoping to record some tutorial videos and integrate them into the app. The tech side of integrating this is already done, I just need to create the content.

With any luck I’ll have this on the play store in a few days.
After the functional aspects of the app are taken care of, I’ll get into UX and marketing modes. And an iOS version too.

Of course if you have any suggestions, I’d love to hear them!

Share Button
1 Comment