Expo

https://docs.expo.dev/
Admin
Expo is a framework and platform for building universal native apps (Android, iOS, web) from a...
Tokens:2,421,221
Snippets:20,096
Trust Score:10
Update:3 days ago
Show doc for...
Tokens:
Raw
### Start development server for the example app

Source: https://docs.expo.dev/more/create-expo-module

Starts the development server from within the module's example directory. JavaScript and TypeScript changes are automatically picked up by the server.

```sh
cd example
npx expo start
```

--------------------------------

### Install Codex

Source: https://docs.expo.dev/agents/codex

Install Codex, then start it from any project. For other install methods, see the Codex CLI documentation.

```sh
curl -fsSL https://chatgpt.com/codex/install.sh | sh
```

--------------------------------

### Prebuild and run example app with clean flag

Source: https://docs.expo.dev/modules/native-view-tutorial

Runs a clean prebuild and starts the example app on Android or iOS after native code modifications.

```sh
# npm
# Prebuild the example app with the --clean flag to ensure a clean build
npx expo prebuild --clean
# Run the example app on Android
npx expo run:android
# Run the example app on iOS
npx expo run:ios

# yarn
# Prebuild the example app with the --clean flag to ensure a clean build
yarn expo prebuild --clean
# Run the example app on Android
yarn expo run:android
# Run the example app on iOS
yarn expo run:ios

# pnpm
# Prebuild the example app with the --clean flag to ensure a clean build
pnpm expo prebuild --clean
# Run the example app on Android
pnpm expo run:android
# Run the example app on iOS
pnpm expo run:ios

# bun
# Prebuild the example app with the --clean flag to ensure a clean build
bun expo prebuild --clean
# Run the example app on Android
bun expo run:android
# Run the example app on iOS
bun expo run:ios
```

--------------------------------

### Create a new project with expo-widgets example

Source: https://docs.expo.dev/versions/latest/sdk/widgets

Start a new Expo project pre-configured with expo-widgets using the with-widgets example. Choose your package manager.

```sh
# npm
npx create-expo-app --example with-widgets

# yarn
yarn create expo-app --example with-widgets

# pnpm
pnpm create expo-app --example with-widgets

# bun
bun create expo --example with-widgets
```

--------------------------------

### Create a new project with expo-camera example

Source: https://docs.expo.dev/versions/latest/sdk/camera

Create a new Expo project pre-configured with expo-camera using the with-camera example. This is a quick way to start experimenting with the camera.

```sh
# npm
npx create-expo-app --example with-camera

# yarn
yarn create expo-app --example with-camera

# pnpm
pnpm create expo-app --example with-camera

# bun
bun create expo --example with-camera
```

--------------------------------

### Set alignment guide for list row separator

Source: https://docs.expo.dev/versions/latest/sdk/ui/swift-ui/modifiers

Use the alignmentGuide modifier with the 'listRowSeparatorLeading' guide to set where the separator of a List row starts. The example shows an HStack with two Text views, where the separator starts 32 points from the leading edge.

```tsx
<HStack modifiers={[alignmentGuide('listRowSeparatorLeading', 32)]}>
  <Text>A</Text>
  <Text>The separator starts 32 points from the leading edge</Text>
</HStack>
```

--------------------------------

### Example configuration with credentials

Source: https://docs.expo.dev/custom-builds/schema

Example build configuration that provides credentials to the step, enabling the use of KEYCHAIN_PATH, EXPORT_METHOD, and PROFILES in the template.

```yaml
build:
  name: Generate Gymfile template
  steps:
    - eas/checkout
    - eas/install_node_modules
    - eas/resolve_apple_team_id_from_credentials:
        id: resolve_apple_team_id_from_credentials
    - eas/prebuild:
        inputs:
          clean: false
          apple_team_id: ${ steps.resolve_apple_team_id_from_credentials.apple_team_id }
    - eas/configure_eas_update
    - eas/configure_ios_credentials
    - eas/generate_gymfile_from_template:
        inputs:
          credentials: ${ eas.job.secrets.buildCredentials }
```

--------------------------------

### Example iOS build config with eas/maestro_test expanded

Source: https://docs.expo.dev/custom-builds/schema

