How to add environment variables to app.json file - json

Question

I have an app.json file in my Expo project. In this file I have two API keys (labeled API_KEY below) that I'd like to hide via environment variables.
How can I go about using environment variables instead of hard coding the API keys?
app.json
{
"expo": {
"name": "Closeout",
"slug": "Closeout",
"version": "1.0.0",
"orientation": "portrait",
"privacy": "hidden",
"notification": {
"icon": "./assets/images/notification-icon.png",
"color": "#000000",
"iosDisplayInForeground": true
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"icon": "./assets/images/icon.png",
"buildNumber": "2",
"config": {
"googleMapsApiKey": "API_KEY"
}
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/icon.png",
"backgroundColor": "#000"
},
"versionCode": 5,
"useNextNotificationsApi": true,
"config": {
"googleMaps": {
"apiKey": "API_KEY"
}
},
"googleServicesFile": "./google-services.json"
}
}
}

Answer 1

I'm guessing you may have figured out a solution or tried something else by now. However, here is a solution to this issue, I hope it helps anyone facing the same challenge. This is from a typescript environment I'm implementing.
Create an app.config.ts file that overrides the content of the app.json file
import { ExpoConfig, ConfigContext } from '#expo/config';
import * as dotenv from 'dotenv';
// initialize dotenv
dotenv.config();
export default ({ config }: ConfigContext): ExpoConfig => ({
...config,
slug: 'my-app',
name: 'My App',
ios: {
supportsTablet: true,
bundleIdentifier: 'com.croon',
config: {
googleMapsApiKey: process.env.GOOGLE_CLOUD_API_KEY,
},
},
android: {
adaptiveIcon: {
foregroundImage: './assets/adaptive-icon.png',
backgroundColor: '#FFFFFF',
},
package: 'com.croon',
config: {
googleMaps: {
apiKey: process.env.GOOGLE_CLOUD_API_KEY,
},
},
},
});
Then you could leave the API entry blank on the app.json file.
{
"expo": {
"name": "Closeout",
"slug": "Closeout",
"version": "1.0.0",
"orientation": "portrait",
"privacy": "hidden",
"notification": {
"icon": "./assets/images/notification-icon.png",
"color": "#000000",
"iosDisplayInForeground": true
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"icon": "./assets/images/icon.png",
"buildNumber": "2",
"config": {
"googleMapsApiKey": ""
}
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/icon.png",
"backgroundColor": "#000"
},
"versionCode": 5,
"useNextNotificationsApi": true,
"config": {
"googleMaps": {
"apiKey": ""
}
},
"googleServicesFile": "./google-services.json"
}
}
}
Remember to install the required dependencies
Cheers!