Skip to content

Manifest (app.json)

Jump to bottom
Tommy Nguyen edited this page Jun 11, 2024 · 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.

History
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
History
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.

History
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": ""
    }
  ]
}

Note

Concurrent React is enabled by default when you enable New Architecture starting with 0.71. If this is undesirable, you can opt out by adding "concurrentRoot": false to initialProperties. This is not recommended, and won't be possible from 0.74 on.

[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 ReactNativeHost instance:

@interface MyViewController : UIViewController
- (nonnull instancetype)initWithHost:(nonnull ReactNativeHost *)host;
@end

Or in Swift:

@objc(MyViewController)
class MyViewController: UIViewController {
    @objc init(host: ReactNativeHost) {
        // Initialize
    }
}
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.

History
.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.

History
.icons

Path to resources folder containing launcher icons for the app.

If you're configuring icons for the first time, set this property to the path where you want to store your icons, then use Image Asset Studio to generate the assets.

You can read more about Android adaptive icons in the Android documentation.

History
.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
      }
    }
  }
}
History
..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
.features

Declares hardware or software features that is used by the application.

Equivalent to <uses-feature>.

Example:

<uses-feature android:name="android.hardware.camera.any" />
<uses-feature android:glEsVersion="0x00030002"
              android:required="true" />

becomes

{
  "android": {
    "features": [
      {
        "android:name": "android.hardware.camera.any"
      },
      {
        "android:glEsVersion": "0x00030002",
        "android:required": "true"
      }
    ]
  }
}
History
.permissions

Specifies system permissions that the user must grant for the app to operate correctly.

Equivalent to <uses-permission>.

Example:

<uses-permission
    android:name="android.permission.WRITE_EXTERNAL_STORAGE"
    android:maxSdkVersion="18" />

becomes

{
  "android": {
    "permissions": [
      {
        "android:name": "android.permission.WRITE_EXTERNAL_STORAGE",
        "android:maxSdkVersion": "18"
      }
    ]
  }
}
History
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.

History
.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.

History
.icons

Information about all of the icons used by the app.

Icons for all sizes and scales are generated for you so long as you provide PNGs measuring 1024x1024 pixels here.

You can read more about app icons in the Human Interface Guidelines.

The equivalent key in Info.plist is CFBundleIcons.

History
..primaryIcon

The primary icon for the Home screen and Settings app, among others.

The equivalent key in Info.plist is CFBundlePrimaryIcon.
..alternateIcons

List of alternate icons for the Home screen and Settings app.

The equivalent key in Info.plist is CFBundleAlternateIcons.
.codeSignEntitlements

Declare entitlements for capabilities used by the app.

Example:

{
  "ios": {
    "codeSignEntitlements": {
      "com.apple.developer.game-center": true
    }
  }
}

For more details, read Apple's documentation on Entitlements.

Alternatively, specify a path to a custom .entitlements file. The path should be relative to app.json. This is equivalent to setting CODE_SIGN_ENTITLEMENTS in Xcode.

History
  • [3.7.0] Declare entitlements in app manifest
  • [0.9.7] Added
.codeSignIdentity

Sets the code signing identity to use when signing code.

This is the same as setting CODE_SIGN_IDENTITY in Xcode.

History
.developmentTeam

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

This is the same as setting DEVELOPMENT_TEAM in Xcode.

History
.privacyManifest

The privacy manifest is a property list that records the information regarding the types of data collected and the required reasons APIs your app or third-party SDK use.

  • The types of data collected by your app or third-party SDK must be provided on all platforms.
  • The required reasons APIs your app or third-party SDK uses must be provided on iOS, iPadOS, tvOS, visionOS, and watchOS.

By default, a PrivacyInfo.xcprivacy is always generated with the following values:

{
  "NSPrivacyTracking": false,
  "NSPrivacyTrackingDomains": [],
  "NSPrivacyCollectedDataTypes": [],
  "NSPrivacyAccessedAPITypes": [
    {
      "NSPrivacyAccessedAPIType":
        "NSPrivacyAccessedAPICategoryFileTimestamp",
      "NSPrivacyAccessedAPITypeReasons": ["C617.1"]
    },
    {
      "NSPrivacyAccessedAPIType":
        "NSPrivacyAccessedAPICategorySystemBootTime",
      "NSPrivacyAccessedAPITypeReasons": ["35F9.1"]
    },
    {
      "NSPrivacyAccessedAPIType":
        "NSPrivacyAccessedAPICategoryUserDefaults",
      "NSPrivacyAccessedAPITypeReasons": ["CA92.1"]
    }
  ]
}

For more details, read Apple's documentation on Privacy manifest files.

History
.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.

History
.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.

History
.icons

Information about all of the icons used by the app.

Icons for all sizes and scales are generated for you so long as you provide PNGs measuring 1024x1024 pixels here.

You can read more about app icons in the Human Interface Guidelines.

The equivalent key in Info.plist is CFBundleIcons.

History
..primaryIcon

The primary icon for the Home screen and Settings app, among others.

The equivalent key in Info.plist is CFBundlePrimaryIcon.
..alternateIcons

List of alternate icons for the Home screen and Settings app.

The equivalent key in Info.plist is CFBundleAlternateIcons.
.codeSignEntitlements

