2016-12-19 14:26:07 +00:00
|
|
|
/**
|
|
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
|
|
*
|
2018-02-17 02:24:55 +00:00
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
2016-12-19 14:26:07 +00:00
|
|
|
*/
|
|
|
|
|
|
|
|
#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"
|
|
|
|
|
2017-08-09 13:58:03 +00:00
|
|
|
#if __has_include("RCTDevMenu.h")
|
2017-07-31 10:53:09 +00:00
|
|
|
#import "RCTDevMenu.h"
|
2017-08-09 13:58:03 +00:00
|
|
|
#endif
|
2017-07-31 10:53:09 +00:00
|
|
|
|
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";
|
|
|
|
|
|
|
|
|
2016-12-19 14:26:07 +00:00
|
|
|
@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;
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
- (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];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// 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];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// 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];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// 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];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// Up
|
|
|
|
[self addTapGestureRecognizerWithSelector:@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
|
|
|
pressType:UIPressTypeUpArrow
|
|
|
|
name:RCTTVRemoteEventUp];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// Down
|
|
|
|
[self addTapGestureRecognizerWithSelector:@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
|
|
|
pressType:UIPressTypeDownArrow
|
|
|
|
name:RCTTVRemoteEventDown];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// Left
|
|
|
|
[self addTapGestureRecognizerWithSelector:@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
|
|
|
pressType:UIPressTypeLeftArrow
|
|
|
|
name:RCTTVRemoteEventLeft];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// Right
|
|
|
|
[self addTapGestureRecognizerWithSelector:@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
|
|
|
pressType:UIPressTypeRightArrow
|
|
|
|
name:RCTTVRemoteEventRight];
|
2017-08-09 13:58:03 +00:00
|
|
|
|
2017-07-31 10:53:09 +00:00
|
|
|
// Recognizers for long button presses
|
|
|
|
// We don't intercept long menu press -- that's used by the system to go to the home screen
|
2017-08-09 13:58:03 +00:00
|
|
|
|
2017-07-31 10:53:09 +00:00
|
|
|
[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];
|
2017-08-09 13:58:03 +00:00
|
|
|
|
2017-07-31 10:53:09 +00:00
|
|
|
[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];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// 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];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// 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];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// 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];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
// 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];
|
2016-12-19 14:26:07 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
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];
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
- (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];
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
- (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];
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
2017-07-31 10:53:09 +00:00
|
|
|
- (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];
|
2017-07-31 10:53:09 +00:00
|
|
|
|
2017-08-09 13:58:03 +00:00
|
|
|
#if __has_include("RCTDevMenu.h") && RCT_DEV
|
2017-07-31 10:53:09 +00:00
|
|
|
// 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
|
2016-12-19 14:26:07 +00:00
|
|
|
{
|
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];
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
- (void)swipedUp:(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:RCTTVRemoteEventUp toView:r.view];
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
- (void)swipedDown:(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:RCTTVRemoteEventDown toView:r.view];
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
- (void)swipedLeft:(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:RCTTVRemoteEventLeft toView:r.view];
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
- (void)swipedRight:(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];
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#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
|
2017-07-31 10:53:09 +00:00
|
|
|
{
|
|
|
|
UILongPressGestureRecognizer *recognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:selector];
|
|
|
|
recognizer.allowedPressTypes = @[@(pressType)];
|
2017-08-09 13:58:03 +00:00
|
|
|
|
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;
|
2017-07-31 10:53:09 +00:00
|
|
|
}
|
|
|
|
|
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
|
2016-12-19 14:26:07 +00:00
|
|
|
{
|
|
|
|
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;
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
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
|
2016-12-19 14:26:07 +00:00
|
|
|
{
|
|
|
|
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;
|
2016-12-19 14:26:07 +00:00
|
|
|
}
|
|
|
|
|
2017-03-23 18:25:28 +00:00
|
|
|
- (void)sendAppleTVEvent:(NSString *)eventType toView:(__unused UIView *)v
|
2016-12-19 14:26:07 +00:00
|
|
|
{
|
|
|
|
[[NSNotificationCenter defaultCenter] postNotificationName:RCTTVNavigationEventNotification
|
|
|
|
object:@{@"eventType":eventType}];
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@end
|