2015-07-28 14:31:26 +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.
|
2015-07-28 14:31:26 +00:00
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
#import <UIKit/UIKit.h>
|
|
|
|
|
|
2016-11-23 15:47:52 +00:00
|
|
|
#import <React/RCTInvalidating.h>
|
|
|
|
|
#import <React/RCTModalHostViewManager.h>
|
|
|
|
|
#import <React/RCTView.h>
|
2015-08-13 16:09:10 +00:00
|
|
|
|
2015-07-28 14:31:26 +00:00
|
|
|
@class RCTBridge;
|
2016-08-23 23:50:23 +00:00
|
|
|
@class RCTModalHostViewController;
|
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
|
|
|
@class RCTTVRemoteHandler;
|
2016-08-23 23:50:23 +00:00
|
|
|
|
|
|
|
|
@protocol RCTModalHostViewInteractor;
|
2015-07-28 14:31:26 +00:00
|
|
|
|
2015-08-13 16:09:10 +00:00
|
|
|
@interface RCTModalHostView : UIView <RCTInvalidating>
|
2015-07-28 14:31:26 +00:00
|
|
|
|
2016-04-28 22:59:11 +00:00
|
|
|
@property (nonatomic, copy) NSString *animationType;
|
2017-06-21 02:02:27 +00:00
|
|
|
@property (nonatomic, assign) UIModalPresentationStyle presentationStyle;
|
2015-08-13 16:09:10 +00:00
|
|
|
@property (nonatomic, assign, getter=isTransparent) BOOL transparent;
|
2015-07-28 14:31:26 +00:00
|
|
|
|
2016-03-03 20:42:41 +00:00
|
|
|
@property (nonatomic, copy) RCTDirectEventBlock onShow;
|
|
|
|
|
|
2017-09-21 21:46:42 +00:00
|
|
|
@property (nonatomic, copy) NSNumber *identifier;
|
|
|
|
|
|
2016-08-23 23:50:23 +00:00
|
|
|
@property (nonatomic, weak) id<RCTModalHostViewInteractor> delegate;
|
|
|
|
|
|
2016-09-07 13:06:12 +00:00
|
|
|
@property (nonatomic, copy) NSArray<NSString *> *supportedOrientations;
|
|
|
|
|
@property (nonatomic, copy) RCTDirectEventBlock onOrientationChange;
|
|
|
|
|
|
2017-08-17 22:05:26 +00:00
|
|
|
#if TARGET_OS_TV
|
|
|
|
|
@property (nonatomic, copy) RCTDirectEventBlock onRequestClose;
|
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
|
|
|
@property (nonatomic, strong) RCTTVRemoteHandler *tvRemoteHandler;
|
2017-08-17 22:05:26 +00:00
|
|
|
#endif
|
|
|
|
|
|
2015-07-28 14:31:26 +00:00
|
|
|
- (instancetype)initWithBridge:(RCTBridge *)bridge NS_DESIGNATED_INITIALIZER;
|
|
|
|
|
|
|
|
|
|
@end
|
2016-08-23 23:50:23 +00:00
|
|
|
|
|
|
|
|
@protocol RCTModalHostViewInteractor <NSObject>
|
|
|
|
|
|
|
|
|
|
- (void)presentModalHostView:(RCTModalHostView *)modalHostView withViewController:(RCTModalHostViewController *)viewController animated:(BOOL)animated;
|
|
|
|
|
- (void)dismissModalHostView:(RCTModalHostView *)modalHostView withViewController:(RCTModalHostViewController *)viewController animated:(BOOL)animated;
|
|
|
|
|
|
|
|
|
|
@end
|
