Skip to content

Chapter 6 of 7

Expo, Deployment, and the New Architecture

Expo is a framework and platform for React Native that provides prebuilt native modules, easier setup, OTA updates, and tools like Expo Go for quick testing on physical devices. Developers can run npx expo start and scan a QR code with Expo Go to load the JavaScript bundle over the local network. The Expo SDK is the set of native modules you import, while Expo Go is the sandbox app that bundles all SDK modules for managed projects. When projects need custom native code, libraries outside the SDK, or production-grade flexibility, the Expo Dev Client creates a custom development binary that includes the project's native dependencies.

The managed and bare workflows represent two ways of structuring an Expo project. Managed projects rely on Expo Go and config plugins to modify native configuration through app.json without exposing native directories. Bare projects generate the ios/android folders for full native control. The Expo Prebuild command can convert between workflows, and EAS Build supports both. Expo Application Services (EAS) is a suite of hosted services for building, submitting, and updating apps. EAS Build compiles apps in the cloud into signed IPA and AAB files without local Xcode or Android Studio, EAS Submit uploads built artifacts to the App Store or Google Play, and EAS Update delivers over-the-air JavaScript updates without requiring store review.

For deployment, both React Native CLI and Expo projects need to produce signed binaries. iOS deployment requires enrollment in the Apple Developer Program, a distribution certificate, a provisioning profile, and submission via App Store Connect after archiving in Xcode or running eas build:ios followed by eas submit. Android release builds run ./gradlew assembleRelease for an APK or bundleRelease for a signed AAB after configuring signingConfigs in android/app/build.gradle. Environment variables should be injected at build time via react-native-config or expo-constants extras, never hardcoded in JavaScript bundles. The new React Native architecture introduces Fabric as the rendering system using synchronous JSI calls for layout and shadow tree updates, and TurboModules for lazy-loaded, type-safe native modules, together delivering faster startup, lower memory use, and concurrent rendering compared to the legacy bridge-based architecture.

All chapters
  1. 1Foundations of React Native
  2. 2Hooks, State, and Side Effects
  3. 3Navigation, Routing, and Screen Lifecycle
  4. 4Native Features, Data, and Device APIs
  5. 5Animations, Gestures, and Performance
  6. 6Expo, Deployment, and the New Architecture
  7. 7Debugging, Testing, and Accessibility

Drill it

Reading is not remembering. These come from the React Native Mobile deck:

Q

What is the default flex direction in a React Native View container?

The default flexDirection is 'column' in React Native, which differs from the web's default of 'row'. Children stack vertically from top to bottom unless you ch...

Q

How do you make a Text component take up the full available width of its parent?

Apply style={{flex: 1}} or alignSelf: 'stretch' to the Text component. Without these, Text only wraps its content. flex: 1 grows the component to fill remaining...

Q

What is the purpose of the SafeAreaView component?

SafeAreaView renders content within device areas not covered by notches, status bars, or home indicators. It's primarily useful on iOS devices with notches and...

Q

Explain the difference between useState and useRef for storing mutable values.

useState triggers a re-render when updated and is meant for state that affects the UI. useRef returns a mutable object (.current) that persists across renders w...