react-native-tvos-controller

TvOS remote controller module for react native. Including "tap","long press","swipe" and "pan" gesture.

React Native for TVOS

react-native-tvos-controller demo video

Install

npm install --save react-native-tvos-controller

Automatically link

With React Native 0.27+

react-native link react-native-tvos-controller

With older versions of React Native

You need rnpm (npm install -g rnpm)

rnpm link react-native-tvos-controller

Manually link

If Automatically link can't work, you should link the module manually. Manually Link Tutorial

1. Add the following to your Project: node_modules/react-native-tvos-controller/ios/RNtvoscontroller.xcodeproj

2. Add the following to Link Binary With Libraries: libRNtvoscontroller.a

3. Add the following to your Header Search Paths: $(SRCROOT)/../node_modules/react-native-tvos-controller/ios/RNtvoscontroller

Usage

import reactNativeTvosController from "react-native-tvos-controller"

connect

reactNativeTvosController.connect()

Connect the remote controller of apple TV.

enablePanGesture

reactNativeTvosController.enablePanGesture();

You will receive the specific moving offset tracing data if you enable the pan gesture. You can't receive the swipe event anymore.

You can receive the swipe event and other gestures when it was enabled simultaneously recognizing reactNativeTvosController.enableRecognizeSimultaneously()

disablePanGesture

reactNativeTvosController.disablePanGesture();

You won't receive the specific moving offset tracing data if you disable the pan gesture. You can continue receiving the swipe event.

enableRecognizeSimultaneously

reactNativeTvosController.enableRecognizeSimultaneously();

Events from all recognizers are sending simultaneously.

disableRecognizeSimultaneously

reactNativeTvosController.disableRecognizeSimultaneously();

Disable. Events will be send from the first recognized gesture recognizer.

subscribe

Subscribe the native events of Apple TV's remote controller.

events

TAP

var tapSubscription = reactNativeTvosController.subscribe('TAP',
    (e) => {
      console.log("tapped");
      console.log(JSON.stringify(e));
      /*
      e.type : "PlayPause" || "Menu" || "Select" || "UpArrow" || "DownArrow" || "LeftArrow" || "RightArrow"
      e.code : 0 || 1 || 2 || 3 || 4 || 5 || 6
      */
    });
    tapSubscription(); //Cancel Subscription

SWIPE

var swipeSubscription = reactNativeTvosController.subscribe('SWIPE',
    (e) => {
      console.log("swiped");
      console.log(JSON.stringify(e));
      /*
      e.direction : "Right" || "Down" || "Left" || "Up"
      e.code : 0 || 1 || 2 || 3
      */
    });
    swipeSubscription(); //Cancel Subscription

LONGPRESS

var longPressSubscription = reactNativeTvosController.subscribe('LONGPRESS',
    (e) => {
      console.log("longPressed");
      console.log(JSON.stringify(e));
      /*
      e.state : "Began" || "Ended"
      e.code : 0 || 1
      */
    });
    longPressSubscription(); //Cancel Subscription

PAN

var panSubscription = reactNativeTvosController.subscribe('PAN',
    (e) => {
      console.log("panned");
      console.log(JSON.stringify(e));
      /*
      e.state : "Began" || "Changed" || "Ended"
      e.x : (x offset)
      e.y : (y offset)
      e.velocityX : number
      e.velocityY : number
      */
    });
    panSubscription(); //Cancel Subscription