Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
f342b885508521c4f2ed79e2287dc08993cdcef5
react-native/docs/modal.html
T
Website Deployment Script f342b88550 Deploy website 
Deploy website version based on 9806dddd7b13df2f9d7b12bfd8255338640caf88
2020-03-25 16:29:32 +00:00

479 lines
55 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="docsearch:version" content="0.62"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'auto');
ga('send', 'pageview');
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/js/codeblocks.js"></script><script type="text/javascript" src="/js/tabs.js"></script><script type="text/javascript" src="/js/docs-rating.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
document.addEventListener('DOMContentLoaded', function() {
addBackToTop(
{"zIndex":100}
)
});
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>0.62</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/getting-started" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/docs/activityindicator" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Core Components</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Core Components<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/components-and-apis">Core Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/activityindicator">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/docs/button">Button</a></li><li class="navListItem"><a class="navItem" href="/docs/flatlist">FlatList</a></li><li class="navListItem"><a class="navItem" href="/docs/image">Image</a></li><li class="navListItem"><a class="navItem" href="/docs/imagebackground">ImageBackground</a></li><li class="navListItem"><a class="navItem" href="/docs/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/docs/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/docs/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/docs/safeareaview">SafeAreaView</a></li><li class="navListItem"><a class="navItem" href="/docs/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/sectionlist">SectionList</a></li><li class="navListItem"><a class="navItem" href="/docs/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/docs/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/docs/text">Text</a></li><li class="navListItem"><a class="navItem" href="/docs/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/docs/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/docs/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/docs/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/view">View</a></li><li class="navListItem"><a class="navItem" href="/docs/virtualizedlist">VirtualizedList</a></li><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">Android Components</h4><ul><li class="navListItem"><a class="navItem" href="/docs/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/touchablenativefeedback">TouchableNativeFeedback</a></li></ul></div><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">iOS Components</h4><ul><li class="navListItem"><a class="navItem" href="/docs/inputaccessoryview">InputAccessoryView</a></li><li class="navListItem"><a class="navItem" href="/docs/maskedviewios">MaskedViewIOS</a></li></ul></div></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Props<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/docs/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/docs/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/view-style-props">View Style Props</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">APIs<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/accessibilityinfo">AccessibilityInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/alert">Alert</a></li><li class="navListItem"><a class="navItem" href="/docs/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/docs/appearance">Appearance</a></li><li class="navListItem"><a class="navItem" href="/docs/appregistry">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/docs/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/docs/devsettings">DevSettings</a></li><li class="navListItem"><a class="navItem" href="/docs/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/docs/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/docs/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/docs/keyboard">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/docs/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/docs/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/docs/panresponder">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/docs/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/docs/share">Share</a></li><li class="navListItem"><a class="navItem" href="/docs/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/docs/systrace">Systrace</a></li><li class="navListItem"><a class="navItem" href="/docs/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/docs/vibration">Vibration</a></li><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">Hooks</h4><ul><li class="navListItem"><a class="navItem" href="/docs/usecolorscheme">useColorScheme</a></li><li class="navListItem"><a class="navItem" href="/docs/usewindowdimensions">useWindowDimensions</a></li></ul></div><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">Android APIs</h4><ul><li class="navListItem"><a class="navItem" href="/docs/backhandler">BackHandler</a></li><li class="navListItem"><a class="navItem" href="/docs/permissionsandroid">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/toastandroid">ToastAndroid</a></li></ul></div><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">iOS APIs</h4><ul><li class="navListItem"><a class="navItem" href="/docs/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/settings">Settings</a></li></ul></div></ul></div></div></section></div><script>
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
var headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
var el = event.target;
while(el !== headings){
if (el.tagName === 'A') {
document.body.classList.remove('tocActive');
break;
} else{
el = el.parentNode;
}
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a basic way to present content above an enclosing view.</p>
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
<div class="toggler">
<ul role="tablist" class="toggle-syntax">
<li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
Function Component Example
</li>
<li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
Class Component Example
</li>
</ul>
</div>
<p><block class="functional syntax" /></p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component, useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> {
Alert,
Modal,
StyleSheet,
Text,
TouchableHighlight,
View
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
<span class="hljs-keyword">const</span> [modalVisible, setModalVisible] = useState(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.centeredView}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Modal</span>
<span class="hljs-attr">animationType</span>=<span class="hljs-string">"slide"</span>
<span class="hljs-attr">transparent</span>=<span class="hljs-string">{true}</span>
<span class="hljs-attr">visible</span>=<span class="hljs-string">{modalVisible}</span>
<span class="hljs-attr">onRequestClose</span>=<span class="hljs-string">{()</span> =&gt;</span> {
Alert.alert("Modal has been closed.");
}}
&gt;
<span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.centeredView}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.modalView}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.modalText}</span>&gt;</span>Hello World!<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">TouchableHighlight</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">...styles.openButton</span>, <span class="hljs-attr">backgroundColor:</span> "#<span class="hljs-attr">2196F3</span>" }}
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =&gt;</span> {
setModalVisible(!modalVisible);
}}
&gt;
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.textStyle}</span>&gt;</span>Hide Modal<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">TouchableHighlight</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">Modal</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">TouchableHighlight</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">{styles.openButton}</span>
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =&gt;</span> {
setModalVisible(true);
}}
&gt;
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.textStyle}</span>&gt;</span>Show Modal<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">TouchableHighlight</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span></span>
);
};
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
<span class="hljs-attr">centeredView</span>: {
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>,
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
<span class="hljs-attr">marginTop</span>: <span class="hljs-number">22</span>
},
<span class="hljs-attr">modalView</span>: {
<span class="hljs-attr">margin</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"white"</span>,
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">padding</span>: <span class="hljs-number">35</span>,
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
<span class="hljs-attr">shadowColor</span>: <span class="hljs-string">"#000"</span>,
<span class="hljs-attr">shadowOffset</span>: {
<span class="hljs-attr">width</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">2</span>
},
<span class="hljs-attr">shadowOpacity</span>: <span class="hljs-number">0.25</span>,
<span class="hljs-attr">shadowRadius</span>: <span class="hljs-number">3.84</span>,
<span class="hljs-attr">elevation</span>: <span class="hljs-number">5</span>
},
<span class="hljs-attr">openButton</span>: {
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#F194FF"</span>,
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">elevation</span>: <span class="hljs-number">2</span>
},
<span class="hljs-attr">textStyle</span>: {
<span class="hljs-attr">color</span>: <span class="hljs-string">"white"</span>,
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">"bold"</span>,
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>
},
<span class="hljs-attr">modalText</span>: {
<span class="hljs-attr">marginBottom</span>: <span class="hljs-number">15</span>,
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>
}
});
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App;
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="Modal"
data-snack-description="Example usage"
data-snack-code="import%20React%2C%20%7B%20Component%2C%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20Alert%2C%0A%20%20Modal%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%20%20TouchableHighlight%2C%0A%20%20View%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5BmodalVisible%2C%20setModalVisible%5D%20%3D%20useState(false)%3B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.centeredView%7D%3E%0A%20%20%20%20%20%20%3CModal%0A%20%20%20%20%20%20%20%20animationType%3D%22slide%22%0A%20%20%20%20%20%20%20%20transparent%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20visible%3D%7BmodalVisible%7D%0A%20%20%20%20%20%20%20%20onRequestClose%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20Alert.alert(%22Modal%20has%20been%20closed.%22)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.centeredView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.modalView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.modalText%7D%3EHello%20World!%3C%2FText%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CTouchableHighlight%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20...styles.openButton%2C%20backgroundColor%3A%20%22%232196F3%22%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setModalVisible(!modalVisible)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3EHide%20Modal%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FTouchableHighlight%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FModal%3E%0A%0A%20%20%20%20%20%20%3CTouchableHighlight%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.openButton%7D%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20setModalVisible(true)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3EShow%20Modal%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FTouchableHighlight%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20centeredView%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20marginTop%3A%2022%0A%20%20%7D%2C%0A%20%20modalView%3A%20%7B%0A%20%20%20%20margin%3A%2020%2C%0A%20%20%20%20backgroundColor%3A%20%22white%22%2C%0A%20%20%20%20borderRadius%3A%2020%2C%0A%20%20%20%20padding%3A%2035%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20shadowColor%3A%20%22%23000%22%2C%0A%20%20%20%20shadowOffset%3A%20%7B%0A%20%20%20%20%20%20width%3A%200%2C%0A%20%20%20%20%20%20height%3A%202%0A%20%20%20%20%7D%2C%0A%20%20%20%20shadowOpacity%3A%200.25%2C%0A%20%20%20%20shadowRadius%3A%203.84%2C%0A%20%20%20%20elevation%3A%205%0A%20%20%7D%2C%0A%20%20openButton%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20%22%23F194FF%22%2C%0A%20%20%20%20borderRadius%3A%2020%2C%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20elevation%3A%202%0A%20%20%7D%2C%0A%20%20textStyle%3A%20%7B%0A%20%20%20%20color%3A%20%22white%22%2C%0A%20%20%20%20fontWeight%3A%20%22bold%22%2C%0A%20%20%20%20textAlign%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20modalText%3A%20%7B%0A%20%20%20%20marginBottom%3A%2015%2C%0A%20%20%20%20textAlign%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
data-snack-platform="web"
data-snack-supported-platforms=android,ios
data-snack-preview="true"
style="
overflow: hidden;
background: #fafafa;
border: 1px solid rgba(0,0,0,.16);
border-radius: 4px;
height: 514px;
width: 100%;
"
></div></div></div><p><block class="classical syntax" /></p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> {
Alert,
Modal,
StyleSheet,
Text,
TouchableHighlight,
View
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
state = {
<span class="hljs-attr">modalVisible</span>: <span class="hljs-literal">false</span>
};
setModalVisible = <span class="hljs-function">(<span class="hljs-params">visible</span>) =&gt;</span> {
<span class="hljs-keyword">this</span>.setState({ <span class="hljs-attr">modalVisible</span>: visible });
}
render() {
<span class="hljs-keyword">const</span> { modalVisible } = <span class="hljs-keyword">this</span>.state;
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.centeredView}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Modal</span>
<span class="hljs-attr">animationType</span>=<span class="hljs-string">"slide"</span>
<span class="hljs-attr">transparent</span>=<span class="hljs-string">{true}</span>
<span class="hljs-attr">visible</span>=<span class="hljs-string">{modalVisible}</span>
<span class="hljs-attr">onRequestClose</span>=<span class="hljs-string">{()</span> =&gt;</span> {
Alert.alert("Modal has been closed.");
}}
&gt;
<span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.centeredView}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.modalView}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.modalText}</span>&gt;</span>Hello World!<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">TouchableHighlight</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">...styles.openButton</span>, <span class="hljs-attr">backgroundColor:</span> "#<span class="hljs-attr">2196F3</span>" }}
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =&gt;</span> {
this.setModalVisible(!modalVisible);
}}
&gt;
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.textStyle}</span>&gt;</span>Hide Modal<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">TouchableHighlight</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">Modal</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">TouchableHighlight</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">{styles.openButton}</span>
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =&gt;</span> {
this.setModalVisible(true);
}}
&gt;
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.textStyle}</span>&gt;</span>Show Modal<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">TouchableHighlight</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span></span>
);
}
}
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
<span class="hljs-attr">centeredView</span>: {
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>,
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
<span class="hljs-attr">marginTop</span>: <span class="hljs-number">22</span>
},
<span class="hljs-attr">modalView</span>: {
<span class="hljs-attr">margin</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"white"</span>,
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">padding</span>: <span class="hljs-number">35</span>,
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
<span class="hljs-attr">shadowColor</span>: <span class="hljs-string">"#000"</span>,
<span class="hljs-attr">shadowOffset</span>: {
<span class="hljs-attr">width</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">2</span>
},
<span class="hljs-attr">shadowOpacity</span>: <span class="hljs-number">0.25</span>,
<span class="hljs-attr">shadowRadius</span>: <span class="hljs-number">3.84</span>,
<span class="hljs-attr">elevation</span>: <span class="hljs-number">5</span>
},
<span class="hljs-attr">openButton</span>: {
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#F194FF"</span>,
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">elevation</span>: <span class="hljs-number">2</span>
},
<span class="hljs-attr">textStyle</span>: {
<span class="hljs-attr">color</span>: <span class="hljs-string">"white"</span>,
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">"bold"</span>,
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>
},
<span class="hljs-attr">modalText</span>: {
<span class="hljs-attr">marginBottom</span>: <span class="hljs-number">15</span>,
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>
}
});
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App;
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="Modal"
data-snack-description="Example usage"
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20Alert%2C%0A%20%20Modal%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%20%20TouchableHighlight%2C%0A%20%20View%0A%7D%20from%20%22react-native%22%3B%0A%0Aclass%20App%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%0A%20%20%20%20modalVisible%3A%20false%0A%20%20%7D%3B%0A%0A%20%20setModalVisible%20%3D%20(visible)%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7B%20modalVisible%3A%20visible%20%7D)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20const%20%7B%20modalVisible%20%7D%20%3D%20this.state%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.centeredView%7D%3E%0A%20%20%20%20%20%20%20%20%3CModal%0A%20%20%20%20%20%20%20%20%20%20animationType%3D%22slide%22%0A%20%20%20%20%20%20%20%20%20%20transparent%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20%20visible%3D%7BmodalVisible%7D%0A%20%20%20%20%20%20%20%20%20%20onRequestClose%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20Alert.alert(%22Modal%20has%20been%20closed.%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.centeredView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.modalView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.modalText%7D%3EHello%20World!%3C%2FText%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CTouchableHighlight%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20...styles.openButton%2C%20backgroundColor%3A%20%22%232196F3%22%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.setModalVisible(!modalVisible)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3EHide%20Modal%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FTouchableHighlight%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3C%2FModal%3E%0A%0A%20%20%20%20%20%20%20%20%3CTouchableHighlight%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.openButton%7D%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.setModalVisible(true)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3EShow%20Modal%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FTouchableHighlight%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20centeredView%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20marginTop%3A%2022%0A%20%20%7D%2C%0A%20%20modalView%3A%20%7B%0A%20%20%20%20margin%3A%2020%2C%0A%20%20%20%20backgroundColor%3A%20%22white%22%2C%0A%20%20%20%20borderRadius%3A%2020%2C%0A%20%20%20%20padding%3A%2035%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20shadowColor%3A%20%22%23000%22%2C%0A%20%20%20%20shadowOffset%3A%20%7B%0A%20%20%20%20%20%20width%3A%200%2C%0A%20%20%20%20%20%20height%3A%202%0A%20%20%20%20%7D%2C%0A%20%20%20%20shadowOpacity%3A%200.25%2C%0A%20%20%20%20shadowRadius%3A%203.84%2C%0A%20%20%20%20elevation%3A%205%0A%20%20%7D%2C%0A%20%20openButton%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20%22%23F194FF%22%2C%0A%20%20%20%20borderRadius%3A%2020%2C%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20elevation%3A%202%0A%20%20%7D%2C%0A%20%20textStyle%3A%20%7B%0A%20%20%20%20color%3A%20%22white%22%2C%0A%20%20%20%20fontWeight%3A%20%22bold%22%2C%0A%20%20%20%20textAlign%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20modalText%3A%20%7B%0A%20%20%20%20marginBottom%3A%2015%2C%0A%20%20%20%20textAlign%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
data-snack-platform="web"
data-snack-supported-platforms=android,ios
data-snack-preview="true"
style="
overflow: hidden;
background: #fafafa;
border: 1px solid rgba(0,0,0,.16);
border-radius: 4px;
height: 514px;
width: 100%;
"
></div></div></div><p><block class="endBlock syntax" /></p>
<hr>
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h2>
<h3><a class="anchor" aria-hidden="true" id="animated"></a><a href="#animated" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>animated</code></h3>
<blockquote>
<p><strong>Deprecated.</strong> Use the <a href="/docs/modal#animationtype"><code>animationType</code></a> prop instead.</p>
</blockquote>
<hr>
<h3><a class="anchor" aria-hidden="true" id="animationtype"></a><a href="#animationtype" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>animationType</code></h3>
<p>The <code>animationType</code> prop controls how the modal animates.</p>
<ul>
<li><code>slide</code> slides in from the bottom</li>
<li><code>fade</code> fades into view</li>
<li><code>none</code> appears without an animation</li>
</ul>
<p>Default is set to <code>none</code>.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
</thead>
<tbody>
<tr><td>enum('none', 'slide', 'fade')</td><td>No</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="hardwareaccelerated"></a><a href="#hardwareaccelerated" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>hardwareAccelerated</code></h3>
<p>The <code>hardwareAccelerated</code> prop controls whether to force hardware acceleration for the underlying window.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>bool</td><td>No</td><td>Android</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="statusbartranslucent"></a><a href="#statusbartranslucent" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>statusBarTranslucent</code></h3>
<p>The <code>statusBarTranslucent</code> prop determines whether your modal should go under the system statusbar.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>bool</td><td>No</td><td>Android</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="ondismiss"></a><a href="#ondismiss" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onDismiss</code></h3>
<p>The <code>onDismiss</code> prop allows passing a function that will be called once the modal has been dismissed.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>function</td><td>No</td><td>iOS</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="onorientationchange"></a><a href="#onorientationchange" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onOrientationChange</code></h3>
<p>The <code>onOrientationChange</code> callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>function</td><td>No</td><td>iOS</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="onrequestclose"></a><a href="#onrequestclose" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onRequestClose</code></h3>
<p>The <code>onRequestClose</code> callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that <code>BackHandler</code> events will not be emitted as long as the modal is open.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>function</td><td>Yes</td><td>Android, Platform.isTVOS</td></tr>
<tr><td>function</td><td>No</td><td>(Others)</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="onshow"></a><a href="#onshow" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onShow</code></h3>
<p>The <code>onShow</code> prop allows passing a function that will be called once the modal has been shown.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
</thead>
<tbody>
<tr><td>function</td><td>No</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="presentationstyle"></a><a href="#presentationstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>presentationStyle</code></h3>
<p>The <code>presentationStyle</code> prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See <a href="https://developer.apple.com/reference/uikit/uimodalpresentationstyle">https://developer.apple.com/reference/uikit/uimodalpresentationstyle</a> for details.</p>
<ul>
<li><code>fullScreen</code> covers the screen completely</li>
<li><code>pageSheet</code> covers portrait-width view centered (only on larger devices)</li>
<li><code>formSheet</code> covers narrow-width view centered (only on larger devices)</li>
<li><code>overFullScreen</code> covers the screen completely, but allows transparency</li>
</ul>
<p>Default is set to <code>overFullScreen</code> or <code>fullScreen</code> depending on <code>transparent</code> property.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')</td><td>No</td><td>iOS</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="statusbartranslucent-1"></a><a href="#statusbartranslucent-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>statusBarTranslucent</code></h3>
<p>The <code>statusBarTranslucent</code> prop determines whether your modal should go under the system statusbar.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
</thead>
<tbody>
<tr><td>bool</td><td>No</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="supportedorientations"></a><a href="#supportedorientations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>supportedOrientations</code></h3>
<p>The <code>supportedOrientations</code> prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field. When using <code>presentationStyle</code> of <code>pageSheet</code> or <code>formSheet</code>, this property will be ignored by iOS.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>array of enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')</td><td>No</td><td>iOS</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="transparent"></a><a href="#transparent" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>transparent</code></h3>
<p>The <code>transparent</code> prop determines whether your modal will fill the entire view. Setting this to <code>true</code> will render the modal over a transparent background.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
</thead>
<tbody>
<tr><td>bool</td><td>No</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="visible"></a><a href="#visible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>visible</code></h3>
<p>The <code>visible</code> prop determines whether your modal is visible.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
</thead>
<tbody>
<tr><td>bool</td><td>No</td></tr>
</tbody>
</table>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/keyboardavoidingview"><span class="arrow-prev">← </span><span class="function-name-prevnext">KeyboardAvoidingView</span></a><a class="docs-next button" href="/docs/picker"><span>Picker</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#animated"><code>animated</code></a></li><li><a href="#animationtype"><code>animationType</code></a></li><li><a href="#hardwareaccelerated"><code>hardwareAccelerated</code></a></li><li><a href="#statusbartranslucent"><code>statusBarTranslucent</code></a></li><li><a href="#ondismiss"><code>onDismiss</code></a></li><li><a href="#onorientationchange"><code>onOrientationChange</code></a></li><li><a href="#onrequestclose"><code>onRequestClose</code></a></li><li><a href="#onshow"><code>onShow</code></a></li><li><a href="#presentationstyle"><code>presentationStyle</code></a></li><li><a href="#statusbartranslucent-1"><code>statusBarTranslucent</code></a></li><li><a href="#supportedorientations"><code>supportedOrientations</code></a></li><li><a href="#transparent"><code>transparent</code></a></li><li><a href="#visible"><code>visible</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who&#x27;s using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["tags:0.62"],"hitsPerPage":5}
});
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink