Remote Mapping Android TV

[jibraniqbal666]

I have done with app, it is working perfectly on Android TV Emulator with direction pad. but my android box's remote does not recognise the clicks and focuses in the app with directional pad. can you do something like external mapping to make it work?

Thanks you very much.

[SatadruBhattacharjee]

For native platforms (Android), normally we don't need any Key mapping as the TouchableOpacity component will take care of the spatial key based focus navigations.

[pavjacko]

@jibraniqbal666 if emulator works it should work out of the box if device supports native key focus as @SatadruBhattacharjee pointed out. could you provide details of android box you using ?

[jibraniqbal666]

it's kinda cheap but it's based on Android TV and other things like native date picker is working on. Just the React-Native interaction and focus things are not working i think. https://www.aliexpress.com/item/32837697026.html?spm=a2g0o.productlist.0.0.7da45c3e0yKawG&algo_pvid=dd74d5e8-2e59-4ca4-b91e-8fef10f3e025&algo_expid=dd74d5e8-2e59-4ca4-b91e-8fef10f3e025-4&btsid=68856ea6-c903-483b-a3af-86221fd7a549&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_60

[jibraniqbal666]

apparently onFocus and onBlur in TouchableOpacity is not getting triggered on device.

[pavjacko]

ok so looks like the box above is not AndroidTV but standard android OS with some sort of custom launcher on top of it which could explain focus issues. going to order one to do some testing :D I suspect quite al lot of these "almost ATV" boxes variations might be in circulation so we probably need to add support for that.

[jibraniqbal666]

well i have worked it out using some kinda hack i found on bounty source by user "sJJdGG" https://www.bountysource.com/issues/64565342-navigating-with-physical-keyboard-or-tv-remote-gets-focus-out-of-the-screen

we make a custom touchable like this, and use this instead of react-native ones. this one call each function onFocus, onBlur and onPress manually using buttonEvent. it works on both emulator and real tv. but there are some issue like selecting default focus on first start.

import React from "react";
import {
  TVEventHandler,
  TouchableHighlight,
  findNodeHandle
} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";

export default class CustomTouchable extends React.Component {
  myRef = React.createRef();
  nodeHandle = null;
  evtHandler = null;

  enableTVEventHandler() {
    this.evtHandler = new TVEventHandler();
    this.evtHandler.enable(this, this.handleTVRemoteEvent);
  }

  disableTVEventHandler() {
    if (this.evtHandler) {
      this.evtHandler.disable();
      delete this.evtHandler;
    }
  }

  handleTVRemoteEvent = (cmp, event) => {
    const { eventType, tag } = event;
    if (tag !== this.nodeHandle) {
      return;
    }

    if (eventType === "focus") {
      this.myRef.current.props.onFocus();
    }

    if (eventType === "blur") {
      this.myRef.current.props.onBlur();
    }

    if (eventType === "select") {
      this.myRef.current.props.onPress();
    }
  };

  componentDidMount() {
    this.nodeHandle = findNodeHandle(this.myRef.current);
    this.enableTVEventHandler();
  }

  componentWillUnmount() {
    this.disableTVEventHandler();
  }

  render() {
    const { children, ...props } = this.props;
    return (
      <TouchableOpacity {...props} ref={this.myRef} >
        {children}
      </TouchableOpacity>
    );
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.