How to Set Up a React Native Development Environment

React Native has two common setup paths: start quickly with Expo or install the complete native toolchain for local Android and iOS builds. Choosing early prevents unnecessary downloads and configuration.

Expo or native toolchain?

Install Node.js LTS

Use nvm, fnm, or Volta so projects can pin compatible Node versions.

node --version
npm --version
git --version

Do not install a global React Native CLI; use npx to invoke the project-compatible tool.

The Expo path

npx create-expo-app@latest my-mobile-app
cd my-mobile-app
npx expo start

Scan the QR code on a device, or press a/i for an emulator or simulator. Use npx expo start --tunnel when the local network blocks discovery.

Prepare Android

1. Install Android Studio and the SDK required by the React Native version.
2. Install matching platform, build tools, platform-tools, and emulator packages.
3. Create an Android Virtual Device.
4. Configure ANDROID_HOME and add platform-tools to PATH.
5. Install the JDK required by the project's React Native release.

adb --version
adb devices
java -version
npx react-native doctor

Prepare iOS on macOS

Local iOS builds require macOS and Xcode. Open Xcode once to accept its license and install components, then install CocoaPods when required:

xcode-select -p
sudo gem install cocoapods
cd ios && pod install && cd ..

Projects using Bundler should prefer bundle exec pod install.

Create a project without Expo

npx @react-native-community/cli@latest init MyApp
cd MyApp
npm start
npm run android
npm run ios

Always check the documentation for the exact React Native release because Node, JDK, Gradle, Xcode, and CocoaPods requirements change.

Connect physical devices

• Android: enable Developer options and USB debugging, then verify with adb devices.
• iOS: select a Development Team in Xcode and trust the certificate on the device.
• Ensure the device can reach Metro; firewalls and VPNs may block development ports.

Environment variables and secrets

Expo exposes variables prefixed with EXPO_PUBLIC_ to client code. Anything bundled into a mobile app can be inspected, so never include private backend credentials.

Common problems

• For “SDK location not found,” inspect ANDROID_HOME and local.properties.
• If a device is missing, check the cable, debugging authorization, and restart ADB.
• For CocoaPods failures, use a pinned Gemfile and clear caches selectively.
• For stale Metro state, reset its cache with the CLI's supported option.

Completion checklist

1. Dependencies install from the lock file.
2. Metro starts and the app opens on an emulator or physical device.
3. react-native doctor reports no required-tool failures.
4. Node and JDK versions are documented or pinned.
5. No secret is committed or bundled in the client.

References

• React Native environment setup
• Create an Expo project