Up to Date Setup Guide for Expo with EAS Cloud builds

[savigny030]

Environment

• Dev OS: pOSX 15.7.2
• @rnmapbox/maps version: 10.2.10
• React Native version: 0.76.7
• React Native Architecture: No idea
• Expo version: 52.0.40

Steps to reproduce

I think most of the stuff is not really necessary to reproduce. It's pretty simple. I can't find ANY guide on how to actually set this up in an expo project with eas cloud builds. I dont understand how the tokens should be set. I tried so many different things and I always get the error:

 (NOBRIDGE) WARN  Mapbox [warning] RNMBXOfflineModule: startLoading: error loading style pack: Mapbox access token is missing
 (NOBRIDGE) WARN  Mapbox [warning] RNMBXOfflineModule: startLoading: error loading tile region: Failed to resolve tileset descriptors: Mapbox access token is missing

i added RNMAPBOX_MAPS_DOWNLOAD_TOKEN as a secret to eas env variables.
This is my eas.json

{
  "cli": {
    "version": ">= 16.0.1",
    "appVersionSource": "remote"
  },
  "build": {
    "development-iphone": {
      "developmentClient": true,
      "distribution": "internal",
      "environment": "development"
    },
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      },
      "environment": "development"
    },
    "preview": {
      "distribution": "internal",
      "environment": "preview"
    },
    "production": {
      "autoIncrement": true,
      "environment": "production"
    }
  },
  "submit": {
    "production": {}
  }
}

This is the plugins section of my app.json:

"plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ],
      [
        "expo-secure-store",
        {
          "configureAndroidBackup": true,
          "faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data."
        }
      ],
      [
        "expo-document-picker",
        {
          "iCloudContainerEnvironment": "Production"
        }
      ],
      [
        "expo-location",
        {
          "locationAlwaysAndWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location.",
          "isIosBackgroundLocationEnabled": true
        }
      ],
      [
        "react-native-ble-plx",
        {
          "isBackgroundEnabled": true,
          "neverForLocation": true,
          "modes": [
            "peripheral",
            "central"
          ],
          "bluetoothAlwaysPermission": "Allow $(PRODUCT_NAME) to connect to bluetooth devices"
        }
      ],
      "expo-sqlite",
      "@rnmapbox/maps"
    ],

The current way it's setup is from this guide: https://github.com/rnmapbox/maps/blob/main/plugin/install.md
that is not on the Documentation Website.
The actual install guide on the Documentation Website has no information on how to setup tokens and against all other guides it says i need an access token instead of a Download token.
Maybe I'm super stupid and just can't understand the guide, but I feel like there is some undocumented stuff. I would like to contribute to the guides when i finally understand how it's set up :)

As you can see from my Stackoverflow question: https://stackoverflow.com/questions/79843950/token-setup-for-rnmapbox-maps-in-an-expo-project

Everyone seems to have a different way to set up the tokens :D

[mfazekas]

@savigny030 thanks.

1.) So Download token:
This is now deprecated. Download tokens needed to access/download the library itself, this is required only for building the app/lib not for running it. RNMAPBOX_MAPS_DOWNLOAD_TOKEN is no longer needed for accessing mapbox source code. I've updated rnmapbox.mapbox to reflect that. Some other docs might refer to that those should be cleaned up. Ideally removed, but at least should note that it's no longer needed and we don't recommend setting it.

2.) Access token:
Access token is needed to access mapbox servers during runtime. Feel free to use whatever strategy you think is the best. Use Mapbox.setAccessToken in js to set that code.