status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
react-native/RNTester/js
History
Douglas 45185947ee 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 13:54:54 -08:00
..
AnimatedGratuitousApp Add closed-form damped harmonic oscillator algorithm to Animated.spring 2017-09-20 23:38:16 -07:00
Thumbnails Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ARTExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AccessibilityAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AccessibilityIOSExample.js Proper support of the accessibilityLabel for <Text> components on iOS 2017-09-12 12:53:59 -07:00
ActionSheetIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ActivityIndicatorExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AlertExample.js Alert - allow for hiding alert title on iOS 2017-08-30 17:16:17 -07:00
AlertIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AnimatedExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AppStateExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AssetScaledImageExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AsyncStorageExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
BorderExample.js Implement border(Left|Right|Top|Bottom)Color for rounded borders 2017-10-18 19:33:30 -07:00
BoxShadowExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ButtonExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
CameraRollExample.js Codemod to 1.7.0 2017-09-26 23:45:48 -07:00
CameraRollView.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
CheckBoxExample.js Codemod to 1.7.0 2017-09-26 23:45:48 -07:00
ClipboardExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
DatePickerAndroidExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
DatePickerIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
DimensionsExample.js Implement a JSTester example for the Dimensions API 2017-10-20 19:00:54 -07:00
ExampleTypes.js Fix React Native open source 2017-08-29 15:01:05 -07:00
FlatListExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
GeolocationExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ImageCapInsetsExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ImageEditingExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ImageExample.js Revert D5189017: [RN] Native implementation of <Image> intrinsic content size on iOS 2017-10-25 08:20:48 -07:00
KeyboardAvoidingViewExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
LayoutAnimationExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
LayoutEventsExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
LayoutExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
LinkingExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ListExampleShared.js Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) 2017-11-09 13:54:54 -08:00
ListViewExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ListViewGridLayoutExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ListViewPagingExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
MaskedViewExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ModalExample.js Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) 2017-11-09 13:54:54 -08:00
MultiColumnExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
NativeAnimationsExample.js Add closed-form damped harmonic oscillator algorithm to Animated.spring 2017-09-20 23:38:16 -07:00
NavigatorIOSBarStyleExample.js fix missing @providesModule 2017-08-25 11:00:00 -07:00
NavigatorIOSColorsExample.js Expose barStyle for NavigatorIOS and TabBarIOS 2017-08-25 00:14:46 -07:00
NavigatorIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
NetInfoExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
OrientationChangeExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
PanResponderExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
PermissionsExampleAndroid.android.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
PickerExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
PickerIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
PointerEventsExample.js Fix React Native open source 2017-08-29 15:01:05 -07:00
ProgressBarAndroidExample.android.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ProgressViewIOSExample.js @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
PushNotificationIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RCTRootViewIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterActions.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterApp.android.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterApp.ios.js Fix React Native open source 2017-08-29 15:01:05 -07:00
RNTesterBlock.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterButton.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterExampleContainer.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterExampleList.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterList.android.js Implement a JSTester example for the Dimensions API 2017-10-20 19:00:54 -07:00
RNTesterList.ios.js Implement a JSTester example for the Dimensions API 2017-10-20 19:00:54 -07:00
RNTesterNavigationReducer.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterPage.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterSettingSwitchRow.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterStatePersister.js Fix React Native open source 2017-08-29 15:01:05 -07:00
RNTesterTitle.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RTLExample.js Add examples to RTLExample 2017-10-18 19:33:33 -07:00
RefreshControlExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RootViewSizeFlexibilityExampleApp.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SafeAreaViewExample.js DeviceInfo.isIPhoneX_deprecated: ugly and temporary way to fix your UI on iPhone X 2017-10-02 23:00:03 -07:00
ScrollViewExample.js @allow-large-files Flow 0.58 upgrade for xplat/js 2017-11-02 10:51:14 -07:00
ScrollViewSimpleExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SectionListExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SegmentedControlIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SetPropertiesExampleApp.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ShareExample.js "subject" field for Share 2017-10-23 11:32:44 -07:00
SliderExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SnapshotExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
StatusBarExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SwipeableFlatListExample.js Run eslint --fix 2017-10-09 17:46:44 -07:00
SwipeableListViewExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
SwitchExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
TVEventHandlerExample.js Run eslint --fix 2017-10-09 17:46:44 -07:00
TabBarIOSBarStyleExample.js fix missing @providesModule 2017-08-25 11:00:00 -07:00
TabBarIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
TextExample.android.js Text to Spannable conversion is now using PRIORITY flag to enforce the order of spans 2017-09-17 22:00:16 -07:00
TextExample.ios.js Re-render views when direction changes 2017-10-03 13:01:06 -07:00
TextInputExample.android.js Run eslint --fix 2017-10-09 17:46:44 -07:00
TextInputExample.ios.js Run eslint --fix 2017-10-09 17:46:44 -07:00
TimePickerAndroidExample.js Add TimePicker modes 2017-10-08 12:38:45 -07:00
TimerExample.js @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
ToastAndroidExample.android.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ToolbarAndroidExample.android.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
TouchableExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
TransformExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
TransparentHitTestExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
URIActionMap.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
VibrationExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
VibrationIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ViewExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ViewPagerAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
WebSocketExample.js Codemod to 1.7.0 2017-09-26 23:45:48 -07:00
WebViewExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleBinaryUpload.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExampleCookies.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExampleDownload.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExampleFetch.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExampleFormData.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExampleHeaders.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleOnTimeOut.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
bunny.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
createExamplePage.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
flux@3x.png fixed image in RNTester snapshot example 2017-08-31 15:16:05 -07:00
hawk.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
helloworld.html Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
http_test_server.js @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
imageMask.png MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
messagingtest.html Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
relay@3x.png fixed image in RNTester snapshot example 2017-08-31 15:16:05 -07:00
slider-left.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-left@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-right.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-right@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_comment_highlighted@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_comment_normal@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_thumb_big.png Revert D5189017: [RN] Native implementation of <Image> intrinsic content size on iOS 2017-10-25 08:20:48 -07:00
uie_thumb_normal@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_thumb_selected@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
websocket_test_server.js @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00