Search code examples
androidreactjsreact-nativegoogle-play-console

React Native - Android TV - DPad Functionality

I have published a react native application to google play store for android tv.

For tv, I have received notification for:

Missing DPad functionality Your app requires user interaction for menus or app navigation. Please make sure that all menus and app navigation are fully functional using a DPad. Please refer to our DPAD Control and Hardware Declaration documentation.

How do we enable d-pad navigation for react-native android apps?

If you need any more info, just let me know.

Solution

  • Finally, I have fixed the issue with d-pad navigation and banner for react-native android tv application.

    The issues were: (this includes issues which were not even part of the question)

    1. No full-size app banner

    Fix: create a folder called drawable under "your-app/android/app/src/main/res", add a png file (dimensions 320px x 180px and 320 dpi), and the most important part is, within image, there should be no other text then application name with which you have published APK.

    2. Unsupported hardware uses

    Fix: I fixed this issue before posting the question, but if you are facing the issue, 

    refer the answer by **@reidisaki** on this question.

    3. Missing DPad functionality (Actual issue raised in the question)

    Fix: I was using InputText on my screen. Well, under react-native version 0.56 for android/android tv, InputText cannot be focused by d-pad (directional pad). I stopped using TextInput and it fixed the d-pad navigation. It is available in the android simulator as well, to test the app.

    To make my application more TV compliant, in AndroidManifest.xml I upgraded my activity launcher to:

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

    To upgrade theme to leanback for android tv:

    1. I added leanback library to "app-name/android/app/build.gradle" under dependencies section: 

      dependencies {
....
compile "com.android.support:leanback-v17:${rootProject.ext.supportLibVersion}"
}

    2. In AndroidManifest.xml, I changed theme to @style/Theme.Leanback

      <application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:banner="@drawable/banner"
  android:allowBackup="true"
  android:theme="@style/Theme.Leanback">
  ....
</application>