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.

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>
   

Did your manifest declare the right uses-features? mainly the first otne touchScreen required false

<uses-feature android:name="android.hardware.touchscreen"
        android:required="false"/>
<uses-feature android:name="android.hardware.faketouch"
        android:required="false"/>
<uses-feature android:name="android.hardware.telephony"
        android:required="false"/>
<uses-feature android:name="android.hardware.camera"
        android:required="false"/>
<uses-feature android:name="android.hardware.nfc"
        android:required="false"/>
<uses-feature android:name="android.hardware.location.gps"
        android:required="false"/>
<uses-feature android:name="android.hardware.microphone"
        android:required="false"/>
<uses-feature android:name="android.hardware.sensor"
        android:required="false"/>

I'm looking to publish an android tv app as well for react native but the focus management for androidtv has bugs namely if you hit the right button but the item is vertically above and to the right android tv does nothing.

edit ------------ have you tried implementing these configurations?

<uses-configuration
  android:reqFiveWayNav=["true" | "false"]
  android:reqHardKeyboard=["true" | "false"]
  android:reqKeyboardType=["undefined" | "nokeys" | "qwerty" | "twelvekey"]
  android:reqNavigation=["undefined" | "nonav" | "dpad" | "trackball" | "wheel"]
  android:reqTouchScreen=["undefined" | "notouch" | "stylus" | "finger"] />