An expanded iOS build configuration that installs Maestro, starts the iOS simulator, installs the built app, runs Maestro tests, and uploads test artifacts.

```yaml
build:
name: Build and test (iOS, expanded)
steps:
  - eas/build
  - eas/install_maestro
  - eas/start_ios_simulator
  - run:
      command: |
        # shopt -s nullglob is necessary not to try to install
        # SEARCH_PATH literally if there are no matching files.
        shopt -s nullglob

        SEARCH_PATH="ios/build/Build/Products/*simulator/*.app"
        FILES_FOUND=false

        for APP_PATH in $SEARCH_PATH; do
          FILES_FOUND=true
          echo "Installing \"$APP_PATH\""
          xcrun simctl install booted "$APP_PATH"
        done

        if ! $FILES_FOUND; then
          echo "No files found matching \"$SEARCH_PATH\". Are you sure you've built a Simulator app?"
          exit 1
        fi
  - run:
      command: |
        maestro test maestro/flow.yml
  - eas/upload_artifact:
      name: Upload test artifact
      if: ${ always() }
      inputs:
        type: build-artifact
        path: ${ eas.env.HOME }/.maestro/tests
```

--------------------------------

### Expanded Android build config with eas/maestro_test

Source: https://docs.expo.dev/custom-builds/schema

Example of an expanded Android build configuration that manually performs the steps of eas/maestro_test, including installing Maestro, starting an Android emulator, installing the APK, running Maestro tests, and uploading artifacts.

```yaml
build:
  name: Build and test (Android, expanded)
  steps:
    - eas/build
    - eas/install_maestro
    - eas/start_android_emulator:
        inputs:
          system_package_name: system-images;android-34;default;x86_64
    - run:
        command: |
          # shopt -s globstar is necessary to add /**/ support
          shopt -s globstar
          # shopt -s nullglob is necessary not to try to install
          # SEARCH_PATH literally if there are no matching files.
          shopt -s nullglob

          SEARCH_PATH="android/app/build/outputs/**/*.apk"
          FILES_FOUND=false

          for APP_PATH in $SEARCH_PATH; do
            FILES_FOUND=true
            echo "Installing \"$APP_PATH\""
            adb install "$APP_PATH"
          done

          if ! $FILES_FOUND; then
            echo "No files found matching \"$SEARCH_PATH\". Are you sure you've built an Emulator app?"
            exit 1
          fi
    - run:
        command: |
          maestro test maestro/flow.yml
    - eas/upload_artifact:
        name: Upload test artifact
        if: ${ always() }
        inputs:
          type: build-artifact
          path: ${ eas.env.HOME }/.maestro/tests
```

--------------------------------

### Initialize e2e in your project

Source: https://docs.expo.dev/guides/using-e2e

Run the setup command in your project directory. It adds e2e dependencies and creates configuration files.

```sh
npx e2e init
```

--------------------------------

### Run example app on Android and iOS

Source: https://docs.expo.dev/modules/native-view-tutorial

Navigates to the example directory and launches the application on Android or iOS.

```sh
# npm
# Navigate to the example directory
cd example
# Run the example app on Android
npx expo run:android
# Run the example app on iOS
npx expo run:ios

# yarn
# Navigate to the example directory
cd example
# Run the example app on Android
yarn expo run:android
# Run the example app on iOS
yarn expo run:ios

# pnpm
# Navigate to the example directory
cd example
# Run the example app on Android
pnpm expo run:android
# Run the example app on iOS
pnpm expo run:ios

# bun
# Navigate to the example directory
cd example
# Run the example app on Android
bun expo run:android
# Run the example app on iOS
bun expo run:ios
```

--------------------------------

### Initialize App Intents with specific examples using --examples flag

Source: https://docs.expo.dev/versions/latest/sdk/app-intents

Use this command to select examples without the interactive prompt. The --examples flag accepts minimal, counter, restaurant, mail, or all.

```sh
npx expo-app-intents init --examples counter restaurant mail
```

--------------------------------

### curl examples for /_expo/open endpoint

Source: https://docs.expo.dev/more/expo-cli

Examples of using curl to interact with the /_expo/open endpoint: GET for iOS deep link, GET with runtime=unknown for disambiguation, and POST to launch iOS Simulator.

