Set up Expo and React Native development environment

4 min readApr 20, 2024

Last week, I had to build the development environment for React Native and Expo. This is the notes about what I did.

Background

Last week, I got a new mac at last. I had used the old mac for almost 7 years and it’s still an intel chip. I don’t have any problems about it and I can still use it. However, I had a chance to get a new mac suddenly and the price was so cheap. Then I decided to move to the new machine.
I have a lot of projects in my old mac but most of them are containerized with docker. So I wasn’t concerned to move to new one. But only React Native projects are not containerized. I thought it was good timing to move all of them to containers but I still needed to configure Xcode and Android studio by myself eventually. So I decided to just document how to build the development environment here and not spend too much time.

What I did

All I have to do is set up the followings.

Xcode -> For iOS development
Android Studio -> For Android developmnet
Node.js -> For React Native
Ruby -> For Fastlane and CocoaPods

First of all, I installed the Xcode and Android studio.

‎Xcode

‎Xcode includes everything developers need to create great applications for Mac, iPhone, iPad, Apple TV, Apple Watch…

apps.apple.com

Download Android Studio & App Tools - Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps…

developer.android.com

Then I followed the official React Native docs. The docs explains pretty much.

Setting up the development environment · React Native

This page will help you install and build your first React Native app.

reactnative.dev

Apart from that, I needed to set up Ruby version because I use CocoaPods to manage iOS packages and Fastlane to build/submit app to Apple and Google. I know ESA is a common and useful tool for the purpose but I still use Fastlane because I’m more familiar with it.

Building Node.js and Ruby environment is quite easy. There are version files and set the target version according them. In my environment, I use nodenv and rbenv . So practical commands are like below.

# Install node v20.12.2
nodenv install 20.12.2
nodenv local 20.12.2
# Install node modules
yarn

# Install ruby v3.3.0
rbenv install 3.3.0
rbenv local 3.3.0
# Install ruby packages
bundle install

I’m going to highlight a few things here, which I forgot to do and was stuck somehow

Firstly, I needed to set Command Line Tools by myself in Xcode. It was mentioned in the official docs but I totally forgot that I needed to do it and the error messages from React Native didn’t mention about the Command Line Tools. So it was a bit difficult to figure out what to do. I set Command Line Tools in Xcode like below.

check Xcode > settings > locations > command line tools

Secondly, I needed to install JAVA Development Kit (JDK) for Android. React Native compiles the codes to JAVA for Android so that we need the JDK for it. This time, the error messages were clear mentioning about missing JDK. So I just installed the JDK with the following commands based on the official docs

brew tap homebrew/cask-versions
brew install --cask zulu17

Thirdly, there is an issue to open android emulator from React Native. What’s happening exactly is that Expo can’t open the development app in a local android enmulator when you press the a in expo start window. It’s coming from the Android Studio and the details are discussed in the GitHub issue.

Android CLI fails to launch emulator automatically when running `yarn android` · Issue #1801 ·…

Environment System: OS: Linux 5.15 Manjaro Linux CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics Memory: 2.64 GB /…

github.com

For now, we have to downgrade the Android Studio to 33.x.x or open an emulator in advance by yourself. I chose to open it in advance because the latest version is 34.x.x and I don’t want to be the major version behind only for just not opening a emulator. Currently, I haven’t seen any other issues in android studio. Hopefuly, it’ll be fixed soon.

Finally, I forgot to bring the env variables for Fastlane. Setting up Fastlane is just a one-time job at the very beginning stage. Then I totally forgot I needed to set the variables by myself. When I failed to deploy and was looking for the reason, I happened to have a look at my file tree and then I was like ‘Ahhh’. Currently, I do the submit job in my local machine but I thought I should do it somewhere in a cloud like ESA.

# iOS
export FASTLANE_ENABLE_BETA_DELIVER_SYNC_SCREENSHOTS=true
export DELIVER_USERNAME=
export APP_STORE_CONNECT_API_KEY_KEY_ID=
export APP_STORE_CONNECT_API_KEY_ISSUER_ID=
export APP_STORE_CONNECT_API_KEY_KEY=
export MATCH_KEYCHAIN_PASSWORD=

# Android
export SUPPLY_JSON_KEY_DATA=
export UPLOAD_STORE_FILE=
export UPLOAD_KEY_ALIAS=
export UPLOAD_STORE_PASSWORD=
export UPLOAD_KEY_PASSWORD=

There are still a lot of manual works to build React Native development environments. I came to want to know the best practice.

That’s it!