[Tracking][Beta] Embedding Apple Watch App inside NativeScript App

[KristianDD]

Overview

Apple Watch App Beta feature enables embedding a watch app in NativeScript application by adding watchapp and watchextension folders inside App_Resources/iOS/.

The watch app should be created and developed inside Xcode. Once the user is happy with the result, the folder containing the watch app and the watch app extension should be copied inside App_Resources/iOS/watchapp and App_Resources/iOS/watchextension respectively. Optionally you can add watchapp.json and extension.json which support multiple configurations for the build of the watch app and watch app extension.
Example JSON file:

{
    "assetcatalogCompilerAppiconName": "AppIcon",
    "targetBuildConfigurationProperties": {
        "WATCHOS_DEPLOYMENT_TARGET": 4.1
    }
}

In the example above you should have an .xcassets catalog with AppIcon.appiconset inside the watchapp folder.

More information can be found in the feature issue here.

Workflow:

1. Create Single Page App from Xcode.
2. Add watch app target - File>New>Target>WatchKit App
3. Add a name to your watch app, for example MyFirstWatchApp
4. Copy the generated "MyFirstWatchApp" and MyFirstWatchApp Extension to .../apps/MyApp/app/App_Resources/iOS/watchapp/MyFirstWatchApp and .../apps/MyApp/app/App_Resources/iOS/watchextension/MyFirstWatchApp Extension respectively.
5. Inside the Info.plist of the Watch App replace the value of WKCompanionAppBundleIdentifier with $(WK_APP_BUNDLE_IDENTIFIER).
   6 Inside the Info.plist of the Watch Extension replace the value of WKAppBundleIdentifier with $(WK_APP_BUNDLE_IDENTIFIER).
6. You can populate the Assets.xcassets of the Watch App and the Watch Extension and add the name of the appiconset to the .../apps/MyApp/app/App_Resources/iOS/watchapp/MyFirstWatchApp/watchapp.json and .../apps/MyApp/app/App_Resources/iOS/watchextension/MyFirstWatchApp Extension/extension.json respectively:

{
    "assetcatalogCompilerAppiconName": "AppIcon"
}

8. You can modify the WATCHOS_DEPLOYMENT_TARGET of the Watch App by adding the value inside the watchapp.json like this:

{
    "assetcatalogCompilerAppiconName": "AppIcon",
    "targetBuildConfigurationProperties": {
        "WATCHOS_DEPLOYMENT_TARGET": 4.1
    }
}

9. Run the NativeScript application

Known issues

• The watch app inside NativeScript application support only Automatic code signing. Any provision configuration inside App_Resources/iOS/build.xcconfig will be ignored. And the application build will most probably fail.
• Local frameworks (not SDK ones) will not be included in the build of the watch app.
• Single watch app can be added to the project.
• If the WatchApp Extension has an entitlements file and a space in the name of the extension or the .entitlements file, the prepare step of the project will fail. - Apple Watch extension with space in name and .entitlements file not working. #5005

Discussion

Please, don't report problems here. Instead, open a new issue and link it to this one.
Let's use this discussion for suggestions and improvement ideas. We would love to hear from you!

[gabrielbiga]

The build just broke in favor of xrOS.
Details here: NativeScript/ios#249