Skip to content

Manifest (app.json)

Tommy Nguyen edited this page Jul 22, 2022 · 67 revisions

Contents

We use app.json to configure what gets bundled with the app and declare all the entry points on the home screen. The manifest must be bundled together with all your JS assets. It is usually found in res/raw/ in the APK, and in assets/ in the .app bundle.

Example app.json file:

{
  "name": "Example",
  "displayName": "Example",
  "bundleRoot": "main",
  "components": [
    {
      "appKey": "Example",
      "displayName": "App"
    }
  ],
  "resources": {
    "android": [
      "dist/res",
      "dist/main.android.jsbundle"
    ],
    "ios": [
      "dist/assets",
      "dist/main.ios.jsbundle"
    ],
    "macos": [
      "dist/assets",
      "dist/main.macos.jsbundle"
    ],
    "windows": [
      "dist/assets",
      "dist/main.windows.bundle"
    ]
  },
  "android": {
    "package": "com.react.reacttestapp"
  },
  "ios": {
    "bundleIdentifier": "com.react.ReactTestApp"
  },
  "macos": {
    "bundleIdentifier": "com.react.ReactTestApp"
  },
  "windows": {
    "appxManifest": "windows/Package.appxmanifest"
  }
}

Properties

version

The app version shown to users. The required format is three period-separated integers, such as 1.3.11.

Introduced in 1.4.0.

bundleRoot

Specifies the root of the bundle file name. E.g., if the bundle file is index.[platform].bundle, index is the bundle root.

Defaults to index and main.

When set, the test app will look for the following files on startup:

  • myRoot.[platform].jsbundle
  • myRoot.[platform].bundle
  • myRoot.native.jsbundle
  • myRoot.native.bundle
  • myRoot.jsbundle
  • myRoot.bundle

Introduced in 0.9.0.

singleApp

In single-app mode, the component with the specified slug gets launched automatically, essentially behaving as a normal app.

Defaults to multi-app mode.

For more details, see its dedicated page.

Introduced in 1.3.0.

components

All components that should be accessible from the home screen should be declared under this property. Each component must have appKey set, i.e. the name that you passed to AppRegistry.registerComponent.

AppRegistry.registerComponent("Example", () => Example);

For each entry, you can declare additional (optional) properties:

{
  "components": [
    {
      // The app key passed to `AppRegistry.registerComponent()`
      "appKey": "Example",

      // [Optional] Name to be displayed on home screen
      "displayName": "App",

      // [Optional] Properties that should be passed to your component
      "initialProperties": {
        "concurrentRoot": false
      },

      // [Optional] The style in which to present your component.
      // Valid values are: "modal"
      "presentationStyle": "",

      // [Optional] URL slug that uniquely identifies this component.
      // Used for deep linking.
      "slug": ""
    }
  ]
}

If you're on React Native 0.69 and want to enable Concurrent React, set "concurrentRoot": true in initialProperties.

[Android] Adding Fragments

On Android, you can add fragments to the home screen by using their fully qualified class names, e.g. com.example.app.MyFragment, as app key:

"components": [
  {
    "appKey": "com.example.app.MyFragment",
    "displayName": "App"
  }
]

If you need to get the ReactNativeHost instance within MyFragment, you can request it as a service from the context:

@Override
@SuppressLint("WrongConstant")
public void onAttach(@NonNull Context context) {
    super.onAttach(context);

    ReactNativeHost reactNativeHost = (ReactNativeHost)
        context.getSystemService("service:reactNativeHostService");
    ReactInstanceManager reactInstanceManager =
        reactNativeHost.getReactInstanceManager();
}

[iOS, macOS] Adding View Controllers

On iOS/macOS, you can have native view controllers on the home screen by using their Objective-C names as app key (Swift classes can declare Objective-C names with the @objc attribute):

"components": [
  {
    "appKey": "RTAMyViewController",
    "displayName": "App"
  }
]

The view controller must implement an initializer that accepts a RCTBridge instance:

- (nonnull instancetype)initWithBridge:(nonnull RCTBridge *)bridge;
resources

Here you should declare all resources that should be bundled with the app. The property can be a list of paths to resources:

"resources": [
  "dist/assets",
  "dist/main.jsbundle"
]

Or you can declare platform specific resources using platform names as key:

"resources": {
  "android": [
    "dist/res",
    "dist/main.android.jsbundle"
  ],
  "ios": [
    "dist/assets",
    "dist/main.ios.jsbundle"
  ],
  "macos": [
    "dist/assets",
    "dist/main.macos.jsbundle"
  ],
  "windows": [
    "dist/assets",
    "dist/main.windows.bundle"
  ]
}

A path must be relative to the path of app.json, and can point to both a file or a directory.

android

Android specific properties go here.

