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

id, title, original_id

id	title	original_id
version-0.29-modal	modal	modal

Modal #

Edit on GitHub

The Modal component is a simple way to present content above an enclosing view.

Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go here to compare navigation options.

import React, { Component } from 'react'; import { Modal, Text, TouchableHighlight, View } from 'react-native';

class ModalExample extends Component {

constructor(props) { super(props); this.state = {modalVisible: false}; }

setModalVisible(visible) { this.setState({modalVisible: visible}); }

render() { return ( <View style={{marginTop: 22}}> <Modal animationType={"slide"} transparent={false} visible={this.state.modalVisible} onRequestClose={() => {alert("Modal has been closed.")}} > <View style={{marginTop: 22}}> <View> <Text>Hello World!</Text>

        &lt;TouchableHighlight onPress<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 operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>modalVisible<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
          &lt;Text<span class="token operator">&gt;</span>Hide Modal&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>TouchableHighlight<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;TouchableHighlight onPress<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">true</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
      &lt;Text<span class="token operator">&gt;</span>Show Modal&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>TouchableHighlight<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>

} }

Props #

animated bool #

Deprecated

Use the animationType prop instead.

animationType enum('none', 'slide', 'fade') #

The animationType prop controls how the modal animates.

• slide slides in from the bottom
• fade fades into view
• none appears without an animation

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

The onRequestClose prop allows passing a function that will be called once the modal has been dismissed.

On the Android platform, this is a required function.

onShow function #

The onShow prop allows passing a function that will be called once the modal has been shown.

transparent bool #

The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.

visible bool #

The visible prop determines whether your modal is visible.

Examples #

Edit on GitHub

'use strict';

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

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 { animationType: 'none', modalVisible: false, transparent: false, }; },

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

_setAnimationType(type) { this.setState({animationType: type}); },

_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; var activeButtonStyle = { backgroundColor: '#ddd' };

<span class="token keyword">return</span> <span class="token punctuation">(</span>
  &lt;View<span class="token operator">&gt;</span>
    &lt;Modal
      animationType<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>animationType<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>animationType <span class="token operator">===</span> <span class="token string">'none'</span> <span class="token operator">?</span> <span class="token string">'without'</span> <span class="token punctuation">:</span> <span class="token string">'with'</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>Animation Type&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>_setAnimationType<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 string">'none'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<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>animationType <span class="token operator">===</span> <span class="token string">'none'</span> <span class="token operator">?</span> activeButtonStyle <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
        none
      &lt;<span class="token operator">/</span>Button<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>_setAnimationType<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 string">'slide'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<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>animationType <span class="token operator">===</span> <span class="token string">'slide'</span> <span class="token operator">?</span> activeButtonStyle <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
        slide
      &lt;<span class="token operator">/</span>Button<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>_setAnimationType<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 string">'fade'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<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>animationType <span class="token operator">===</span> <span class="token string">'fade'</span> <span class="token operator">?</span> activeButtonStyle <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
        fade
      &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;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, }, });

Run this example

×

Powered by appetize.io

Next →