status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
12,775 Commits 61 Branches 315 Tags 184 MiB
Commit Graph

7 Commits

Author SHA1 Message Date
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
Caleb Meredith 90eaeb019b Upgrade fbsource/xplat/js to Flow v0.53.0 
Reviewed By: avikchaudhuri

Differential Revision:
D5648819
Ninja: T20988071

fbshipit-source-id: 66e5b6747c79ae66b6eb69d40ede5e982c26174f
 2017-08-17 18:45:01 -07:00
Miguel Jimenez Esun 737abe3b76 Revert D5388655: BREAKING: Add regenerator-runtime on demand, based on the files 
Differential Revision: D5388655

fbshipit-source-id: 2f92d6ae69f4772195aeca7493f53209388b3ad0
 2017-07-19 12:08:38 -07:00
Miguel Jimenez Esun 3103258ca0 BREAKING: Add regenerator-runtime on demand, based on the files 
Summary:
Adding a Babel plugin that will analyze the file looking for any potential candidate to use `regenerator-runtime`, and if so, will inject dynamically the module. The module is injected per file, so we avoid polluting the global environment. The plugin is also able to inject the `require` call beforehand, so that the inliner can pick them and inline them.

The Babel plugin is part of `react-native-babel-preset`, so as long as you are using this preset you are safe. If not, you should include the specific transformer into your list of plugins, as `react-native-babel-preset/transforms/transform-regenerator-runtime-insertion.js`.

Reviewed By: davidaurelio

Differential Revision: D5388655

fbshipit-source-id: dc403f3d5e2d807529eb8569a85c45fec36a6a3e
 2017-07-19 11:04:33 -07:00
Christoph Nakazawa e0eee0bb49 Revert D5321193: BREAKING: Add regenerator-runtime on demand, based on the files 
Differential Revision: D5321193

fbshipit-source-id: 9113ed78e59ae9e9f3f86ca2fda2db3bd8c0dd7c
 2017-07-07 10:48:37 -07:00
Miguel Jimenez Esun 361f03badb BREAKING: Add regenerator-runtime on demand, based on the files 
Summary:
Adding a Babel plugin that will analyze the file looking for any potential candidate to use `regenerator-runtime`, and if so, will inject dynamically the module. The module is injected per file, so we avoid polluting the global environment. The plugin is also able to inject the `require` call beforehand, so that the inliner can pick them and inline them.

The Babel plugin is part of `react-native-babel-preset`, so as long as you are using this preset you are safe. If not, you should include the specific transformer into your list of plugins, as `react-native-babel-preset/transforms/transform-regenerator-runtime-insertion.js`.

Reviewed By: davidaurelio

Differential Revision: D5321193

fbshipit-source-id: fd4805b28c8a2b986842e23570a64003370d2067
 2017-07-07 07:47:13 -07:00
Eric Vicenti 4a80dceac7 Re-license and rename UIExplorer integration test app as RNTester 
Reviewed By: yungsters

Differential Revision: D4950085

fbshipit-source-id: 44574b5d0ef0d2ad5dfc714309b18dc69cbad9ff
 2017-05-08 11:31:19 -07:00