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/ReactNativeTvosController/ReactNativeTvosController.xcodeproj

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

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

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.

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.

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 : "Changed"
      e.x : (x offset)
      e.y : (y offset)
      */
    });
    panSubscription(); //Cancel Subscription