Satyajit Sahoo ce81f8b35a Make 'onRequestClose' a required prop for Modal on Android. Fixes #6612
Summary:The `onRequestClose` prop can be used to handle dismissing the modal by back button. It's pretty easy to miss the `onRequestClose` prop on Android. So making it a required prop makes sure that it generates a warning when not supplied.

Context #6612
Closes https://github.com/facebook/react-native/pull/6667

Differential Revision: D3102054

Pulled By: javache

fb-gh-sync-id: 878240606285d231b5592a438918e441765bfe5f
fbshipit-source-id: 878240606285d231b5592a438918e441765bfe5f
2016-03-26 10:24:24 -07:00

85 lines
2.3 KiB
JavaScript

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule Modal
* @flow
*/
'use strict';
var Platform = require('Platform');
var PropTypes = require('ReactPropTypes');
var React = require('React');
var StyleSheet = require('StyleSheet');
var View = require('View');
var requireNativeComponent = require('requireNativeComponent');
var RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
/**
* A Modal component covers the native view (e.g. UIViewController, Activity)
* that contains the React Native root.
*
* Use Modal in hybrid apps that embed React Native; Modal allows the portion of
* your app written in React Native to present content above the enclosing
* native view hierarchy.
*
* In apps written with React Native from the root view down, you should use
* Navigator instead of Modal. With a top-level Navigator, you have more control
* over how to present the modal scene over the rest of your app by using the
* configureScene property.
*/
class Modal extends React.Component {
render(): ?ReactElement {
if (this.props.visible === false) {
return null;
}
if (this.props.transparent) {
var containerBackgroundColor = {backgroundColor: 'transparent'};
}
return (
<RCTModalHostView
animated={this.props.animated}
transparent={this.props.transparent}
onRequestClose={this.props.onRequestClose}
onShow={this.props.onShow}
style={styles.modal}>
<View style={[styles.container, containerBackgroundColor]}>
{this.props.children}
</View>
</RCTModalHostView>
);
}
}
Modal.propTypes = {
animated: PropTypes.bool,
transparent: PropTypes.bool,
visible: PropTypes.bool,
onRequestClose: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func,
onShow: PropTypes.func,
};
Modal.defaultProps = {
visible: true,
};
var styles = StyleSheet.create({
modal: {
position: 'absolute',
},
container: {
position: 'absolute',
left: 0,
top: 0,
}
});
module.exports = Modal;