```sh
# Get the deep link for iOS (works over a tunnel, no Expo Go install required).
curl http://localhost:8081/_expo/open?platform=ios

# Force the disambiguation page so a device or external picker chooses.
curl 'http://localhost:8081/_expo/open?platform=android&runtime=unknown'

# Trigger an iOS Simulator launch (only works on the dev server's host).
curl -X POST http://localhost:8081/_expo/open?platform=ios
```

--------------------------------

### Open your project and start prompting

Source: https://docs.expo.dev/agents/codex

Run Codex from your project root, then describe what you want to do.

```sh
cd my-app

codex
```

--------------------------------

### Install Claude Code globally

Source: https://docs.expo.dev/agents/claude

Install Claude Code globally using the official install script. This allows you to start Claude Code from any project.

```sh
curl -fsSL https://claude.ai/install.sh | bash
```

--------------------------------

### Rebuild and run the example app

Source: https://docs.expo.dev/modules/native-view-tutorial

Clean prebuilds and runs the example application on Android or iOS using npm, yarn, pnpm, or bun.

```sh
# npm
npx expo prebuild --clean
# Run the example app on Android
npx expo run:android
# Run the example app on iOS
npx expo run:ios

# yarn
yarn expo prebuild --clean
# Run the example app on Android
yarn expo run:android
# Run the example app on iOS
yarn expo run:ios

# pnpm
pnpm expo prebuild --clean
# Run the example app on Android
pnpm expo run:android
# Run the example app on iOS
pnpm expo run:ios

# bun
bun expo prebuild --clean
# Run the example app on Android
bun expo run:android
# Run the example app on iOS
bun expo run:ios
```

--------------------------------

### Install @react-native-masked-view/masked-view

Source: https://docs.expo.dev/versions/latest/sdk/masked-view

Install the masked view library using Expo's install command. Choose the package manager that matches your project setup.

```sh
# npm
npx expo install @react-native-masked-view/masked-view
```

```sh
# yarn
yarn expo install @react-native-masked-view/masked-view
```

```sh
# pnpm
pnpm expo install @react-native-masked-view/masked-view
```

```sh
# bun
bun expo install @react-native-masked-view/masked-view
```

--------------------------------

### Compile and run example app on Android or iOS

Source: https://docs.expo.dev/modules/config-plugin-and-native-module-tutorial

Navigate to the example directory, reinstall dependencies, and compile and run the application on Android or iOS.

```sh
# npm
# Navigate to the example project
cd example

# Reinstall the dependencies
rm -rf node_modules && npm install

# Run the example app on Android
npx expo run:android

# Run the example app on iOS
npx expo run:ios

# yarn
# Navigate to the example project
cd example

# Reinstall the dependencies
rm -rf node_modules && yarn install

# Run the example app on Android
yarn expo run:android

# Run the example app on iOS
yarn expo run:ios

# pnpm
# Navigate to the example project
cd example

# Reinstall the dependencies
rm -rf node_modules && pnpm install

# Run the example app on Android
pnpm expo run:android

# Run the example app on iOS
pnpm expo run:ios

# bun
# Navigate to the example project
cd example

# Reinstall the dependencies
rm -rf node_modules && bun install

# Run the example app on Android
bun expo run:android

# Run the example app on iOS
bun expo run:ios
```

--------------------------------

### eas init examples

Source: https://docs.expo.dev/eas/cli

Examples of using eas init with different options.

```sh
eas init  	 # Create or link a project interactively

eas init --id <project-id>  	 # Link to the project with the given ID

eas init --account my-account --non-interactive  	 # Create or link @my-account/<slug> without prompts

eas init --account my-account --json --non-interactive  	 # Same, and print the result as JSON to stdout
```

--------------------------------

### useTrackingPermissions hook example

Source: https://docs.expo.dev/versions/latest/sdk/tracking-transparency

Example of using the useTrackingPermissions hook to get the permission status and request permission.

```ts
const [status, requestPermission] = useTrackingPermissions();
```

--------------------------------

### useRouter Example

Source: https://docs.expo.dev/versions/latest/sdk/router

Example of using the useRouter hook to get the imperative router object and navigate to a route.

