react-native/RNTester/js/TVEventHandlerExample.js
Douglas Lowder 75284d3cd4 Apple TV: Enable long presses on TV remote; dev menu on TV device; example code
Summary:
**Motivation**

Properly support long presses on the Apple TV remote, and also enable dev menu functionality on a real Apple TV device (shaking an Apple TV doesn't work 😄 )

**Test plan**

New example added to `RNTester`.
Closes https://github.com/facebook/react-native/pull/15221

Differential Revision: D5526463

Pulled By: javache

fbshipit-source-id: a61051e86bc82a9561eefc1704bed6b1f2617e05
2017-07-31 04:06:32 -07:00

98 lines
2.1 KiB
JavaScript

/**
* Copyright (c) 2017-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @flow
* @providesModule TVEventHandlerExample
*/
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
Platform,
StyleSheet,
View,
Text,
TouchableOpacity,
TVEventHandler,
} = ReactNative;
exports.framework = 'React';
exports.title = 'TVEventHandler example';
exports.description = 'iOS alerts and action sheets';
exports.examples = [{
title: 'TVEventHandler',
render() {return <TVEventHandlerView/>;}
}];
class TVEventHandlerView extends React.Component {
state: {
lastEventType: string
}
constructor(props) {
super(props);
this.state = {
lastEventType: ''
};
}
_tvEventHandler: any;
_enableTVEventHandler() {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function(cmp, evt) {
cmp.setState({
lastEventType: evt.eventType
})
});
}
_disableTVEventHandler() {
if (this._tvEventHandler) {
this._tvEventHandler.disable();
delete this._tvEventHandler;
}
}
componentDidMount() {
this._enableTVEventHandler();
}
componentWillUnmount() {
this._disableTVEventHandler();
}
render() {
if (Platform.isTVOS) {
return (
<View>
<TouchableOpacity onPress={() => {}}>
<Text>
This example enables an instance of TVEventHandler to show the last event detected from the Apple TV Siri remote or from a keyboard.
</Text>
</TouchableOpacity>
<Text style={{color: 'blue'}}>
{this.state.lastEventType}
</Text>
</View>
);
} else {
return (
<View>
<Text>
This example is intended to be run on Apple TV.
</Text>
</View>
);
}
}
}