Skip to content

Instantly share code, notes, and snippets.

@miazga
Last active March 23, 2024 16:59
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save miazga/2e6449e0c591e3ac8e22185b2edb447d to your computer and use it in GitHub Desktop.
Save miazga/2e6449e0c591e3ac8e22185b2edb447d to your computer and use it in GitHub Desktop.
Expo + Android TV

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.

@TheImShrey
Copy link

TheImShrey commented Jan 4, 2021

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

@miazga
Copy link
Author

miazga commented Jan 5, 2021

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

@aldebaran80
Copy link

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?

@abdelkebir7Y
Copy link

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 ?

@arslantopcu1
Copy link

hi 👋 @aldebaran80 did you find any answer ?

@wardbeyens
Copy link

I have the same question

@silencer07
Copy link

silencer07 commented Feb 20, 2024

For those who are looking for android banner config:

react-native-tvos/IgniteTV@0a29a6d

context: expo/expo#27142 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment