Configuring App Settings (app.json)

1. Setting App Name and Slug

Property	Values	Description
name	`"MyApp"`	The name of the app as it appears on the device home screen
slug	`"my-app"`	Unique identifier used in URLs and app store listings

Example: Basic app.json configuration

{
  "name": "MyApp",
  "slug": "my-app",
  "version": "1.0.0",
  "platforms": ["ios", "android"]
}

2. Configuring App Version

Property	Values	Description
version	`"1.0.0"`	Current version of the app as a string. Used by stores for updates.
runtimeVersion	`"1.0.0"`	Used for over-the-air (OTA) updates. Must be a string.
expo.version	`"1.0.0"`	Alternative path to version in Expo-specific config.

Example: Setting App Version

{
  "expo": {
    "version": "2.1.0",
    "runtimeVersion": "2.1.0"
  }
}

3. Setting App Icon

Property	Values	Description
icon	`string`	Path to the app icon image file. Supported formats: PNG, JPEG, WebP. Must be at least 1024x1024 pixels.
icon.background	`string`	Background color for the app icon (e.g., `#ffffff`). Only used when `icon` is a transparent PNG.
icon.tintColor	`string`	Color to tint the app icon (e.g., `#0000ff`). Used for iOS.

Example: Setting App Icon

{
  "expo": {
    "icon": "./assets/icon.png",
    "icon": {
      "background": "#ffffff",
      "tintColor": "#0000ff"
    }
  }
}

Note: On iOS, the icon is used in the App Store and as the app's launch screen. On Android, it appears in the launcher and notifications.

4. Configuring Splash Screen

Property	Values	Description
splash.image	`string`	Path to the splash screen image file (e.g., `assets/splash.png`). Must be a PNG or JPG.
splash.resizeMode	`'contain' \| 'cover' \| 'stretch'`	How the splash image is resized to fit the screen. Default is `'contain'`.
splash.backgroundColor	`string`	Background color of the splash screen in hex or named color (e.g., `#ffffff`).
splash.tintColor	`string`	Color of the status bar on iOS (e.g., `#000000`). Only affects iOS.

Example: Splash Screen Configuration

{
  "expo": {
    "splash": {
      "image": "assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff",
      "tintColor": "#000000"
    }
  }
}

Note: On Android, the splash screen is shown until the app's JavaScript is loaded. On iOS, it's shown until the main view is displayed.

5. Setting Orientation Mode

Property	Values	Description
orientation	`"default"`, `"portrait"`, `"landscape"`	Defines the supported orientations for the app. Defaults to `"default"`, which allows all orientations.

Example: Setting Orientation to Portrait

{
  "expo": {
    "orientation": "portrait"
  }
}

Note: Orientation settings are applied at build time and may not dynamically change during runtime.

6. Defining Color Scheme

Property	Values	Description
scheme	`"light"` \| `"dark"` \| `"automatic"`	Defines the color scheme for the app. `"automatic"` follows system settings.

Example: Setting Color Scheme

{
  "expo": {
    "scheme": "automatic"
  }
}

Note: The scheme property is supported in Expo SDK 49 and later.

7. Configuring iOS Settings

Property	Values	Description
ios.bundleIdentifier	`string`	The unique identifier for the iOS app bundle. Required for publishing.
ios.buildNumber	`string`	The build number for the iOS app. Should be incremented for each release.
ios.infoPlist	`object`	Custom values to add to the iOS app's Info.plist file.
ios.config	`object`	Configuration options specific to iOS, such as permissions or capabilities.

Example: Setting iOS Bundle Identifier and Build Number

{
  "expo": {
    "ios": {
      "bundleIdentifier": "com.example.myapp",
      "buildNumber": "1.0.1"
    }
  }
}

Example: Adding Custom Info.plist Values

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "This app uses the camera to scan QR codes."
      }
    }
  }
}

8. Configuring Android Settings

Property	Values	Description
android.package	`string`	Unique identifier for the Android app. Required.
android.versionCode	`number`	Version code used by the Android package manager. Must be incremented for each release.
android.permissions	`string[]`	List of Android permissions required by the app. Example: `["CAMERA", "ACCESS_FINE_LOCATION"]`
android.config	`object`	Android-specific configuration options. Example: `{ "googleMaps": { "apiKey": "..." } }`
android.icon	`string`	Path to the Android app icon (e.g., `./assets/icon.png`). Must be a PNG.
android.splash	`object`	Splash screen configuration. Example: `{ "image": "./assets/splash.png", "resizeMode": "contain" }`

Example: Android Settings in app.json

{
  "expo": {
    "android": {
      "package": "com.example.myapp",
      "versionCode": 1,
      "permissions": ["CAMERA", "ACCESS_FINE_LOCATION"],
      "config": {
        "googleMaps": {
          "apiKey": "AIzaSy..."
        }
      },
      "icon": "./assets/icon.png",
      "splash": {
        "image": "./assets/splash.png",
        "resizeMode": "contain"
      }
    }
  }
}

Note: The versionCode must be incremented with each release to the Google Play Store.

9. Setting Web Configuration

Property	Values	Description
web.build.output	`static`	Output directory for the built web app.
web.build.publicUrl	`/`	Public URL to serve the app from.
web.build.distDir	`dist`	Directory where the built files are stored.
web.build.webpackConfig	`function`	Function to customize the Webpack config.
web.build.babel	`object`	Babel configuration for web builds.

Example: Custom Webpack Configuration

{
  "web": {
    "build": {
      "webpackConfig": (config) => {
        config.resolve.alias["@"] = "./src";
        return config;
      }
    }
  }
}

Note: The web.build.webpackConfig property allows you to modify the Webpack configuration used for building your Expo app for the web. This is useful for customizing how assets are handled or adding custom plugins.

10. Configuring Plugins

Plugin	Configuration	Description
expo-constants	`"plugins": ["expo-constants"]`	Provides access to app constants like version, name, and build number.
expo-font	`"plugins": ["expo-font"]`	Enables loading custom fonts in the app.
expo-notifications	`"plugins": ["expo-notifications"]`	Handles push notifications and local notifications.
expo-splash-screen	`"plugins": ["expo-splash-screen"]`	Manages splash screen configuration and behavior.

Example: Adding a Plugin

{
  "expo": {
    "plugins": [
      "expo-constants",
      "expo-font"
    ]
  }
}

Note: Plugins must be added to the plugins array in app.json or app.config.js.

11. Setting Extra Metadata

Property	Description	Values
expo.extra	Custom metadata to include in the app configuration	Object containing key-value pairs

Example: Setting Extra Metadata

{
  "expo": {
    "extra": {
      "apiUrl": "https://api.example.com",
      "version": "1.0.0"
    }
  }
}

Note: The extra field is merged into the app configuration at build time and can be accessed at runtime using Expo.Constants.expoConfig.extra.

12. Configuring Deep Link Scheme

Property	Values	Description
scheme	`exp://`	Defines the deep link scheme used to open the app from external sources.
scheme	`myapp://`	Custom scheme for deep linking to specific app features or content.

Example: Setting up a Custom Deep Link Scheme

{
  "expo": {
    "scheme": "myapp&#65279;://"
  }
}

Note: The scheme must be unique to your app and follow the format yourappname://.