EJECT! EJECT! EJECT
The ejection process is necessary for our application for a few reasons, but the immediate reason is that we want to include two native libraries. The first is react-native-vector-icons and the second is react-native-navigation. Ejection essentially allows you to take complete control of the build process. It will allow us to add these native libraries from XCode and Android Studio.
Post Ejection Pain
If there is one thing I’ve learned, managing the build and running the software becomes a much more painful process after ejecting. So when you get bogged down with errors (red screen of death), just remember you’re not alone. It sucks, there’s no way to sugar coat it.
From the command line in the root of your sports-app directory run
yarn run eject
You’ll be asked a few questions, below are my answers.
The second question, “What should your app appear as on a user’s home screen”, I typed in Sports App. For the rest of the questions, I accepted the defaults. It will crank away for a couple of minutes and you’re back at a command prompt.
Setting Up Native Environments
Running the eject command was the easy part. The hard part is getting the native development environments up and running. For iOS, you need XCode. This can be obtained via the App Store. For Android, we’re going to use Android Studio. The installations will probably take about an hour of your time.
Building in Native Environments
The eject process has created two new directories off of the app root aptly named ios and android. Respective project files are located within those folders.
Building and Running in Android Studio
Fire up Android Studio and navigate to the android folder within the project. You’ll likely be prompted numerous times for things such as this:
I usually perform the updates it suggests. The next step is to build. Select Build->Make Project. If you’re lucky, the build will succeed. If not, see my sympathy section at the end of this article.
The emulator setup is what we’re really after though. Navigate to Tools->AVD Manager.
For my purposes, I set up the Pixel 1 (the last one in the list). I’m using API 26 (Oreo). You may have to download that version if you don’t have it. After you create your virtual device, have a look at the details. This is done by clicking the down arrow at the far right of your emulator and selecting View Details.
Please note the Name with underscores and all. One of the downsides of Android is the emulator must be running when you start the application or it will fail to run. This is different from iOS where the emulator is started for you. For this, I’ve created a quick command.
emulator -avd Pixel_API_26 -dns-server 8.8.8.8 -verbose -no-snapshot
Replace the Pixel_API_26 with the name in your emulator details. I also specified a DNS address because the emulator wasn’t picking up the DNS details from my DHCP server.
The -no-snapshot option is optional but based on previous pain where the emulator or app would misbehave and all too many times clearing the snapshot and/or cold booting were the solutions, so I simply just do that every time.
Building and Running in XCode
This process seemed a lot simpler than Android Studio. Fire up XCode and navigate to the ~/projects/sports-app/ios folder and open the xcodeproj.
It’s pretty likely the app will not build because of this:
Select the top level node in your project and select the sportsapp in your targets.
You’ll see the red exclamation mark under the General tab as shown. Click the Team dropdown and select a certificate. Also make sure Automatically manage signing is checked.
After getting things right, your Signing settings should resemble this. Note: you will probably also have to change the Bundle Identifier.
Oh, but it will still fail to build. The reason why is that you also need to make the same change on the sportsappTests target. Fortunately here, you’ll just need to pick your “Team” from the dropdown.
Now run Product->Build and it should succeed.
Running Ejected App
yarn start will no longer work since Expo cannot be used. We’re left with either yarn run ios or yarn run android. For Android, you must first start the emulator as described above.
If you have successfully built the product in Android Studio and XCode, this part should just work. For most of this, I’ll be focusing on iOS, but we’ll go back and run Android and tidy things up as well.
So lets give it a go. If this succeeds, you’ve done fantastic and have lived through half of the pain. I’m going to deliver the other half in the next article when we incorporate the icon and navigation libraries.
Parting Sympathy
In my limited experience, this is the most difficult part. All the members of my team, including me, have had some hair pulling moments and I’m not always going to know the answers. Your best bet is to google it, but if you have any problems or questions, I’ll try to answer/help, but no guarantees.
Looking for an app developer?
I’m your guy! I’ve been a contract app developer for over 14 years and can help you or your company on your project. The best way to contact me and my team is via our company page. Yye Software is an application development company based in the Atlanta metro area with offices in Kennesaw.