Manifest (app.json)

Contents

• Properties
  • bundleRoot
  • singleApp
  • components
    • [Android] Adding Fragments
    • [iOS, macOS] Adding View Controllers
  • resources
  • android
    • package
    • signingConfigs
  • ios
    • bundleIdentifier
    • codeSignEntitlements
    • codeSignIdentity
    • developmentTeam
    • reactNativePath
  • macos
    • bundleIdentifier
    • codeSignEntitlements
    • codeSignIdentity
    • developmentTeam
    • reactNativePath
  • windows
    • appxManifest
    • certificateKeyFile
    • certificatePassword
    • certificateThumbprint

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

name	undefined
displayName	undefined
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.
.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.
.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.
.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.