```tsx
import { useRouter } from 'expo-router';
import { Text } from 'react-native';

export default function Route() {
 const router = useRouter();

 return (
  <Text onPress={() => router.push('/home')}>Go Home</Text>
 );
}
```

--------------------------------

### Create an SDK 58 project and open in simulator (bun)

Source: https://docs.expo.dev/workflow/ios-simulator

Use bun to bootstrap a project with SDK 58 and open it in a simulator to install the matching Expo Go version.

```sh
# bun
# Bootstrap an SDK 58 project
bun create expo --template blank@58

# Open the app on a simulator to install the required Expo Go app
bun expo start --ios
```

--------------------------------

### Install @react-native-segmented-control/segmented-control

Source: https://docs.expo.dev/versions/latest/sdk/segmented-control

Install the segmented control library using Expo's install command. The example shows npm, yarn, pnpm, and bun variants.

```sh
# npm
npx expo install @react-native-segmented-control/segmented-control

# yarn
yarn expo install @react-native-segmented-control/segmented-control

# pnpm
pnpm expo install @react-native-segmented-control/segmented-control

# bun
bun expo install @react-native-segmented-control/segmented-control
```

--------------------------------

### Prebuild and run the app

Source: https://docs.expo.dev/modules/use-standalone-expo-module-in-your-project

Prebuild your project and run the app on Android and iOS. After this, you should see "Hello world! 👋" displayed.

```sh
# npm
# Re-generate the native project directories from scratch
npx expo prebuild --clean
# Run the example app on Android
npx expo run:android
# Run the example app on iOS
npx expo run:ios

# yarn
# Re-generate the native project directories from scratch
yarn expo prebuild --clean
# Run the example app on Android
yarn expo run:android
# Run the example app on iOS
yarn expo run:ios

# pnpm
# Re-generate the native project directories from scratch
pnpm expo prebuild --clean
# Run the example app on Android
pnpm expo run:android
# Run the example app on iOS
pnpm expo run:ios

# bun
# Re-generate the native project directories from scratch
bun expo prebuild --clean
# Run the example app on Android
bun expo run:android
# Run the example app on iOS
bun expo run:ios
```

--------------------------------

### Run npm install using steps[].run

Source: https://docs.expo.dev/custom-builds/schema

The run key triggers a set of instructions. This example installs dependencies using the npm install command.

```yaml
build:
  name: Install npm dependencies
  steps:
    - eas/checkout
    - run:
        name: Install dependencies
        command: npm install
```

--------------------------------

### Install Netlify CLI and deploy website

Source: https://docs.expo.dev/router/web/api-routes

Installs the Netlify CLI globally and deploys the project to Netlify. Use netlify deploy --prod to publish directly to the production URL.

```bash
# npm
# Install the Netlify CLI globally if needed.
npm install --global netlify-cli
# Deploy the website.
netlify deploy

# yarn
# Install the Netlify CLI globally if needed.
yarn global add netlify-cli
# Deploy the website.
netlify deploy

# pnpm
# Install the Netlify CLI globally if needed.
pnpm add --global netlify-cli
# Deploy the website.
netlify deploy

# bun
# Install the Netlify CLI globally if needed.
bun add --global netlify-cli
# Deploy the website.
netlify deploy
```

--------------------------------

### eas/install_node_modules example: Install node modules

Source: https://docs.expo.dev/custom-builds/schema

Installs node_modules using the detected package manager, supporting monorepos.

```yaml
build:
  name: Install node modules
  steps:
    - eas/checkout
    - eas/install_node_modules
```

--------------------------------

### Create an SDK 58 project and open in simulator (npm)

Source: https://docs.expo.dev/workflow/ios-simulator

Use npm to bootstrap a project with SDK 58 and open it in a simulator to install the matching Expo Go version.

```sh
# npm
# Bootstrap an SDK 58 project
npx create-expo-app --template blank@58

# Open the app on a simulator to install the required Expo Go app
npx expo start --ios
```

--------------------------------

### Install @expo/vector-icons

Source: https://docs.expo.dev/tutorial/add-navigation

Installs the @expo/vector-icons library using your preferred package manager. Stop the development server prior to installation and restart it afterwards with npx expo start.

