Skip to content

Android TV Touchables #17966

@sungjkim34

Description

@sungjkim34

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.4
Yarn: 1.3.2
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.0 => 0.53.0

Target Platform: AndroidTV

Steps to Reproduce

(Write your steps here:)

  1. Run app in Android TV emulator.
  2. Try using keyboard or D-pad to navigate through any touchable.
  3. Try using keyboard or D-pad to navigate through any inputs.

Expected Behavior

According to the React Native documentations, it states:

TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.

and

When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views.

However, it does not work as stated.
Need to either update the documentations or fix the behavior.

Actual Behavior

Touchable are not being highlighted and cannot be interacted with.
This works fine with AppleTV's tvOS.
This also works with NativeScript on AndroidTV.

Current Workaround (for my case)

Currently, I've implemented custom abstraction layer for buttons with an isSelected attribute.
I am manually navigating through the 'selected' buttons by using the react-native-keyevent library from Kevine John and if the isSelected attribute is true, setting the opacity higher and manually calling the function when the 'enter/select' key is pressed.
However, this is not optimal and I believe that a native implementation is very possible.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Platform: AndroidAndroid applications.Ran CommandsOne of our bots successfully processed a command.Resolution: FixedA PR that fixes this issue has been merged.Resolution: LockedThis issue was locked by the bot.Resolution: PR SubmittedA pull request with a fix has been provided.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions