Es/mapbox token

.gitignore

@@ -78,6 +78,7 @@ buck-out/
 # Private env variables
 .env
 .bitrise.secrets.yml
+env.js
 
 # nodejs-mobile assets generated by build script
 # TODO: somehow modify gradle build scripts so that these can be stored in

bitrise.yml

@@ -323,6 +323,11 @@ workflows:
           inputs:
             - npm_version: ""
             - command: run build:translations
+      - [email protected]:
+          title: Build environment variables
+          inputs:
+            - npm_version: ""
+            - command: run build:env
       - [email protected]:
           title: Set version name & code
           inputs:

package.json

@@ -16,6 +16,7 @@
     "android-no-backend-rebuild": "react-native run-android --variant=appDebug --appIdSuffix=debug",
     "android-storybook": "react-native run-android --variant=storybookDebug --appIdSuffix=storybook.debug",
     "android-icca": "RN_SRC_EXT=icca react-native run-android --variant=iccaDebug --appIdSuffix=icca.debug",
+    "build:env": "node ./scripts/build-env.js",
     "build:backend": "./scripts/build-backend.sh",
     "build:intl-polyfills": "node ./scripts/build-intl-polyfills.js",
     "build:translations": "node ./scripts/build-translations.js && npm run build:intl-polyfills",

scripts/generate_env.js

@@ -0,0 +1,34 @@
+const fs = require("fs");
+const path = require("path");
+
+// Path to your .env file
+const envPath = path.resolve(__dirname, "../.env");
+
+// Read the contents of the .env file
+const envFileContent = fs.readFileSync(envPath, "utf8");
+
+// Split the file contents into lines
+const lines = envFileContent.split("\n");
+
+// Create an object to hold the environment variables
+const envVariables = {};
+
+// Iterate over each line and set environment variables
+lines.forEach(line => {
+  // Skip empty lines and comments
+  if (line.trim() !== "" && !line.startsWith("#")) {
+    // Split the line into key-value pairs
+    const [key, value] = line.split("=");
+    // Set the environment variable in the object
+    envVariables[key.trim()] = value.trim();
+  }
+});
+
+// Convert the object to a string representation
+const envString = JSON.stringify(envVariables, null, 4);
+
+// Write the environment variables to a JavaScript file
+const outputPath = path.resolve(__dirname, "../env.js");
+fs.writeFileSync(outputPath, `export default ${envString};`, "utf8");
+
+console.log("Environment variables injected into env.js");

src/frontend/hooks/useMapAvailability.ts

@@ -4,12 +4,12 @@ import MapboxGL from "@react-native-mapbox-gl/maps";
 
 import api from "../api";
 import { normalizeStyleURL } from "../lib/mapbox";
-import config from "../../config.json";
+import env from "../../../env";
 
 /** URL used for map style when no custom map and user is online */
 export const onlineStyleURL = normalizeStyleURL(
   MapboxGL.StyleURL.Outdoors + "?" + Date.now(),
-  config.mapboxAccessToken
+  env.MAPBOX_ACCESS_TOKEN
 );
 
 export type MapAvailability = "unknown" | "available" | "unavailable";

src/frontend/sharedComponents/Map/MapView.js

@@ -13,9 +13,9 @@ import type { LocationContextType } from "../../context/LocationContext";
 import type { ObservationsMap } from "../../context/ObservationsContext";
 import { useIsFullyFocused } from "../../hooks/useIsFullyFocused";
 import bugsnag from "../../lib/logger";
-import config from "../../../config.json";
 import { OfflineMapLayers } from "../OfflineMapLayers";
 import { UserLocation } from "./UserLocation";
+import env from "../../../../env";
 
 // This is the default zoom used when the map first loads, and also the zoom
 // that the map will zoom to if the user clicks the "Locate" button and the
@@ -38,7 +38,7 @@ Logger.setLogCallback(log => {
   );
 });
 
-MapboxGL.setAccessToken(config.mapboxAccessToken);
+MapboxGL.setAccessToken(env.MAPBOX_ACCESS_TOKEN);
 // Forces Mapbox to always be in connected state, rather than reading system
 // connectivity state
 MapboxGL.setConnected(true);