```sh
# npm
npx expo install @expo/vector-icons

# yarn
yarn expo install @expo/vector-icons

# pnpm
pnpm expo install @expo/vector-icons

# bun
bun expo install @expo/vector-icons
```

--------------------------------

### Build production simulator app and copy to directory

Source: https://docs.expo.dev/more/expo-cli

Combine --configuration Release with --device generic and --output to create a production simulator build and copy the .app bundle to a specific directory.

```sh
npx expo run:ios --configuration Release --device generic --output ./build
```

--------------------------------

### useSegments Example

Source: https://docs.expo.dev/versions/latest/sdk/router

Example of using the useSegments hook to get the current route segments. The segments are not normalized and match the file path.

```tsx
import { Text } from 'react-native';
import { useSegments } from 'expo-router';

export default function Route() {
  // segments = ["profile", "[user]"]
  const segments = useSegments();

  return <Text>Hello</Text>;
}
```

--------------------------------

### Create a new TV project with the TV example

Source: https://docs.expo.dev/guides/building-for-tv

Use these commands to create a new Expo project preconfigured for TV using the with-tv example. Choose the command for your package manager.

```sh
# npm
npx create-expo-app MyTVProject -e with-tv

# yarn
yarn create expo-app MyTVProject -e with-tv

# pnpm
pnpm create expo-app MyTVProject -e with-tv

# bun
bun create expo MyTVProject -e with-tv
```

--------------------------------

### Application.getInstallReferrerAsync()

Source: https://docs.expo.dev/versions/latest/sdk/application

Gets the referrer URL of the installed app with the Install Referrer API from the Google Play Store. This method is only available on Android.

```APIDOC
## Application.getInstallReferrerAsync()

### Description
Gets the referrer URL of the installed app with the [`Install Referrer API`](https://developer.android.com/google/play/installreferrer) from the Google Play Store. In practice, the referrer URL may not be a complete, absolute URL.

### Supported Platforms
Android

### Returns
`Promise<string>`

A `Promise` that fulfills with a `string` of the referrer URL of the installed app.

### Example
```ts
await Application.getInstallReferrerAsync();
// "utm_source=google-play&utm_medium=organic"
```
```

--------------------------------

### Example fingerprint.config.js configuration

Source: https://docs.expo.dev/versions/latest/sdk/fingerprint

Example fingerprint.config.js file showing how to set sourceSkips and preset options. Assumes @expo/fingerprint is installed as a direct dependency.

```js
/** @type {import('@expo/fingerprint').Config} */
const config = {
  // Uncomment to switch presets (the default is 'balanced'). See FingerprintPreset for the options.
  // preset: 'strict',
  sourceSkips: [
    'ExpoConfigRuntimeVersionIfString',
    'ExpoConfigVersions',
    'PackageJsonAndroidAndIosScriptsIfNotContainRun',
  ],
};
module.exports = config;
```

--------------------------------

### eas/use_npm_token example: Install private npm modules

Source: https://docs.expo.dev/custom-builds/schema

Configures the build environment with an NPM token to install private packages from npm or a private registry.

```yaml
build:
  name: Install private npm modules
  steps:
    - eas/checkout
    - eas/use_npm_token
    - run:
        name: Install dependencies
        run: npm install # <---- Can now install private packages
```

--------------------------------

### Start development server or export for production

Source: https://docs.expo.dev/router/web/server-headers

Use these commands to start the development server or export the web build for production. Commands are provided for npm, yarn, pnpm, and bun.

```sh
# npm
npx expo start

# Or export for production
npx expo export -p web

# yarn
yarn expo start

# Or export for production
yarn expo export -p web

# pnpm
pnpm expo start

# Or export for production
pnpm expo export -p web

# bun
bun expo start

# Or export for production
bun expo export -p web
```

--------------------------------

### Full Next.js configuration example with withExpo

Source: https://docs.expo.dev/guides/using-nextjs

Complete `next.config.js` example enabling strict mode, SWC minification, package transpilation, and forced SWC transforms.

```javascript
const { withExpo } = require('@expo/next-adapter');

/** @type {import('next').NextConfig} */
const nextConfig = withExpo({
  reactStrictMode: true,
  swcMinify: true,
  transpilePackages: [
    'react-native',
    'react-native-web',
    'expo',
    // Add more React Native/Expo packages here...
  ],
  experimental: {
    forceSwcTransforms: true,
  },
});

module.exports = nextConfig;
```

