@react-native-tvos/config-tv 0.0.6 → 0.0.8

package/README.md

@@ -42,6 +42,7 @@ or
           "appleTVImages": {
             "icon": "./assets/images/myimage-tvos-1280x768.png",
             "iconSmall": "./assets/images/myimage-tvos-400x240.png",
+            "iconSmall2x": "./assets/images/myimage-tvos-800x480.png",
             "topShelf": "./assets/images/myimage-tvos-1920x720.png",
             "topShelf2x": "./assets/images/myimage-tvos-3840x1440.png",
             "topShelfWide": "./assets/images/myimage-tvos-2320x720.png",
@@ -64,11 +65,12 @@ _Plugin parameters_:
   - `DEBUG=expo:*` (shows debug messages from all plugins)
   - `DEBUG=expo:react-native-tvos:config-tv` (shows debug messages from this plugin only)
 - `tvosDeploymentTarget`: (optional string, default '13.4') Used to set the tvOS deployment target version in the Xcode project.
-- `removeFlipperOnAndroid`: (optional boolean, default true) Used to remove the Flipper dependency from `MainApplication.kt` (or `MainApplication.java`) and `android/app/build.gradle`. This is necessary for React Native TV 0.73 and higher, since Flipper integration is removed from these versions. If this causes issues, set the value to false, run `npx expo prebuild --clean` again, and then remove Flipper from your Android source manually.
+- `removeFlipperOnAndroid`: (optional boolean, default true) Used to remove the Flipper dependency from `MainApplication.kt` (or `MainApplication.java`) and `android/app/build.gradle`. This is necessary for React Native TV 0.73 and higher, since Flipper integration is removed from these versions. If this causes issues, set the value to false, run `npx expo prebuild --clean` again, and then remove Flipper from your Android source manually. This change will be made regardless of the setting of the `EXPO_TV` environment variable or the value of the `isTV` plugin parameter, as it is needed for both Android mobile and Android TV.
 - `androidTVBanner`: (optional string) If set, this should be a path to an existing PNG file appropriate for an Android TV banner image. See https://developer.android.com/design/ui/tv/guides/system/tv-app-icon-guidelines#banner . The Android manifest will be modified to reference this image, and the image will be copied into Android resource drawable directories.
-- `appleTVImages`: (optional object) If set, this is an object with the paths to images needed to construct the Apple TV icon and top shelf brand assets. The images will be used to construct a brand asset catalog in the Xcode project Image catalog, and the project updated to use the brand assets as the source for the app icons. If this property is set, all six image paths must be defined and the files must exist, or an error will be thrown. The images need to be the exact sizes shown here, in order to avoid errors during Xcode compilation and on submission to the App Store or TestFlight.
+- `appleTVImages`: (optional object) If set, this is an object with the paths to images needed to construct the Apple TV icon and top shelf brand assets. The images will be used to construct a brand asset catalog in the Xcode project Image catalog, and the project updated to use the brand assets as the source for the app icons. If this property is set, all image paths must be defined and the files must exist, or an error will be thrown. The images need to be the exact sizes shown here, in order to avoid errors during Xcode compilation and on submission to the App Store or TestFlight.
   - `icon`: (string) Path to a 1280x760 image
   - `iconSmall`: (string) Path to a 400x240 image
+  - `iconSmall2x`: (string) Path to a 800x480 image
   - `topShelf`: (string) Path to a 1920x720 image
   - `topShelf2x`: (string) Path to a 3840x1440 image
   - `topShelfWide`: (string) Path to a 2320x720 image
@@ -81,7 +83,7 @@ When this plugin is used to generate files in the iOS directory that build an Ap
 ```json
 {
   "dependencies": {
-    "react-native": "npm:react-native-tvos@^0.73.2-0"
+    "react-native": "npm:react-native-tvos@^0.73.6-0"
   }
 }
 ```

package/build/types.d.ts

@@ -3,6 +3,10 @@ export type AppleTVImages = {
      * Path to 400x240 image
      */
     iconSmall: string;
+    /**
+     * Path to 800x480 image
+     */
+    iconSmall2x: string;
     /**
      * Path to 1280x760 image
      */
@@ -47,6 +51,8 @@ export type ConfigData = {
     tvosDeploymentTarget?: string;
     /**
      * If set, Android code that references Flipper will be removed. (Defaults to true.)
+     * This change will be made regardless of the setting of the `EXPO_TV` environment variable or
+     * the value of the `isTV` plugin parameter, as it is needed for both Android mobile and Android TV.
      */
     removeFlipperOnAndroid?: boolean;
     /**

package/build/utils/config.js

@@ -31,6 +31,7 @@ exports.androidTVBanner = androidTVBanner;
 exports.appleTVImageTypes = [
     'icon',
     'iconSmall',
+    'iconSmall2x',
     'topShelf',
     'topShelf2x',
     'topShelfWide',
@@ -42,6 +43,8 @@ function appleTVImagePathForType(params, imageType) {
             return params?.appleTVImages?.icon;
         case 'iconSmall':
             return params?.appleTVImages?.iconSmall;
+        case 'iconSmall2x':
+            return params?.appleTVImages?.iconSmall2x;
         case 'topShelf':
             return params?.appleTVImages?.topShelf;
         case 'topShelf2x':

package/build/withTV.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const config_plugins_1 = require("expo/config-plugins");
 const withTVAndroidManifest_1 = require("./withTVAndroidManifest");
 const withTVAppleIconImages_1 = require("./withTVAppleIconImages");
+const withTVInfoPlist_1 = require("./withTVInfoPlist");
 const withTVPodfile_1 = require("./withTVPodfile");
 const withTVSplashScreen_1 = require("./withTVSplashScreen");
 const withTVXcodeProject_1 = require("./withTVXcodeProject");
@@ -10,10 +11,13 @@ const withTVAndroidRemoveFlipper_1 = require("./withTVAndroidRemoveFlipper");
 const withTVAndroidBannerImage_1 = require("./withTVAndroidBannerImage");
 const utils_1 = require("./utils");
 const withTVNoEffect = (config, params = {}) => {
-    (0, utils_1.verboseLog)(`${utils_1.packageNameAndVersion}: isTV == false, plugin will have no effect`, {});
+    (0, utils_1.verboseLog)(`${utils_1.packageNameAndVersion}: isTV == false, TV-specific modifications will not be made.`, {});
     return config;
 };
 const withTVPlugin = (config, params = {}) => {
+    // This plugin should always run
+    config = (0, withTVAndroidRemoveFlipper_1.withTVAndroidRemoveFlipper)(config, params);
+    // Return if TV is not enabled
     const isTV = (0, utils_1.isTVEnabled)(params);
     if (!isTV) {
         config = withTVNoEffect(config, params);
@@ -22,10 +26,10 @@ const withTVPlugin = (config, params = {}) => {
     config = (0, withTVAppleIconImages_1.withTVAppleIconImages)(config, params); // This should be done before Apple Xcode project config
     config = (0, withTVXcodeProject_1.withTVXcodeProject)(config, params);
     config = (0, withTVPodfile_1.withTVPodfile)(config, params);
+    config = (0, withTVInfoPlist_1.withTVInfoPlist)(config, params);
     config = (0, withTVSplashScreen_1.withTVSplashScreen)(config, params);
     config = (0, withTVAndroidBannerImage_1.withTVAndroidBannerImage)(config, params); // This should be done before Android manifest config
     config = (0, withTVAndroidManifest_1.withTVAndroidManifest)(config, params);
-    config = (0, withTVAndroidRemoveFlipper_1.withTVAndroidRemoveFlipper)(config, params);
     return config;
 };
 const pkg = require('../package.json');

package/build/withTVAndroidManifest.d.ts

@@ -5,3 +5,4 @@ export declare const withTVAndroidManifest: ConfigPlugin<ConfigData>;
 export declare function setLeanBackLauncherIntent(_config: Pick<ExpoConfig, 'android'>, androidManifest: AndroidConfig.Manifest.AndroidManifest, params: ConfigData): AndroidConfig.Manifest.AndroidManifest;
 export declare function removePortraitOrientation(_config: Pick<ExpoConfig, 'android'>, androidManifest: AndroidConfig.Manifest.AndroidManifest, params: ConfigData): AndroidConfig.Manifest.AndroidManifest;
 export declare function setTVBanner(_config: Pick<ExpoConfig, 'android'>, androidManifest: AndroidConfig.Manifest.AndroidManifest, params: ConfigData, androidTVBannerPath: string | undefined): AndroidConfig.Manifest.AndroidManifest;
+export declare function addTouchscreenHardwareFeatureToManifest(_config: Pick<ExpoConfig, 'android'>, androidManifest: AndroidConfig.Manifest.AndroidManifest, params: ConfigData): AndroidConfig.Manifest.AndroidManifest;

package/build/withTVAndroidManifest.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setTVBanner = exports.removePortraitOrientation = exports.setLeanBackLauncherIntent = exports.withTVAndroidManifest = void 0;
+exports.addTouchscreenHardwareFeatureToManifest = exports.setTVBanner = exports.removePortraitOrientation = exports.setLeanBackLauncherIntent = exports.withTVAndroidManifest = void 0;
 const config_plugins_1 = require("expo/config-plugins");
 const utils_1 = require("./utils");
 const { getMainActivity, getMainApplication } = config_plugins_1.AndroidConfig.Manifest;
@@ -9,6 +9,7 @@ const withTVAndroidManifest = (config, params = {}) => {
     return (0, config_plugins_1.withAndroidManifest)(config, (config) => {
         config.modResults = setLeanBackLauncherIntent(config, config.modResults, params);
         config.modResults = removePortraitOrientation(config, config.modResults, params);
+        config.modResults = addTouchscreenHardwareFeatureToManifest(config, config.modResults, params);
         if (androidTVBannerPath) {
             config.modResults = setTVBanner(config, config.modResults, params, androidTVBannerPath);
         }
@@ -90,3 +91,39 @@ function setTVBanner(_config, androidManifest, params, androidTVBannerPath) {
     return androidManifest;
 }
 exports.setTVBanner = setTVBanner;
+function addTouchscreenHardwareFeatureToManifest(_config, androidManifest, params) {
+    // Add `<uses-feature android:name="android.hardware.touchscreen" android:required="false"/>` to the AndroidManifest.xml
+    if (!Array.isArray(androidManifest.manifest['uses-feature'])) {
+        androidManifest.manifest['uses-feature'] = [];
+    }
+    if (!androidManifest.manifest['uses-feature'].find((item) => item.$['android:name'] === 'android.hardware.touchscreen') &&
+        !androidManifest.manifest['uses-feature'].find((item) => item.$['android:name'] === 'android.hardware.faketouch') &&
+        !androidManifest.manifest['uses-feature'].find((item) => item.$['android:name'] === 'android.software.leanback')) {
+        (0, utils_1.verboseLog)('adding TV touchscreen hardware feature tag to AndroidManifest.xml', {
+            params,
+            platform: 'android',
+            property: 'manifest',
+        });
+        androidManifest.manifest['uses-feature']?.push({
+            $: {
+                'android:name': 'android.hardware.touchscreen',
+                'android:required': 'false',
+            },
+        });
+        androidManifest.manifest['uses-feature']?.push({
+            $: {
+                'android:name': 'android.hardware.faketouch',
+                'android:required': 'false',
+            },
+        });
+        // add android.software.leanback to false
+        androidManifest.manifest['uses-feature']?.push({
+            $: {
+                'android:name': 'android.software.leanback',
+                'android:required': 'false',
+            },
+        });
+    }
+    return androidManifest;
+}
+exports.addTouchscreenHardwareFeatureToManifest = addTouchscreenHardwareFeatureToManifest;

package/build/withTVAppleIconImages.js

@@ -37,21 +37,29 @@ const withTVAppleIconImages = (c, params = {}) => {
             });
             const projectRoot = config.modRequest.projectRoot;
             const iosImagesPath = path_1.default.join(getIosNamedProjectPath(projectRoot), IMAGES_PATH);
-            const iconSourceImages = [
+            const iconSmallSourceImages = [
                 {
                     path: params.appleTVImages.iconSmall,
                     scale: '1x',
                 },
                 {
-                    path: params.appleTVImages.icon,
+                    path: params.appleTVImages.iconSmall2x,
                     scale: '2x',
                 },
             ];
-            const appStoreIconSourceImages = [
+            const iconLargeSourceImages = [
                 {
                     path: params.appleTVImages.icon,
+                    scale: '1x',
                 },
             ];
+            /*
+            const appStoreIconSourceImages: SourceImageJson[] = [
+              {
+                path: params.appleTVImages.icon,
+              },
+            ];
+             */
             const topShelfSourceImages = [
                 {
                     path: params.appleTVImages.topShelf,
@@ -91,44 +99,67 @@ const withTVAppleIconImages = (c, params = {}) => {
                             sourceImages: topShelfWideSourceImages,
                         },
                     },
+                    /*
+                    {
+                      role: 'primary-app-icon',
+                      size: '1280x768',
+                      imageStack: {
+                        name: 'App Icon - App Store',
+                        sourceLayers: [
+                          {
+                            name: 'Front',
+                            sourceImages: appStoreIconSourceImages,
+                          },
+                          {
+                            name: 'Middle',
+                            sourceImages: appStoreIconSourceImages,
+                          },
+                          {
+                            name: 'Back',
+                            sourceImages: appStoreIconSourceImages,
+                          },
+                        ],
+                      },
+                    },
+                     */
                     {
                         role: 'primary-app-icon',
-                        size: '1280x768',
+                        size: '400x240',
                         imageStack: {
-                            name: 'App Icon - App Store',
+                            name: 'App Icon - Small',
                             sourceLayers: [
                                 {
                                     name: 'Front',
-                                    sourceImages: appStoreIconSourceImages,
+                                    sourceImages: iconSmallSourceImages,
                                 },
                                 {
                                     name: 'Middle',
-                                    sourceImages: appStoreIconSourceImages,
+                                    sourceImages: iconSmallSourceImages,
                                 },
                                 {
                                     name: 'Back',
-                                    sourceImages: appStoreIconSourceImages,
+                                    sourceImages: iconSmallSourceImages,
                                 },
                             ],
                         },
                     },
                     {
                         role: 'primary-app-icon',
-                        size: '400x240',
+                        size: '1280x768',
                         imageStack: {
-                            name: 'App Icon',
+                            name: 'App Icon - Large',
                             sourceLayers: [
                                 {
                                     name: 'Front',
-                                    sourceImages: iconSourceImages,
+                                    sourceImages: iconLargeSourceImages,
                                 },
                                 {
                                     name: 'Middle',
-                                    sourceImages: iconSourceImages,
+                                    sourceImages: iconLargeSourceImages,
                                 },
                                 {
                                     name: 'Back',
-                                    sourceImages: iconSourceImages,
+                                    sourceImages: iconLargeSourceImages,
                                 },
                             ],
                         },

package/build/withTVInfoPlist.d.ts

@@ -0,0 +1,3 @@
+import { ConfigPlugin } from 'expo/config-plugins';
+import { ConfigData } from './types';
+export declare const withTVInfoPlist: ConfigPlugin<ConfigData>;

package/build/withTVInfoPlist.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withTVInfoPlist = void 0;
+const config_plugins_1 = require("expo/config-plugins");
+const utils_1 = require("./utils");
+const withTVInfoPlist = (c, params = {}) => {
+    (0, utils_1.verboseLog)('Modifying UIRequiredDeviceCapabilities for TV', {
+        params,
+        platform: 'ios',
+        property: 'Info.plist',
+    });
+    return (0, config_plugins_1.withInfoPlist)(c, (config) => {
+        config.modResults.UIRequiredDeviceCapabilities = ['arm64'];
+        return config;
+    });
+};
+exports.withTVInfoPlist = withTVInfoPlist;

package/build/withTVXcodeProject.js

@@ -21,24 +21,24 @@ function setXcodeProjectBuildSettings(config, { project, params, deploymentTarge
     for (const { buildSettings } of Object.values(configurations || {})) {
         // Guessing that this is the best way to emulate Xcode.
         // Using `project.addToBuildSettings` modifies too many targets.
+        if (buildSettings !== undefined) {
+            buildSettings.SDKROOT = 'appletvos';
+        }
         if (typeof buildSettings?.PRODUCT_NAME !== 'undefined') {
-            if (buildSettings.TARGETED_DEVICE_FAMILY !== '3') {
-                (0, utils_1.verboseLog)(`modifying target ${buildSettings?.PRODUCT_NAME} for tvOS`, {
-                    params,
-                    platform: 'ios',
-                    property: 'xcodeproject',
-                });
-                buildSettings.TARGETED_DEVICE_FAMILY = '3';
-                buildSettings.TVOS_DEPLOYMENT_TARGET = deploymentTarget;
-                buildSettings.SDKROOT = 'appletvos';
-                if (typeof buildSettings?.IOS_DEPLOYMENT_TARGET !== 'undefined') {
-                    delete buildSettings?.IOS_DEPLOYMENT_TARGET;
-                }
-                if (params.appleTVImages) {
-                    // set the app icon source
-                    if (buildSettings.ASSETCATALOG_COMPILER_APPICON_NAME === 'AppIcon') {
-                        buildSettings.ASSETCATALOG_COMPILER_APPICON_NAME = 'TVAppIcon';
-                    }
+            (0, utils_1.verboseLog)(`modifying target ${buildSettings?.PRODUCT_NAME} for tvOS`, {
+                params,
+                platform: 'ios',
+                property: 'xcodeproject',
+            });
+            buildSettings.TARGETED_DEVICE_FAMILY = '3';
+            buildSettings.TVOS_DEPLOYMENT_TARGET = deploymentTarget;
+            if (typeof buildSettings?.IOS_DEPLOYMENT_TARGET !== 'undefined') {
+                delete buildSettings?.IOS_DEPLOYMENT_TARGET;
+            }
+            if (params.appleTVImages) {
+                // set the app icon source
+                if (buildSettings.ASSETCATALOG_COMPILER_APPICON_NAME === 'AppIcon') {
+                    buildSettings.ASSETCATALOG_COMPILER_APPICON_NAME = 'TVAppIcon';
                 }
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-tvos/config-tv",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Config plugin to reconfigure native directories for Apple TV and Android TV development if needed",
   "main": "build/withTV.js",
   "types": "build/withTV.d.ts",