react-native/website/versioned_docs/0.24/modal.md

id, title, original_id

id	title	original_id
version-0.24-modal	modal	modal

Modal #

Edit on GitHub

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.

Props #

animated bool #

onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #

onShow function #

transparent bool #

visible bool #

Examples #

Edit on GitHub

'use strict';

var React = require('react-native'); var { Modal, StyleSheet, Switch, Text, TouchableHighlight, View, } = React;

exports.displayName = (undefined: ?string); exports.framework = 'React'; exports.title = '<Modal>'; exports.description = 'Component for presenting modal views.';

var Button = React.createClass({ getInitialState() { return { active: false, }; },

_onHighlight() { this.setState({active: true}); },

_onUnhighlight() { this.setState({active: false}); },

render() { var colorStyle = { color: this.state.active ? '#fff' : '#000', }; return ( <TouchableHighlight onHideUnderlay={this._onUnhighlight} onPress={this.props.onPress} onShowUnderlay={this._onHighlight} style={[styles.button, this.props.style]} underlayColor="#a9d9d4"> <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text> </TouchableHighlight> ); } });

var ModalExample = React.createClass({ getInitialState() { return { animated: true, modalVisible: false, transparent: false, }; },

_setModalVisible(visible) { this.setState({modalVisible: visible}); },

_toggleAnimated() { this.setState({animated: !this.state.animated}); },

_toggleTransparent() { this.setState({transparent: !this.state.transparent}); },

render() { var modalBackgroundStyle = { backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff', }; var innerContainerTransparentStyle = this.state.transparent ? {backgroundColor: '#fff', padding: 20} : null;

<span class="token keyword">return</span> <span class="token punctuation">(</span>
  &lt;View<span class="token operator">&gt;</span>
    &lt;Modal
      animated<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animated<span class="token punctuation">}</span>
      transparent<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>transparent<span class="token punctuation">}</span>
      visible<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>modalVisible<span class="token punctuation">}</span>
      onRequestClose<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_setModalVisible<span class="token punctuation">(</span></span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
      <span class="token operator">&gt;</span>
      &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">,</span> modalBackgroundStyle<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>innerContainer<span class="token punctuation">,</span> innerContainerTransparentStyle<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
          &lt;Text<span class="token operator">&gt;</span>This modal was presented <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animated <span class="token operator">?</span> <span class="token string">'with'</span> <span class="token punctuation">:</span> <span class="token string">'without'</span><span class="token punctuation">}</span> animation<span class="token punctuation">.</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
          &lt;Button
            onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_setModalVisible<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>modalButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
            Close
          &lt;<span class="token operator">/</span>Button<span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>Modal<span class="token operator">&gt;</span>

    &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>row<span class="token punctuation">}</span><span class="token operator">&gt;</span>
      &lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rowTitle<span class="token punctuation">}</span><span class="token operator">&gt;</span>Animated&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;Switch value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animated<span class="token punctuation">}</span> onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_toggleAnimated<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>

    &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>row<span class="token punctuation">}</span><span class="token operator">&gt;</span>
      &lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rowTitle<span class="token punctuation">}</span><span class="token operator">&gt;</span>Transparent&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;Switch value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>transparent<span class="token punctuation">}</span> onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_toggleTransparent<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>

    &lt;Button onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_setModalVisible<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
      Present
    &lt;<span class="token operator">/</span>Button<span class="token operator">&gt;</span>
  &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

}, });

exports.examples = [ { title: 'Modal Presentation', description: 'Modals can be presented with or without animation', render: () => <ModalExample />, }, ];

var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 20, }, innerContainer: { borderRadius: 10, alignItems: 'center', }, row: { alignItems: 'center', flex: 1, flexDirection: 'row', marginBottom: 20, }, rowTitle: { flex: 1, fontWeight: 'bold', }, button: { borderRadius: 5, flex: 1, height: 44, alignSelf: 'stretch', justifyContent: 'center', overflow: 'hidden', }, buttonText: { fontSize: 18, margin: 5, textAlign: 'center', }, modalButton: { marginTop: 10, }, });

Next →