App config: app.json, icon and splash screen

The app.json file in the project root describes the app for the system and the stores: its name on the home screen, its icon, what is shown at launch. These settings are applied at build time, not while the code runs.

Main fields

Open app.json of the blog project and change its beginning:

{
  "expo": {
    "name": "Blog",
    "slug": "blog",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "blog",
    "userInterfaceStyle": "automatic",
    "ios": {
      "bundleIdentifier": "com.example.blog"
    },
    "android": {
      "package": "com.example.blog"
    }
  }
}

Leave the other template fields as they are.

Field	What it sets
`name`	The name under the icon on the phone
`slug`	The short project name on Expo servers
`version`	The version users see in the store
`orientation`	`portrait` means vertical only
`scheme`	The link scheme, like `blog://posts/1`
`userInterfaceStyle`	Support for light and dark themes
`ios.bundleIdentifier`, `android.package`	The unique ID in the App Store and Google Play

The identifier is written as a reversed domain: com.example.blog. It cannot be changed after the first release.

The icon

The icon is a square 1024 by 1024 PNG without transparency, and its path is set in the icon field. On Android you also set an adaptive icon: a foreground and a background from which the system cuts a circle, a square or a drop shape:

{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#2563eb"
      }
    }
  }
}

Keep the important part of the image in the center, since the edges may be cut off.

The splash screen

The splash screen is what is visible while the app loads. It is configured with the expo-splash-screen plugin in the plugins array:

{
  "expo": {
    "plugins": [
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ]
    ]
  }
}

At launch, a 200-point-wide image appears in the center of a white background. The plugin is already in the template, so just change its image and color.

How to check

Expo Go shows its own icon and splash screen, so changes to the icon, splash screen, name and permissions are visible only in your own build of the app, covered in the next lesson. Fields your code needs can be read with the expo-constants package: Constants.expoConfig?.version.

Common mistake

Changing the icon or the permission text in app.json and expecting changes after saving the file. Fast Refresh updates only JavaScript code, while app.json goes into the native part of the app at build time. After changing the settings, build the app again.

Thanks for reading!