react-native/React/Base/RCTTVRemoteHandler.m

233 lines
7.7 KiB
Mathematica
Raw Normal View History

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "RCTTVRemoteHandler.h"
#import <UIKit/UIGestureRecognizerSubclass.h>
#import "RCTAssert.h"
#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
#import "RCTLog.h"
#import "RCTRootView.h"
#import "RCTTVNavigationEventEmitter.h"
#import "RCTUIManager.h"
#import "RCTUtils.h"
#import "RCTView.h"
#import "UIView+React.h"
#if __has_include("RCTDevMenu.h")
#import "RCTDevMenu.h"
#endif
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
NSString *const RCTTVRemoteEventMenu = @"menu";
NSString *const RCTTVRemoteEventPlayPause = @"playPause";
NSString *const RCTTVRemoteEventSelect = @"select";
NSString *const RCTTVRemoteEventLongPlayPause = @"longPlayPause";
NSString *const RCTTVRemoteEventLongSelect = @"longSelect";
NSString *const RCTTVRemoteEventLeft = @"left";
NSString *const RCTTVRemoteEventRight = @"right";
NSString *const RCTTVRemoteEventUp = @"up";
NSString *const RCTTVRemoteEventDown = @"down";
NSString *const RCTTVRemoteEventSwipeLeft = @"swipeLeft";
NSString *const RCTTVRemoteEventSwipeRight = @"swipeRight";
NSString *const RCTTVRemoteEventSwipeUp = @"swipeUp";
NSString *const RCTTVRemoteEventSwipeDown = @"swipeDown";
@implementation RCTTVRemoteHandler {
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
NSMutableDictionary<NSString *, UIGestureRecognizer *> *_tvRemoteGestureRecognizers;
}
- (instancetype)init
{
if ((self = [super init])) {
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
_tvRemoteGestureRecognizers = [NSMutableDictionary dictionary];
// Recognizers for Apple TV remote buttons
// Play/Pause
[self addTapGestureRecognizerWithSelector:@selector(playPausePressed:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
pressType:UIPressTypePlayPause
name:RCTTVRemoteEventPlayPause];
// Menu
[self addTapGestureRecognizerWithSelector:@selector(menuPressed:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
pressType:UIPressTypeMenu
name:RCTTVRemoteEventMenu];
// Select
[self addTapGestureRecognizerWithSelector:@selector(selectPressed:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
pressType:UIPressTypeSelect
name:RCTTVRemoteEventSelect];
// Up
[self addTapGestureRecognizerWithSelector:@selector(tappedUp:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
pressType:UIPressTypeUpArrow
name:RCTTVRemoteEventUp];
// Down
[self addTapGestureRecognizerWithSelector:@selector(tappedDown:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
pressType:UIPressTypeDownArrow
name:RCTTVRemoteEventDown];
// Left
[self addTapGestureRecognizerWithSelector:@selector(tappedLeft:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
pressType:UIPressTypeLeftArrow
name:RCTTVRemoteEventLeft];
// Right
[self addTapGestureRecognizerWithSelector:@selector(tappedRight:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
pressType:UIPressTypeRightArrow
name:RCTTVRemoteEventRight];
// Recognizers for long button presses
// We don't intercept long menu press -- that's used by the system to go to the home screen
[self addLongPressGestureRecognizerWithSelector:@selector(longPlayPausePressed:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
pressType:UIPressTypePlayPause
name:RCTTVRemoteEventLongPlayPause];
[self addLongPressGestureRecognizerWithSelector:@selector(longSelectPressed:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
pressType:UIPressTypeSelect
name:RCTTVRemoteEventLongSelect];
// Recognizers for Apple TV remote trackpad swipes
// Up
[self addSwipeGestureRecognizerWithSelector:@selector(swipedUp:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
direction:UISwipeGestureRecognizerDirectionUp
name:RCTTVRemoteEventSwipeUp];
// Down
[self addSwipeGestureRecognizerWithSelector:@selector(swipedDown:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
direction:UISwipeGestureRecognizerDirectionDown
name:RCTTVRemoteEventSwipeDown];
// Left
[self addSwipeGestureRecognizerWithSelector:@selector(swipedLeft:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
direction:UISwipeGestureRecognizerDirectionLeft
name:RCTTVRemoteEventSwipeLeft];
// Right
[self addSwipeGestureRecognizerWithSelector:@selector(swipedRight:)
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
direction:UISwipeGestureRecognizerDirectionRight
name:RCTTVRemoteEventSwipeRight];
}
return self;
}
- (void)playPausePressed:(UIGestureRecognizer *)r
{
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
[self sendAppleTVEvent:RCTTVRemoteEventPlayPause toView:r.view];
}
- (void)menuPressed:(UIGestureRecognizer *)r
{
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
[self sendAppleTVEvent:RCTTVRemoteEventMenu toView:r.view];
}
- (void)selectPressed:(UIGestureRecognizer *)r
{
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
[self sendAppleTVEvent:RCTTVRemoteEventSelect toView:r.view];
}
- (void)longPlayPausePressed:(UIGestureRecognizer *)r
{
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
[self sendAppleTVEvent:RCTTVRemoteEventLongPlayPause toView:r.view];
#if __has_include("RCTDevMenu.h") && RCT_DEV
// If shake to show is enabled on device, use long play/pause event to show dev menu
[[NSNotificationCenter defaultCenter] postNotificationName:RCTShowDevMenuNotification object:nil];
#endif
}
- (void)longSelectPressed:(UIGestureRecognizer *)r
{
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
[self sendAppleTVEvent:RCTTVRemoteEventLongSelect toView:r.view];
}
- (void)swipedUp:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventSwipeUp toView:r.view];
}
- (void)swipedDown:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventSwipeDown toView:r.view];
}
- (void)swipedLeft:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventSwipeLeft toView:r.view];
}
- (void)swipedRight:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventSwipeRight toView:r.view];
}
- (void)tappedUp:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventUp toView:r.view];
}
- (void)tappedDown:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventDown toView:r.view];
}
- (void)tappedLeft:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventLeft toView:r.view];
}
- (void)tappedRight:(UIGestureRecognizer *)r
{
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
[self sendAppleTVEvent:RCTTVRemoteEventRight toView:r.view];
}
#pragma mark -
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
- (void)addLongPressGestureRecognizerWithSelector:(nonnull SEL)selector pressType:(UIPressType)pressType name:(NSString *)name
{
UILongPressGestureRecognizer *recognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:selector];
recognizer.allowedPressTypes = @[@(pressType)];
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
_tvRemoteGestureRecognizers[name] = recognizer;
}
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
- (void)addTapGestureRecognizerWithSelector:(nonnull SEL)selector pressType:(UIPressType)pressType name:(NSString *)name
{
UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:selector];
recognizer.allowedPressTypes = @[@(pressType)];
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
_tvRemoteGestureRecognizers[name] = recognizer;
}
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
- (void)addSwipeGestureRecognizerWithSelector:(nonnull SEL)selector direction:(UISwipeGestureRecognizerDirection)direction name:(NSString *)name
{
UISwipeGestureRecognizer *recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:selector];
recognizer.direction = direction;
Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) Summary: **Motivation** Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible. The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals). This PR also fixes some breakages in compiling React Native for tvOS. **Test plan** Compilation fixes should enable tvOS compile test to pass in Travis CI. The modal fix can be tested with the following component, modified from the original source in #15389 . ``` javascript import React, { Component } from 'react'; import ReactNative from 'ReactNative'; import { Text, View, StyleSheet, TouchableHighlight, TVEventHandler, Modal, } from 'react-native'; export default class Events extends Component { constructor(props) { super(props); this.state = { modalVisible: false, }; this._tvEventHandler = new TVEventHandler(); } _enableTVEventHandler() { this._tvEventHandler.enable(this, (cmp, evt) => { const myTag = ReactNative.findNodeHandle(cmp); console.log('Event.js TVEventHandler: ', evt.eventType); // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') { // console.log('Event.js TVEventHandler: ', evt.eventType); // } }); } _disableTVEventHandler() { if (this._tvEventHandler) { this._tvEventHandler.disable(); delete this._tvEventHandler; } } componentDidMount() { this._enableTVEventHandler(); } componentWillUnmount() { this._disableTVEventHandler(); } _renderRow() { return ( <View style={styles.row}> { Array.from({ length: 7 }).map((_, index) => { return ( <TouchableHighlight key={index} onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }} > <View style={styles.item}> <Text style={styles.itemText}>{ index }</Text> </View> </TouchableHighlight> ); }) } </View> ); } onTVEvent(cmp, evt) { console.log('Modal.js TVEventHandler: ', evt.eventType); } hideModal() { this.setState({ modalVisible: false }); } render() { return ( <View style={styles.container}> <Modal visible={this.state.modalVisible} onRequestClose={() => this.hideModal()}> <View style={styles.modal}> { this._renderRow() } { this._renderRow() } </View> </Modal> { this._renderRow() } { this._renderRow() } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkslategrey', }, row: { flexDirection: 'row', padding: 30, }, item: { width: 200, height: 100, borderColor: 'cyan', borderWidth: 2, margin: 30, alignItems: 'center', justifyContent: 'center', }, itemText: { fontSize: 40, color: 'cyan', }, modal: { flex: 1, backgroundColor: 'steelblue', }, }); ``` **Release Notes** After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV. Closes https://github.com/facebook/react-native/pull/16076 Differential Revision: D6288801 Pulled By: hramos fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 21:41:29 +00:00
_tvRemoteGestureRecognizers[name] = recognizer;
}
- (void)sendAppleTVEvent:(NSString *)eventType toView:(__unused UIView *)v
{
[[NSNotificationCenter defaultCenter] postNotificationName:RCTTVNavigationEventNotification
object:@{@"eventType":eventType}];
}
@end