.package

Use this property to set the application ID of the APK. The value is set to applicationId in build.gradle.

.versionCode

A positive integer used as an internal version number. Google uses this number to determine whether one version is more recent than another. See Version your app for more on how it is used and how it differs from version.

Introduced in 1.4.0.

.signingConfigs

Use this to set the signing configurations for the app.

The JSON schema follows the Gradle DSL very closely. Below is what one would add for the debug and release flavors:

{
  "android": {
    "signingConfigs": {
      "debug": {                          // optional
        "keyAlias": "androiddebugkey",    // defaults to "androiddebugkey"
        "keyPassword": "android",         // defaults to "android
        "storeFile": "debug.keystore",    // required
        "storePassword": "android"        // defaults to "android
      },
      "release": {                        // optional
        "keyAlias": "androiddebugkey",    // defaults to "androiddebugkey"
        "keyPassword": "android",         // defaults to "android
        "storeFile": "release.keystore",  // required
        "storePassword": "android"        // defaults to "android
      }
    }
  }
}

Introduced in 0.11.0.

..debug

Use this property for the debug signing config for the app. The value storeFile is required. Android defaults will be provided for other properties.

...keyAlias

Use this property to specify the alias of key to use in the store

...keyPassword

Use this property to specify the password of key in the store

...storeFile

Use this property to specify the relative file path to the key store file

...storePassword

Use this property to specify the password of the key store

..release

Use this property for the release signing config for the app. The value storeFile is required. Android defaults will be provided for other properties.

...keyAlias

Use this property to specify the alias of key to use in the store

...keyPassword

Use this property to specify the password of key in the store

...storeFile

Use this property to specify the relative file path to the key store file

...storePassword

Use this property to specify the password of the key store

ios

iOS specific properties go here.

.bundleIdentifier

Use this property to set the bundle identifier of the final app bundle. This is the same as setting PRODUCT_BUNDLE_IDENTIFIER in Xcode.

.buildNumber

Similar to version, but is not shown to users. This is a required key for App Store.

The equivalent key in Info.plist is CFBundleVersion.

Introduced in 1.4.0.

.codeSignEntitlements

Specifies the path to a custom Entitlements file. The path should be relative to app.json.

This is the same as setting CODE_SIGN_ENTITLEMENTS in Xcode.

Introduced in 0.9.7.

.codeSignIdentity

Sets the code signing identity to use when signing code.

This is the same as setting CODE_SIGN_IDENTITY in Xcode.

Introduced in 0.9.7.

.developmentTeam

Sets the development team that the app should be assigned to.

This is the same as setting DEVELOPMENT_TEAM in Xcode.

Introduced in 0.9.7.

.reactNativePath

Sets a custom path to React Native. Useful for when require("react-native") does not return the desired path.

macos

macOS specific properties go here.

.bundleIdentifier

Use this property to set the bundle identifier of the final app bundle. This is the same as setting PRODUCT_BUNDLE_IDENTIFIER in Xcode.

.buildNumber

Similar to version, but is not shown to users. This is a required key for App Store.

The equivalent key in Info.plist is CFBundleVersion.

Introduced in 1.4.0.

.codeSignEntitlements

Specifies the path to a custom Entitlements file. The path should be relative to app.json.

This is the same as setting CODE_SIGN_ENTITLEMENTS in Xcode.

Introduced in 0.9.7.

.codeSignIdentity

Sets the code signing identity to use when signing code.

This is the same as setting CODE_SIGN_IDENTITY in Xcode.

Introduced in 0.9.7.

.developmentTeam

Sets the development team that the app should be assigned to.

This is the same as setting DEVELOPMENT_TEAM in Xcode.

Introduced in 0.9.7.

.reactNativePath

Sets a custom path to React Native for macOS. Useful for when require("react-native-macos") does not return the desired path.

windows

Windows specific properties go here.

.appxManifest

Sets the path to your app package manifest. If none is set, a default manifest will be provided. Changes to this property will not be automatically be picked up; you need to re-run npx install-windows-test-app to update the solution.

Introduced in 0.5.5.

.certificateKeyFile

The path to the certificate to use. If specified, it will also enable package signing. Changes to this property will not be automatically be picked up; you need to re-run npx install-windows-test-app to update the solution.

Introduced in 1.1.0.

.certificatePassword

The password for the private key in the certificate. Leave unset if no password. Changes to this property will not be automatically be picked up; you need to re-run npx install-windows-test-app to update the solution.

Introduced in 1.1.0.

.certificateThumbprint

This value must match the thumbprint in the signing certificate, or be unset. Changes to this property will not be automatically be picked up; you need to re-run npx install-windows-test-app to update the solution.

Introduced in 1.1.0.

Clone this wiki locally