3

I am trying to build an application for android tv and I wanted to use the remote movements. I first checked if there was a package which could help me with this but I could not find one.

Then I moved on to the official documentation listed here

I am trying to use this code:

var TVEventHandler = require('TVEventHandler');

class Game2048 extends React.Component {
  _tvEventHandler: any;

  _enableTVEventHandler() {
    this._tvEventHandler = new TVEventHandler();
    this._tvEventHandler.enable(this, function(cmp, evt) {
      if (evt && evt.eventType === 'right') {
        cmp.setState({board: cmp.state.board.move(2)});
      } else if(evt && evt.eventType === 'up') {
        cmp.setState({board: cmp.state.board.move(1)});
      } else if(evt && evt.eventType === 'left') {
        cmp.setState({board: cmp.state.board.move(0)});
      } else if(evt && evt.eventType === 'down') {
        cmp.setState({board: cmp.state.board.move(3)});
      } else if(evt && evt.eventType === 'playPause') {
        cmp.restartGame();
      }
    });
  }

  _disableTVEventHandler() {
    if (this._tvEventHandler) {
      this._tvEventHandler.disable();
      delete this._tvEventHandler;
    }
  }

  componentDidMount() {
    this._enableTVEventHandler();
  }

  componentWillUnmount() {
    this._disableTVEventHandler();
  }

But the var TVEventHandler = require('TVEventHandler'); says no module was found called TVEventHandler. And I tried to import it manually from react-native/Libraries/Components/AppleTV and that gives me an error stating that the component may not have been exported error. I am not sure what I am doing wrong here. I did everything the Doc asks

Mohamed Ahmed
  • 195
  • 1
  • 3
  • 16
  • Possibly related: https://stackoverflow.com/a/52358979/295004 – Morrison Chang Feb 06 '20 at 05:26
  • I don’t think thats the issue. If so, how do I resolve it? – Mohamed Ahmed Feb 06 '20 at 05:39
  • I referenced it as you don't state what version of React-Native/node/yarn you are using, however looking through your history it looks like you've made progress so I'm a bit confused. Additional does the [TVEventHanderExample](https://github.com/facebook/react-native/blob/91f139b94118fe8db29728ea8ad855fc4a13f743/RNTester/js/examples/TVEventHandler/TVEventHandlerExample.js) work on Android TV? – Morrison Chang Feb 06 '20 at 05:58
  • Sorry I actually just resolved the issue. However, it was https://stackoverflow.com/a/57971978/11914205 that solved it. The same question you pointed to but different answer. Could you please post it as an answer so I can accept as best answer – Mohamed Ahmed Feb 06 '20 at 06:01
  • 1
    Answer your own question (its allowed). Great that you got it working. I was just trying to get more detail for anyone else. – Morrison Chang Feb 06 '20 at 06:04

1 Answers1

2

Resolved the issue. Use this in your class Instead. And make sure to import the TVEventHandler from react-native:

_tvEventHandler: any;


_enableTVEventHandler() {
        var self = this;
        this._tvEventHandler = new TVEventHandler();
        this._tvEventHandler.enable(this, function (cmp, evt) {
            console.log("kcubsj"+evt.eventType)
            if (evt && evt.eventType === 'right') {
                console.log('right');
            } else if (evt && evt.eventType === 'up') {
                console.log('up');
            } else if (evt && evt.eventType === 'left') {
                console.log('left');
            } else if (evt && evt.eventType === 'down') {
                console.log('down');
            } else if (evt && evt.eventType === 'select') {
                //self.press();
            }
        });
    }

_disableTVEventHandler() {
        if (this._tvEventHandler) {
            this._tvEventHandler.disable();
            delete this._tvEventHandler;
        }
    }

 componentDidMount() {
        this._enableTVEventHandler();
    }

componentWillUnmount() {
        this._disableTVEventHandler();
    }

Original Answer

Mohamed Ahmed
  • 195
  • 1
  • 3
  • 16