Commit Graph

12 Commits

Author SHA1 Message Date
Sophie Alpert 1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
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
Mehdi Mulani a389ffbd84 Add onDismiss to Modal.js
Summary: Adds an onDismiss so that navigation events can be chained to the dismissing of a modal.

Reviewed By: sahrens

Differential Revision: D5852953

fbshipit-source-id: a86e36fdd5b0b206c2dd9fa248e2a88da22efa31
2017-09-21 15:01:52 -07:00
Douglas Lowder 0d3039f1a0 Fix for Modal behavior when menu button pressed on Apple TV (Issue #15313)
Summary:
**Motivation**

On Apple TV, pressing the menu button destroys the native view that backs the `Modal` component, causing an app using this component to get into a broken state.  This fix implements `onRequestClose` for tvOS to have the same behavior as it does for the Android back button.

**Test plan**

Manually tested this with the `ModalExample` in the `RNTester` app.  See also the test code in issue #15313.
Closes https://github.com/facebook/react-native/pull/15341

Differential Revision: D5651035

Pulled By: shergin

fbshipit-source-id: 54bf66887bbe85940567e63e90b437ac4a8daf9a
2017-08-17 15:22:12 -07:00
Hank Brekke ec68536e08 iOS `presentationStyle` Modal Appearance
Summary:
When using `<Modal` on larger iOS devices, esp. iPad and iPhone 7 Plus devices, there is no way to use the system functionality for controlling the appearance of modals (`presentationStyle`), which improves the native system's animation and display of smaller content appearing within large horizontal space.

I've added a new picker for selecting a `presentationStyle` within  the RNTester app. See below for the appearance of this change, as well as the relevant changes to the RN documentation.

![may-22-2017 09-49-50](https://cloud.githubusercontent.com/assets/3521186/26315020/6d4b1cb0-3ed5-11e7-8ac8-a996f1ee00f9.gif)
<img width="1051" alt="screen shot 2017-05-22 at 9 50 12 am" src="https://cloud.githubusercontent.com/assets/3521186/26315021/6d4cbf7a-3ed5-11e7-9d13-a5d20c9f3533.png">
Closes https://github.com/facebook/react-native/pull/14102

Differential Revision: D5281990

Pulled By: shergin

fbshipit-source-id: 882d8cb79e7adb0b4437cdf26e5e7ab1fc04f4c1
2017-06-20 19:22:57 -07:00
Pieter De Baets e1577df1fd Move all header imports to "<React/..>"
Summary:
To make React Native play nicely with our internal build infrastructure we need to properly namespace all of our header includes.

Where previously you could do `#import "RCTBridge.h"`, you must now write this as `#import <React/RCTBridge.h>`. If your xcode project still has a custom header include path, both variants will likely continue to work, but for new projects, we're defaulting the header include path to `$(BUILT_PRODUCTS_DIR)/usr/local/include`, where the React and CSSLayout targets will copy a subset of headers too. To make Xcode copy headers phase work properly, you may need to add React as an explicit dependency to your app's scheme and disable "parallelize build".

Reviewed By: mmmulani

Differential Revision: D4213120

fbshipit-source-id: 84a32a4b250c27699e6795f43584f13d594a9a82
2016-11-23 07:58:39 -08:00
Mehdi Mulani de3457f31d Allow <Modal /> to be presented in different orientations
Reviewed By: javache

Differential Revision: D3760002

fbshipit-source-id: 01f5c246fb0fc041ec2d63b4ef80de858fb6fdf2
2016-09-07 13:10:11 -07:00
Mehdi Mulani d8b2bab794 Allow <Modal /> to be configured with a custom presentation/dismissal block
Reviewed By: javache, majak

Differential Revision: D3751545

fbshipit-source-id: 4cf420769f7939289c0b0b70ae784328df8e2bbf
2016-08-23 16:58:41 -07:00
Jesse Sessler 2bb1c263db Modal Animation Types
Summary:
Currently the Modal component uses the slide up / down animation for presenting and hiding the Modal with no options. This PR gives users a choice to use a fade in / out animation or the current slide animation (slide is the default). Android and iOS.

![](http://g.recordit.co/nfJSg487Ox.gif)  ![](http://g.recordit.co/QHGDuUFbPy.gif)

I've updated the UIExplorer and documentation.

![image](https://cloud.githubusercontent.com/assets/4265163/14743130/0bd8282c-086e-11e6-93eb-3d344431337d.png)

Thanks!
Closes https://github.com/facebook/react-native/pull/7156

Differential Revision: D3237809

Pulled By: javache

fb-gh-sync-id: 813e56ada8b19990dc5018527dc3a81b2c8b349a
fbshipit-source-id: 813e56ada8b19990dc5018527dc3a81b2c8b349a
2016-04-28 16:00:32 -07:00
Eric Lo 8c25181c44 Add onShow callback for RCTModalHostView
Summary: Added ability to include a callback to the modal. The callback is invoked when the modal is shown.

Reviewed By: javache

Differential Revision: D3005212

fb-gh-sync-id: 12648e17bd1cf831daf65529b87ae8cfdb901c65
shipit-source-id: 12648e17bd1cf831daf65529b87ae8cfdb901c65
2016-03-03 12:43:36 -08:00
Alexsander Akers 0f14933948 Enable transparent modal presentation with <Modal />
Summary:
Enable transparent modal backgrounds using `UIModalPresentationCustom` modal presentation style.
2015-08-14 04:47:12 -08:00
Alex Akers 7d19ff3dcb Add <Modal /> component
Summary:
Create Modal component that can be used to present content modally.
2015-07-28 07:21:50 -08:00