Declare entitlements for capabilities used by the app.

Example:

{
  "ios": {
    "codeSignEntitlements": {
      "com.apple.developer.game-center": true
    }
  }
}

For more details, read Apple's documentation on Entitlements.

Alternatively, specify a path to a custom .entitlements file. The path should be relative to app.json. This is equivalent to setting CODE_SIGN_ENTITLEMENTS in Xcode.

History
  • [3.7.0] Declare entitlements in app manifest
  • [0.9.7] Added
.codeSignIdentity

Sets the code signing identity to use when signing code.

This is the same as setting CODE_SIGN_IDENTITY in Xcode.

History
.developmentTeam

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

This is the same as setting DEVELOPMENT_TEAM in Xcode.

History
.privacyManifest

The privacy manifest is a property list that records the information regarding the types of data collected and the required reasons APIs your app or third-party SDK use.

  • The types of data collected by your app or third-party SDK must be provided on all platforms.
  • The required reasons APIs your app or third-party SDK uses must be provided on iOS, iPadOS, tvOS, visionOS, and watchOS.

By default, a PrivacyInfo.xcprivacy is always generated with the following values:

{
  "NSPrivacyTracking": false,
  "NSPrivacyTrackingDomains": [],
  "NSPrivacyCollectedDataTypes": [],
  "NSPrivacyAccessedAPITypes": [
    {
      "NSPrivacyAccessedAPIType":
        "NSPrivacyAccessedAPICategoryFileTimestamp",
      "NSPrivacyAccessedAPITypeReasons": ["C617.1"]
    },
    {
      "NSPrivacyAccessedAPIType":
        "NSPrivacyAccessedAPICategorySystemBootTime",
      "NSPrivacyAccessedAPITypeReasons": ["35F9.1"]
    },
    {
      "NSPrivacyAccessedAPIType":
        "NSPrivacyAccessedAPICategoryUserDefaults",
      "NSPrivacyAccessedAPITypeReasons": ["CA92.1"]
    }
  ]
}

For more details, read Apple's documentation on Privacy manifest files.

History
.applicationCategoryType

The category that best describes the app for the App Store.

The equivalent key in Info.plist is LSApplicationCategoryType.

History
.humanReadableCopyright

A human-readable copyright notice for the bundle.

The equivalent key in Info.plist is NSHumanReadableCopyright.

History
.reactNativePath

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

visionOS 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.

History
.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.

History
.icons

Information about all of the icons used by the app.

Icons for all sizes and scales are generated for you so long as you provide PNGs measuring 1024x1024 pixels here.

You can read more about app icons in the Human Interface Guidelines.

The equivalent key in Info.plist is CFBundleIcons.

History
..primaryIcon

The primary icon for the Home screen and Settings app, among others.

The equivalent key in Info.plist is CFBundlePrimaryIcon.
..alternateIcons

List of alternate icons for the Home screen and Settings app.

The equivalent key in Info.plist is CFBundleAlternateIcons.
.codeSignEntitlements

Declare entitlements for capabilities used by the app.

Example:

{
  "ios": {
    "codeSignEntitlements": {
      "com.apple.developer.game-center": true
    }
  }
}

For more details, read Apple's documentation on Entitlements.

Alternatively, specify a path to a custom .entitlements file. The path should be relative to app.json. This is equivalent to setting CODE_SIGN_ENTITLEMENTS in Xcode.

History
  • [3.7.0] Declare entitlements in app manifest
  • [0.9.7] Added
.codeSignIdentity

Sets the code signing identity to use when signing code.

This is the same as setting CODE_SIGN_IDENTITY in Xcode.

History
.developmentTeam

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

This is the same as setting DEVELOPMENT_TEAM in Xcode.

History
.privacyManifest

The privacy manifest is a property list that records the information regarding the types of data collected and the required reasons APIs your app or third-party SDK use.

  • The types of data collected by your app or third-party SDK must be provided on all platforms.
  • The required reasons APIs your app or third-party SDK uses must be provided on iOS, iPadOS, tvOS, visionOS, and watchOS.

By default, a PrivacyInfo.xcprivacy is always generated with the following values:

{
  "NSPrivacyTracking": false,
  "NSPrivacyTrackingDomains": [],
  "NSPrivacyCollectedDataTypes": [],
  "NSPrivacyAccessedAPITypes": [
    {
      "NSPrivacyAccessedAPIType":
        "NSPrivacyAccessedAPICategoryFileTimestamp",
      "NSPrivacyAccessedAPITypeReasons": ["C617.1"]
    },
    {
      "NSPrivacyAccessedAPIType":
        "NSPrivacyAccessedAPICategorySystemBootTime",
      "NSPrivacyAccessedAPITypeReasons": ["35F9.1"]
    },
    {
      "NSPrivacyAccessedAPIType":
        "NSPrivacyAccessedAPICategoryUserDefaults",
      "NSPrivacyAccessedAPITypeReasons": ["CA92.1"]
    }
  ]
}

For more details, read Apple's documentation on Privacy manifest files.

History
.reactNativePath

Sets a custom path to React Native for visionOS. Useful for when require("@callstack/react-native-visionos") 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.

History
.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.

History
.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.

History
.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.

History
Clone this wiki locally