mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
62d79d0cb4
Deploy website version based on a36cecd3ab1aeb556f1e325218d54abb93b91ef2
441 lines
51 KiB
HTML
441 lines
51 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>StatusBar · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Component to control the app status bar."/><meta name="docsearch:version" content="next"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="StatusBar · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="Component to control the app status bar."/><meta property="og:image" content="https://reactnative.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://reactnative.dev/img/logo-og.png"/><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 type="text/javascript" src="/js/announcement.js"></script><script type="text/javascript" src="/js/survey-banner.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>next</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/next/getting-started" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/docs/next/components-and-apis" target="_self">Components</a></li><li class=""><a href="/docs/next/accessibilityinfo" 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/next/components-and-apis">Core Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/next/activityindicator">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/docs/next/button">Button</a></li><li class="navListItem"><a class="navItem" href="/docs/next/flatlist">FlatList</a></li><li class="navListItem"><a class="navItem" href="/docs/next/image">Image</a></li><li class="navListItem"><a class="navItem" href="/docs/next/imagebackground">ImageBackground</a></li><li class="navListItem"><a class="navItem" href="/docs/next/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/docs/next/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/docs/next/pressable">Pressable</a></li><li class="navListItem"><a class="navItem" href="/docs/next/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/docs/next/safeareaview">SafeAreaView</a></li><li class="navListItem"><a class="navItem" href="/docs/next/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/next/sectionlist">SectionList</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/next/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/docs/next/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/docs/next/text">Text</a></li><li class="navListItem"><a class="navItem" href="/docs/next/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/docs/next/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/docs/next/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/docs/next/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/next/view">View</a></li><li class="navListItem"><a class="navItem" href="/docs/next/virtualizedlist">VirtualizedList</a></li><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">Android Components</h4><ul><li class="navListItem"><a class="navItem" href="/docs/next/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/next/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/next/inputaccessoryview">InputAccessoryView</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/next/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/next/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/docs/next/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/docs/next/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/next/view-style-props">View Style Props</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Object Types<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/next/pressevent">PressEvent Object Type</a></li><li class="navListItem"><a class="navItem" href="/docs/next/react-node">React Node Object Type</a></li><li class="navListItem"><a class="navItem" href="/docs/next/rect">Rect Object Type</a></li></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/statusbar.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">StatusBar</h1></header><article><div><span><p>Component to control the app status bar.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="usage-with-navigator"></a><a href="#usage-with-navigator" 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>Usage with Navigator</h3>
|
||
<p>It is possible to have multiple <code>StatusBar</code> components mounted at the same time. The props will be merged in the order the <code>StatusBar</code> components were mounted.</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, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||
<span class="hljs-keyword">import</span> { Button, Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||
|
||
<span class="hljs-keyword">const</span> STYLES = [<span class="hljs-string">'default'</span>, <span class="hljs-string">'dark-content'</span>, <span class="hljs-string">'light-content'</span>];
|
||
<span class="hljs-keyword">const</span> TRANSITIONS = [<span class="hljs-string">'fade'</span>, <span class="hljs-string">'slide'</span>, <span class="hljs-string">'none'</span>];
|
||
|
||
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||
<span class="hljs-keyword">const</span> [hidden, setHidden] = useState(<span class="hljs-literal">false</span>);
|
||
<span class="hljs-keyword">const</span> [statusBarStyle, setStatusBarStyle] = useState(STYLES[<span class="hljs-number">0</span>]);
|
||
<span class="hljs-keyword">const</span> [statusBarTransition, setStatusBarTransition] = useState(TRANSITIONS[<span class="hljs-number">0</span>]);
|
||
|
||
<span class="hljs-keyword">const</span> changeStatusBarVisibility = <span class="hljs-function"><span class="hljs-params">()</span> =></span> setHidden(!hidden);
|
||
|
||
<span class="hljs-keyword">const</span> changeStatusBarStyle = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||
<span class="hljs-keyword">const</span> styleId = STYLES.indexOf(statusBarStyle) + <span class="hljs-number">1</span>;
|
||
<span class="hljs-keyword">if</span> (styleId === STYLES.length) {
|
||
setStatusBarStyle(STYLES[<span class="hljs-number">0</span>]);
|
||
} <span class="hljs-keyword">else</span> {
|
||
setStatusBarStyle(STYLES[styleId]);
|
||
}
|
||
};
|
||
|
||
<span class="hljs-keyword">const</span> changeStatusBarTransition = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||
<span class="hljs-keyword">const</span> transition = TRANSITIONS.indexOf(statusBarTransition) + <span class="hljs-number">1</span>;
|
||
<span class="hljs-keyword">if</span> (transition === TRANSITIONS.length) {
|
||
setStatusBarTransition(TRANSITIONS[<span class="hljs-number">0</span>]);
|
||
} <span class="hljs-keyword">else</span> {
|
||
setStatusBarTransition(TRANSITIONS[transition]);
|
||
}
|
||
};
|
||
|
||
<span class="hljs-keyword">return</span> (
|
||
<SafeAreaView style={styles.container}>
|
||
<StatusBar
|
||
animated={true}
|
||
backgroundColor="#61dafb"
|
||
barStyle={statusBarStyle}
|
||
showHideTransition={statusBarTransition}
|
||
hidden={hidden} />
|
||
<Text style={styles.textStyle}>
|
||
StatusBar Visibility:{'\n'}
|
||
{hidden ? 'Hidden' : 'Visible'}
|
||
</Text>
|
||
<Text style={styles.textStyle}>
|
||
StatusBar Style:{'\n'}
|
||
{statusBarStyle}
|
||
</Text>
|
||
{Platform.OS === 'ios' ? (
|
||
<Text style={styles.textStyle}>
|
||
StatusBar Transition:{'\n'}
|
||
{statusBarTransition}
|
||
</Text>
|
||
) : null}
|
||
<View style={styles.buttonsContainer}>
|
||
<Button
|
||
title="Toggle StatusBar"
|
||
onPress={changeStatusBarVisibility} />
|
||
<Button
|
||
title="Change StatusBar Style"
|
||
onPress={changeStatusBarStyle} />
|
||
{Platform.OS === 'ios' ? (
|
||
<Button
|
||
title="Change StatusBar Transition"
|
||
onPress={changeStatusBarTransition} />
|
||
) : null}
|
||
</View>
|
||
</SafeAreaView>
|
||
);
|
||
};
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
backgroundColor: '#ECF0F1'
|
||
},
|
||
buttonsContainer: {
|
||
padding: 10
|
||
},
|
||
textStyle: {
|
||
textAlign: 'center',
|
||
marginBottom: 8
|
||
}
|
||
});
|
||
|
||
export default App;
|
||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||
data-snack-name="StatusBar Component Example"
|
||
data-snack-description="Example usage"
|
||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Button%2C%20Platform%2C%20SafeAreaView%2C%20StatusBar%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20STYLES%20%3D%20%5B'default'%2C%20'dark-content'%2C%20'light-content'%5D%3B%0Aconst%20TRANSITIONS%20%3D%20%5B'fade'%2C%20'slide'%2C%20'none'%5D%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Bhidden%2C%20setHidden%5D%20%3D%20useState(false)%3B%0A%20%20const%20%5BstatusBarStyle%2C%20setStatusBarStyle%5D%20%3D%20useState(STYLES%5B0%5D)%3B%0A%20%20const%20%5BstatusBarTransition%2C%20setStatusBarTransition%5D%20%3D%20useState(TRANSITIONS%5B0%5D)%3B%0A%0A%20%20const%20changeStatusBarVisibility%20%3D%20()%20%3D%3E%20setHidden(!hidden)%3B%0A%0A%20%20const%20changeStatusBarStyle%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20const%20styleId%20%3D%20STYLES.indexOf(statusBarStyle)%20%2B%201%3B%0A%20%20%20%20if%20(styleId%20%3D%3D%3D%20STYLES.length)%20%7B%0A%20%20%20%20%20%20setStatusBarStyle(STYLES%5B0%5D)%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20setStatusBarStyle(STYLES%5BstyleId%5D)%3B%0A%20%20%20%20%7D%0A%20%20%7D%3B%0A%0A%20%20const%20changeStatusBarTransition%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20const%20transition%20%3D%20TRANSITIONS.indexOf(statusBarTransition)%20%2B%201%3B%0A%20%20%20%20if%20(transition%20%3D%3D%3D%20TRANSITIONS.length)%20%7B%0A%20%20%20%20%20%20setStatusBarTransition(TRANSITIONS%5B0%5D)%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20setStatusBarTransition(TRANSITIONS%5Btransition%5D)%3B%0A%20%20%20%20%7D%0A%20%20%7D%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CStatusBar%0A%20%20%20%20%20%20%20%20animated%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20backgroundColor%3D%22%2361dafb%22%0A%20%20%20%20%20%20%20%20barStyle%3D%7BstatusBarStyle%7D%0A%20%20%20%20%20%20%20%20showHideTransition%3D%7BstatusBarTransition%7D%0A%20%20%20%20%20%20%20%20hidden%3D%7Bhidden%7D%20%2F%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3E%0A%20%20%20%20%20%20%20%20StatusBar%20Visibility%3A%7B'%5Cn'%7D%0A%20%20%20%20%20%20%20%20%7Bhidden%20%3F%20'Hidden'%20%3A%20'Visible'%7D%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3E%0A%20%20%20%20%20%20%20%20StatusBar%20Style%3A%7B'%5Cn'%7D%0A%20%20%20%20%20%20%20%20%7BstatusBarStyle%7D%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%7BPlatform.OS%20%3D%3D%3D%20'ios'%20%3F%20(%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3E%0A%20%20%20%20%20%20%20%20%20%20StatusBar%20Transition%3A%7B'%5Cn'%7D%0A%20%20%20%20%20%20%20%20%20%20%7BstatusBarTransition%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20)%20%3A%20null%7D%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonsContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Toggle%20StatusBar%22%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7BchangeStatusBarVisibility%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Change%20StatusBar%20Style%22%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7BchangeStatusBarStyle%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%7BPlatform.OS%20%3D%3D%3D%20'ios'%20%3F%20(%0A%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Change%20StatusBar%20Transition%22%0A%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7BchangeStatusBarTransition%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20)%20%3A%20null%7D%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20backgroundColor%3A%20'%23ECF0F1'%0A%20%20%7D%2C%0A%20%20buttonsContainer%3A%20%7B%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%2C%0A%20%20textStyle%3A%20%7B%0A%20%20%20%20textAlign%3A%20'center'%2C%0A%20%20%20%20marginBottom%3A%208%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><h3><a class="anchor" aria-hidden="true" id="imperative-api"></a><a href="#imperative-api" 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>Imperative API</h3>
|
||
<p>For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overridden by the one set by the component in the next render.</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="constants"></a><a href="#constants" 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>Constants</h2>
|
||
<h3><a class="anchor" aria-hidden="true" id="currentheight-div-classlabel-androidandroiddiv"></a><a href="#currentheight-div-classlabel-androidandroiddiv" 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>currentHeight</code> <div class="label android">Android</div></h3>
|
||
<p>The height of the status bar, which includes the notch height, if present.</p>
|
||
<hr>
|
||
<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>
|
||
<p>If the transition between status bar property changes should be animated. Supported for <code>backgroundColor</code>, <code>barStyle</code> and <code>hidden</code> properties.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>boolean</td><td>No</td><td><code>false</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="backgroundcolor-div-classlabel-androidandroiddiv"></a><a href="#backgroundcolor-div-classlabel-androidandroiddiv" 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>backgroundColor</code> <div class="label android">Android</div></h3>
|
||
<p>The background color of the status bar.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><a href="colors">color</a></td><td>No</td><td>default system StatusBar background color, or <code>'black'</code> if not defined</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="barstyle"></a><a href="#barstyle" 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>barStyle</code></h3>
|
||
<p>Sets the color of the status bar text.</p>
|
||
<p>On Android, this will only have an impact on API versions 23 and above.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><a href="statusbar#statusbarstyle">StatusBarStyle</a></td><td>No</td><td><code>'default'</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="hidden"></a><a href="#hidden" 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>hidden</code></h3>
|
||
<p>If the status bar is hidden.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>boolean</td><td>No</td><td><code>false</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="networkactivityindicatorvisible-div-classlabel-iosiosdiv"></a><a href="#networkactivityindicatorvisible-div-classlabel-iosiosdiv" 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>networkActivityIndicatorVisible</code> <div class="label ios">iOS</div></h3>
|
||
<p>If the network activity indicator should be visible.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>boolean</td><td>No</td><td><code>false</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="showhidetransition-div-classlabel-iosiosdiv"></a><a href="#showhidetransition-div-classlabel-iosiosdiv" 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>showHideTransition</code> <div class="label ios">iOS</div></h3>
|
||
<p>The transition effect when showing and hiding the status bar using the <code>hidden</code> prop.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><a href="statusbar#statusbaranimation">StatusBarAnimation</a></td><td>No</td><td><code>'fade'</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="translucent-div-classlabel-androidandroiddiv"></a><a href="#translucent-div-classlabel-androidandroiddiv" 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>translucent</code> <div class="label android">Android</div></h3>
|
||
<p>If the status bar is translucent. When translucent is set to <code>true</code>, the app will draw under the status bar. This is useful when using a semi transparent status bar color.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>boolean</td><td>No</td><td><code>false</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h2>
|
||
<h3><a class="anchor" aria-hidden="true" id="popstackentry"></a><a href="#popstackentry" 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>popStackEntry()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">popStackEntry</span><span class="token punctuation">(</span>entry<span class="token punctuation">:</span> any<span class="token punctuation">)</span>
|
||
</code></pre>
|
||
<p>Get and remove the last StatusBar entry from the stack.</p>
|
||
<p><strong>Parameters:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>entry</td><td>any</td><td>Yes</td><td>Entry returned from <code>pushStackEntry</code>.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="pushstackentry"></a><a href="#pushstackentry" 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>pushStackEntry()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">pushStackEntry</span><span class="token punctuation">(</span>props<span class="token punctuation">:</span> any<span class="token punctuation">)</span>
|
||
</code></pre>
|
||
<p>Push a StatusBar entry onto the stack. The return value should be passed to <code>popStackEntry</code> when complete.</p>
|
||
<p><strong>Parameters:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>props</td><td>any</td><td>Yes</td><td>Object containing the StatusBar props to use in the stack entry.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="replacestackentry"></a><a href="#replacestackentry" 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>replaceStackEntry()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">replaceStackEntry</span><span class="token punctuation">(</span>entry<span class="token punctuation">:</span> any<span class="token punctuation">,</span> props<span class="token punctuation">:</span> any<span class="token punctuation">)</span>
|
||
</code></pre>
|
||
<p>Replace an existing StatusBar stack entry with new props.</p>
|
||
<p><strong>Parameters:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>entry</td><td>any</td><td>Yes</td><td>Entry returned from <code>pushStackEntry</code> to replace.</td></tr>
|
||
<tr><td>props</td><td>any</td><td>Yes</td><td>Object containing the StatusBar props to use in the replacement stack entry.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="setbackgroundcolor-div-classlabel-androidandroiddiv"></a><a href="#setbackgroundcolor-div-classlabel-androidandroiddiv" 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>setBackgroundColor()</code> <div class="label android">Android</div></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">setBackgroundColor</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> string<span class="token punctuation">,</span> <span class="token punctuation">[</span>animated<span class="token punctuation">]</span><span class="token punctuation">:</span> boolean<span class="token punctuation">)</span>
|
||
</code></pre>
|
||
<p>Set the background color for the status bar.</p>
|
||
<p><strong>Parameters:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>color</td><td>string</td><td>Yes</td><td>Background color.</td></tr>
|
||
<tr><td>animated</td><td>boolean</td><td>No</td><td>Animate the style change.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="setbarstyle"></a><a href="#setbarstyle" 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>setBarStyle()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">setBarStyle</span><span class="token punctuation">(</span>style<span class="token punctuation">:</span> StatusBarStyle<span class="token punctuation">,</span> <span class="token punctuation">[</span>animated<span class="token punctuation">]</span><span class="token punctuation">:</span> boolean<span class="token punctuation">)</span>
|
||
</code></pre>
|
||
<p>Set the status bar style.</p>
|
||
<p><strong>Parameters:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>style</td><td><a href="statusbar#statusbarstyle">StatusBarStyle</a></td><td>Yes</td><td>Status bar style to set.</td></tr>
|
||
<tr><td>animated</td><td>boolean</td><td>No</td><td>Animate the style change.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="sethidden"></a><a href="#sethidden" 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>setHidden()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">setHidden</span><span class="token punctuation">(</span>hidden<span class="token punctuation">:</span> boolean<span class="token punctuation">,</span> <span class="token punctuation">[</span>animation<span class="token punctuation">]</span><span class="token punctuation">:</span> StatusBarAnimation<span class="token punctuation">)</span>
|
||
</code></pre>
|
||
<p>Show or hide the status bar.</p>
|
||
<p><strong>Parameters:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>hidden</td><td>boolean</td><td>Yes</td><td>Hide the status bar.</td></tr>
|
||
<tr><td>animation <div class="label ios">iOS</div></td><td><a href="statusbar#statusbaranimation">StatusBarAnimation</a></td><td>No</td><td>Animation when changing the status bar hidden property.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="setnetworkactivityindicatorvisible-div-classlabel-iosiosdiv"></a><a href="#setnetworkactivityindicatorvisible-div-classlabel-iosiosdiv" 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>setNetworkActivityIndicatorVisible()</code> <div class="label ios">iOS</div></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">setNetworkActivityIndicatorVisible</span><span class="token punctuation">(</span>visible<span class="token punctuation">:</span> boolean<span class="token punctuation">)</span>
|
||
</code></pre>
|
||
<p>Control the visibility of the network activity indicator.</p>
|
||
<p><strong>Parameters:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>visible</td><td>boolean</td><td>Yes</td><td>Show the indicator.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="settranslucent-div-classlabel-androidandroiddiv"></a><a href="#settranslucent-div-classlabel-androidandroiddiv" 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>setTranslucent()</code> <div class="label android">Android</div></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">setTranslucent</span><span class="token punctuation">(</span>translucent<span class="token punctuation">:</span> boolean<span class="token punctuation">)</span>
|
||
</code></pre>
|
||
<p>Control the translucency of the status bar.</p>
|
||
<p><strong>Parameters:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>translucent</td><td>boolean</td><td>Yes</td><td>Set as translucent.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<h2><a class="anchor" aria-hidden="true" id="type-definitions"></a><a href="#type-definitions" 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>Type Definitions</h2>
|
||
<h3><a class="anchor" aria-hidden="true" id="statusbaranimation"></a><a href="#statusbaranimation" 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>StatusBarAnimation</h3>
|
||
<p>Status bar animation type for transitions on the iOS.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>enum</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p><strong>Constants:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Value</th><th>Type</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><code>'fade'</code></td><td>string</td><td>Fade animation</td></tr>
|
||
<tr><td><code>'slide'</code></td><td>string</td><td>Slide animation</td></tr>
|
||
<tr><td><code>'none'</code></td><td>string</td><td>No animation</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="statusbarstyle"></a><a href="#statusbarstyle" 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>StatusBarStyle</h3>
|
||
<p>Status bar style type.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>enum</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p><strong>Constants:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Value</th><th>Type</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><code>'default'</code></td><td>string</td><td>Default status bar style (dark for iOS, light for Android)</td></tr>
|
||
<tr><td><code>'light-content'</code></td><td>string</td><td>Dark background, white texts and icons</td></tr>
|
||
<tr><td><code>'dark-content'</code></td><td>string</td><td>Light background, dark texts and icons (requires API>=23 on Android)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/sectionlist"><span class="arrow-prev">← </span><span class="function-name-prevnext">SectionList</span></a><a class="docs-next button" href="/docs/next/switch"><span>Switch</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#constants">Constants</a><ul class="toc-headings"><li><a href="#currentheight-div-classlabel-androidandroiddiv"><code>currentHeight</code> <div class="label android">Android</div></a></li></ul></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#animated"><code>animated</code></a></li><li><a href="#backgroundcolor-div-classlabel-androidandroiddiv"><code>backgroundColor</code> <div class="label android">Android</div></a></li><li><a href="#barstyle"><code>barStyle</code></a></li><li><a href="#hidden"><code>hidden</code></a></li><li><a href="#networkactivityindicatorvisible-div-classlabel-iosiosdiv"><code>networkActivityIndicatorVisible</code> <div class="label ios">iOS</div></a></li><li><a href="#showhidetransition-div-classlabel-iosiosdiv"><code>showHideTransition</code> <div class="label ios">iOS</div></a></li><li><a href="#translucent-div-classlabel-androidandroiddiv"><code>translucent</code> <div class="label android">Android</div></a></li></ul></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#popstackentry"><code>popStackEntry()</code></a></li><li><a href="#pushstackentry"><code>pushStackEntry()</code></a></li><li><a href="#replacestackentry"><code>replaceStackEntry()</code></a></li><li><a href="#setbackgroundcolor-div-classlabel-androidandroiddiv"><code>setBackgroundColor()</code> <div class="label android">Android</div></a></li><li><a href="#setbarstyle"><code>setBarStyle()</code></a></li><li><a href="#sethidden"><code>setHidden()</code></a></li><li><a href="#setnetworkactivityindicatorvisible-div-classlabel-iosiosdiv"><code>setNetworkActivityIndicatorVisible()</code> <div class="label ios">iOS</div></a></li><li><a href="#settranslucent-div-classlabel-androidandroiddiv"><code>setTranslucent()</code> <div class="label android">Android</div></a></li></ul></li><li><a href="#type-definitions">Type Definitions</a><ul class="toc-headings"><li><a href="#statusbaranimation">StatusBarAnimation</a></li><li><a href="#statusbarstyle">StatusBarStyle</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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:next"],"hitsPerPage":5}
|
||
});
|
||
</script></body></html> |