# Upload source maps for React Native - Docs

**CLI version requirement**

A minimum CLI version of [0.7.4](https://github.com/PostHog/posthog/releases/tag/posthog-cli%2Fv0.7.4) is required, but we recommend [keeping up with the latest CLI version](/docs/error-tracking/upload-source-maps/cli.md) to ensure you have all of error tracking's features.

**React Native Web**

If you are using React Native Web, ensure source maps are generated

Terminal

PostHog AI

```bash
# example command
# Files are usually under the '$buildFolder/_expo/static/js/web' folder ($name.js and $name.js.map)
npx expo export --source-maps --platform web
```

Then use our standard [CLI approach](/docs/error-tracking/upload-source-maps/cli.md) to inject and upload them.

1.  1

    ## Download CLI

    Required

    Install `posthog-cli`:

    PostHog AI

    ### Npm

    ```bash
    npm install -g @posthog/cli
    ```

    ### Curl

    ```bash
    curl --proto '=https' --tlsv1.2 -LsSf https://github.com/PostHog/posthog/releases/latest/download/posthog-cli-installer.sh | sh
    posthog-cli-update
    ```

2.  2

    ## Authenticate

    Required

    To authenticate the CLI, call the `login` command. This opens your browser where you select your organization, project, and API scopes to grant:

    Terminal

    PostHog AI

    ```bash
    posthog-cli login
    ```

    If you are using the CLI in a CI/CD environment such as GitHub Actions, you can set environment variables to authenticate:

    | Environment Variable | Description | Source |
    | --- | --- | --- |
    | POSTHOG_CLI_HOST | The PostHog host to connect to [default: https://us.posthog.com] | [Project settings](https://app.posthog.com/settings/project#variables) |
    | POSTHOG_CLI_PROJECT_ID | PostHog project ID | [Project settings](https://app.posthog.com/settings/project#variables) |
    | POSTHOG_CLI_API_KEY | Personal API key with error tracking write and organization read scopes | [API key settings](https://app.posthog.com/settings/user-api-keys#variables) |

    You can also use the `--host` option instead of the `POSTHOG_CLI_HOST` environment variable to target a different PostHog instance or region. For EU users:

    Terminal

    PostHog AI

    ```bash
    posthog-cli --host https://eu.posthog.com [CMD]
    ```

3.  3

    ## Inject

    Required

    **Expo 50 or later**

    Automatic source map injection works only in React Native apps using Expo 50 or later, as it relies on Expo’s built-in [debug ID](https://docs.expo.dev/versions/latest/config/metro/#source-map-debug-id) injection.

    Create or update the [metro.config.js](https://docs.expo.dev/versions/latest/config/metro/) file in your app's root directory so that it looks like this:

    diff

    PostHog AI

    ```diff
    -const { getDefaultConfig } = require("expo/metro-config");
    +const { getPostHogExpoConfig } = require('posthog-react-native/metro')
    -const config = getDefaultConfig(__dirname);
    +const config = getPostHogExpoConfig(__dirname)
    module.exports = config
    ```

4.  4

    ## Upload

    Required

    Automatic source map uploading is handled through the Gradle build process on Android and the Xcode build process on iOS.

    **EAS Updates**

    If you are using [EAS Updates](https://docs.expo.dev/eas-update/introduction/), source maps must be uploaded manually after running the update command. The automatic upload via Gradle/Xcode only runs during native builds, not during OTA updates.

    Terminal

    PostHog AI

    ```bash
    # After running `eas update` or `npx expo export --dump-sourcemap`, upload source maps from the output directory
    posthog-cli hermes upload --directory dist
    ```

    The `dist` folder is the default output directory for EAS updates.

    1.  Expo: Update the [app.json](https://docs.expo.dev/versions/latest/config/app/#plugins) file in your app's root directory.

    Expo Plugins that add modifications can only be used with [prebuilding](https://docs.expo.dev/workflow/continuous-native-generation/) and managed [EAS Build](https://docs.expo.dev/build/introduction/).

    If you can use the `posthog-react-native/expo` plugin, skip steps 2 and 3. If not, proceed with steps 2 and 3.

    Add the `posthog-react-native/expo` plugin under the `expo.plugins`.

    diff

    PostHog AI

    ```diff
    {
      "expo": {
        ...
        "plugins": [
          ...
    +     "posthog-react-native/expo"
        ]
      }
    }
    ```

    2.  Android: Update the `/android/app/build.gradle` file from your app's root directory so that it looks like this:

    diff

    PostHog AI

    ```diff
    ...
    // This must be placed directly above the following `android` block.
    +apply from: new File(["node", "--print", "require('path').join(require('path').dirname(require.resolve('posthog-react-native')), '..', 'tooling', 'posthog.gradle')"].execute().text.trim())
    android {
      ...
    }
    ```

    3.  iOS: Update the `/ios/$yourProjectName.xcodeproj/project.pbxproj` file (replace `$yourProjectName` with your project's actual name). You need to locate the `Bundle React Native code and images` build step.

    To do this through Xcode, open your project in Xcode, go to the project settings, navigate to Build Phases, select Bundle React Native code and images, and apply the changes shown below.

    diff

    PostHog AI

    ```diff
    ...
    -`"$NODE_BINARY" --print "require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'"`
    +/bin/sh `"$NODE_BINARY" --print "require('path').join(require('path').dirname(require.resolve('posthog-react-native')), '..', 'tooling', 'posthog-xcode.sh')"` `"$NODE_BINARY" --print "require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'"`
    ```

6.  ## Verify source maps upload

    Checkpoint

    Confirm that source maps are successfully uploaded to PostHog.[Check symbol sets in PostHog](https://app.posthog.com/settings/project-error-tracking#error-tracking-symbol-sets)

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better