--------------------------------

### Open your project and start Claude Code

Source: https://docs.expo.dev/agents/claude

Run Claude Code from your project root to start prompting. Use this after installing the Expo plugin and signing in.

```sh
cd my-app

claude
```

--------------------------------

### Use a single step to print Hello world

Source: https://docs.expo.dev/custom-builds/schema

A build config with a single step that prints "Hello world". The dash before run counts as indentation.

```yaml
build:
  name: Greeting
  steps:
    - run: echo "Hello world"
```

--------------------------------

### Include all feature examples with --features all

Source: https://docs.expo.dev/more/create-expo-module

Generates a module containing every available feature example. This is equivalent to using the --full-example flag.

```sh
npx create-expo-module@latest my-module --features all
```

--------------------------------

### Run example app on Android and iOS

Source: https://docs.expo.dev/modules/inline-modules-tutorial

CLI commands for running the app on Android and iOS using npm, yarn, pnpm, or bun.

```sh
# npm
# Run the example app on Android
npx expo run:android

# Run the example app on iOS
npx expo run:ios

# yarn
# Run the example app on Android
yarn expo run:android

# Run the example app on iOS
yarn expo run:ios

# pnpm
# Run the example app on Android
pnpm expo run:android

# Run the example app on iOS
pnpm expo run:ios

# bun
# Run the example app on Android
bun expo run:android

# Run the example app on iOS
bun expo run:ios
```

--------------------------------

### Pedometer usage example

Source: https://docs.expo.dev/versions/latest/sdk/pedometer

Example of using the Pedometer module to check availability, get past step count, and watch current step count.

```jsx
import { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Pedometer } from 'expo-sensors';

export default function App() {
  const [isPedometerAvailable, setIsPedometerAvailable] = useState('checking');
  const [pastStepCount, setPastStepCount] = useState(0);
  const [currentStepCount, setCurrentStepCount] = useState(0);

  const subscribe = async () => {
    const isAvailable = await Pedometer.isAvailableAsync();
    setIsPedometerAvailable(String(isAvailable));

    if (isAvailable) {
      const end = new Date();
      const start = new Date();
      start.setDate(end.getDate() - 1);

      const pastStepCountResult = await Pedometer.getStepCountAsync(start, end);
      if (pastStepCountResult) {
        setPastStepCount(pastStepCountResult.steps);
      }

      return Pedometer.watchStepCount(result => {
        setCurrentStepCount(result.steps);
      });
    }
  };

  useEffect(() => {
    const subscriptionPromise = subscribe();

    return () => {
      subscriptionPromise.then(subscription => subscription?.remove());
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text>Pedometer.isAvailableAsync(): {isPedometerAvailable}</Text>
      <Text>Steps taken in the last 24 hours: {pastStepCount}</Text>
      <Text>Walk! And watch this go up: {currentStepCount}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 15,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

--------------------------------

### Browse and select an Expo example interactively

Source: https://docs.expo.dev/get-started/create-a-project

Run create-expo-app with the --example flag and no name to interactively choose from available Expo examples.

```sh
# npm
npx create-expo-app@latest --example

# yarn
yarn create expo-app --example

# pnpm
pnpm create expo-app --example

# bun
bun create expo --example
```

--------------------------------

### useLastNotificationResponse example

Source: https://docs.expo.dev/versions/latest/sdk/notifications

Uses the useLastNotificationResponse hook to get the most recent notification response. The example opens a URL from the notification's data when the response is a default action.

```jsx
import * as Notifications from 'expo-notifications';
import { Linking } from 'react-native';

export default function App() {
  const lastNotificationResponse = Notifications.useLastNotificationResponse();
  React.useEffect(() => {
    if (
      lastNotificationResponse &&
      lastNotificationResponse.notification.request.content.data.url &&
      lastNotificationResponse.actionIdentifier === Notifications.DEFAULT_ACTION_IDENTIFIER
    ) {
      Linking.openURL(lastNotificationResponse.notification.request.content.data.url);
    }
  }, [lastNotificationResponse]);
  return (
    // Your app content
  );
}
```
Tokens:
Raw