How to rewrite the TVEventHandler of React Native using React Hooks?

user_1797689 0
Viewed 675

In the React Native documentation, the usage of TVEventHandler is given as:

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();
  }

}

How should this code be rewritten using React Hooks? I can't figure out this particular line: this._tvEventHandler.enable(this, function(cmp, evt) {, especially the this part.

react-native react-hooks reactjs javascript
1 Answers

I managed to make it work, hopefully can help you as well:

const App = () => {
  const _tvEventHandler = new TVEventHandler();

  const _enableTVEventHandler = () => {
    _tvEventHandler.enable(this, function (cmp, evt) {
      if (evt && evt.eventType === 'right') {
        console.log(evt.eventType);
      } else if (evt && evt.eventType === 'up') {
        console.log(evt.eventType);
      } else if (evt && evt.eventType === 'left') {
        console.log(evt.eventType);
      } else if (evt && evt.eventType === 'down') {
        console.log(evt.eventType);
      }
    });
  };

  const _disableTVEventHandler = () => {
    if (_tvEventHandler) {
      _tvEventHandler.disable();
    }
  }

  useEffect(() => {
    _enableTVEventHandler();
    return () => _disableTVEventHandler();
  });

  return null;
}
user_41759150
Related