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
Xcode
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 sharedSettings] jsBundleURLForBundleRoot:@”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 index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –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.
