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
45185947ee
