Expo + Android TV

howto.md

Applications built with Expo and React Native WILL NOT launch correctly unless proper configured.

This solves: https://forums.expo.io/t/rn-expo-build-for-android-tv/9403 and https://stackoverflow.com/questions/51707841/android-tv-app-shows-white-screen

1. For the Expo managed workflow update app.json:

"android": {
      ...
      "intentFilters": [
        {
          "action": "MAIN",
          "category": [
            "LEANBACK_LAUNCHER"
          ]
        }
      ]
    },

This will automatically update the AndroidManifest.xml .MainActivity with the following intent-filter:

<intent-filter>
   <action android:name="android.intent.action.MAIN" />
   <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
</intent-filter>

2. For the bare workflow (e.g. ejected to ExpoKit):

Update android/app/src/main/AndroidManifest.xml with the following:

<activity
   android:name=".MainActivity"
   android:launchMode="singleTask"
   android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
   android:theme="@style/Theme.Exponent.Splash"
   android:windowSoftInputMode="adjustResize">
   ...
   <!-- ADD THE INTENT FILTER FROM BELOW TO LAUNCH APP ON ANDROID TV-->
   <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
   </intent-filter>
   ...
   <!-- ADD DETACH APP SPECIFIC INTENT FILTERS -->
</activity>

3. FYI

The problem is .experience.TvActivity run by default when launching on the Android TV launcher.

Please verify #1, its throwing build time error while reading manifest.

TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at renderIntentFilterDatumEntries (/app/turtle/node_modules/@expo/xdl/build/detach/AndroidIntentFilters.js:33:17)
    at /app/turtle/node_modules/@expo/xdl/build/detach/AndroidIntentFilters.js:37:70
    at Array.map (<anonymous>)
    at renderIntentFilterData (/app/turtle/node_modules/@expo/xdl/build/detach/AndroidIntentFilters.js:37:48)
    at /app/turtle/node_modules/@expo/xdl/build/detach/AndroidIntentFilters.js:25:9
    at Array.map (<anonymous>)
    at renderIntentFilters (/app/turtle/node_modules/@expo/xdl/build/detach/AndroidIntentFilters.js:22:24)
    at runShellAppModificationsAsync (/app/turtle/node_modules/@expo/xdl/build/detach/AndroidShellApp.js:632:115)
    at async Object.createAndroidShellAppAsync (/app/turtle/node_modules/@expo/xdl/build/detach/AndroidShellApp.js:392:3)
    at async runShellAppBuilder (/app/turtle/build/builders/android.js:95:9)
    at async Object.buildAndroid [as android] (/app/turtle/build/builders/android.js:43:28)
    at async build (/app/turtle/build/jobManager.js:181:33)
    at async processJob (/app/turtle/build/jobManager.js:118:32)
    at async Object.doJob (/app/turtle/build/jobManager.js:49:5)
    at async main (/app/turtle/build/server.js:66:13)

I updated it with data property, now seems to work fine, tested on expo 39 & 40

Also note that you have to include "LAUNCHER" too in category or else some devices may still show white screen.

"intentFilters": [
        {
          "action": "MAIN",
          "data":{},
          "category": [
            "LEANBACK_LAUNCHER",
            "LAUNCHER"
          ]
        }
      ]

@TheImShrey you are right - looks like something has changed with latest release of expo🙂

I am trying to add icon banner (Add custom banner image to display as Android TV launcher icon) in expo but I don't know where, can you help me?

I am trying to add icon banner (Add custom banner image to display as Android TV launcher icon) in expo but I don't know where, can you help me?

hi 👋 @aldebaran80 did you find any answer ?

hi 👋 @aldebaran80 did you find any answer ?

I have the same question

For those who are looking for android banner config:

react-native-tvos/IgniteTV@0a29a6d

context: expo/expo#27142 (comment)