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
5cdcf6b652125395cc702c00a8de85b1bbbcd137
react-native/docs/0.39/statusbar.html
T
Website Deployment Script a83aa436fa Deploy website 
Deploy website version based on 4f67424b9b11cc36808889a24fbe30b478b7f1e6
2020-01-02 04:28:55 +00:00

333 lines
50 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>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="0.39"/><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://facebook.github.io/react-native/"/><meta property="og:description" content="Component to control the app status bar."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/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://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/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="/react-native/js/codeblocks.js"></script><script type="text/javascript" src="/react-native/js/tabs.js"></script><script type="text/javascript" src="/react-native/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="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.39</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/react-native/docs/0.39/getting-started" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/react-native/docs/0.39/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/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>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">The Basics<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="/react-native/docs/0.39/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/props">Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/state">State</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/style">Style</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/more-resources">More Resources</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides<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="/react-native/docs/0.39/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/images">Images</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/native-modules-setup">Native Modules Setup</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (iOS)<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="/react-native/docs/0.39/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/building-for-apple-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/app-extensions">App Extensions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (Android)<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="/react-native/docs/0.39/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/signed-apk-android">Publishing to Google Play Store</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/removing-default-permissions">Removing Default Permissions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">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="/react-native/docs/0.39/activityindicator">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/button">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/image">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/navigator">Navigator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/pickerios">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/slider">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/snapshotviewios">SnapshotViewIOS</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/react-native/docs/0.39/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/text">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/webview">WebView</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="/react-native/docs/0.39/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/alert">Alert</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/alertios">AlertIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/appregistry">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/asyncstorage">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/clipboard">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/datepickerandroid">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/imageeditor">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/imagestore">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/keyboard">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/panresponder">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/permissionsandroid">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/share">Share</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/systrace">Systrace</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/timepickerandroid">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/vibration">Vibration</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.39/view-style-props">View Style Props</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. One use case is to specify status bar styles per route using <code>Navigator</code>.</p>
<pre><code class="hljs"> <span class="hljs-tag">&lt;<span class="hljs-name">View</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">StatusBar</span>
<span class="hljs-attr">backgroundColor</span>=<span class="hljs-string">"blue"</span>
<span class="hljs-attr">barStyle</span>=<span class="hljs-string">"light-content"</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Navigator</span>
<span class="hljs-attr">initialRoute</span>=<span class="hljs-string">{{statusBarHidden:</span> <span class="hljs-attr">true</span>}}
<span class="hljs-attr">renderScene</span>=<span class="hljs-string">{(route,</span> <span class="hljs-attr">navigator</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">StatusBar</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">{route.statusBarHidden}</span> /&gt;</span>
...
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
}
/&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
</code></pre>
<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 overriden by the one set by the component in the next render.</p>
<h3><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</h3>
<p><code>currentHeight</code> (Android only) The height of the status bar.</p>
<h3><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</h3>
<ul>
<li><a href="/react-native/docs/0.39/statusbar#animated"><code>animated</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#hidden"><code>hidden</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#backgroundcolor"><code>backgroundColor</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#translucent"><code>translucent</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#barstyle"><code>barStyle</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#networkactivityindicatorvisible"><code>networkActivityIndicatorVisible</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#showhidetransition"><code>showHideTransition</code></a></li>
</ul>
<h3><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</h3>
<ul>
<li><a href="/react-native/docs/0.39/statusbar#sethidden"><code>setHidden</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#setbarstyle"><code>setBarStyle</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#setnetworkactivityindicatorvisible"><code>setNetworkActivityIndicatorVisible</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#setbackgroundcolor"><code>setBackgroundColor</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#settranslucent"><code>setTranslucent</code></a></li>
</ul>
<h3><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</h3>
<ul>
<li><a href="/react-native/docs/0.39/statusbar#statusbarstyle"><code>StatusBarStyle</code></a></li>
<li><a href="/react-native/docs/0.39/statusbar#statusbaranimation"><code>StatusBarAnimation</code></a></li>
</ul>
<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-1"></a><a href="#props-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>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 backgroundColor, barStyle and hidden.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
</thead>
<tbody>
<tr><td>boolean</td><td>No</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></tr>
</thead>
<tbody>
<tr><td>boolean</td><td>No</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="backgroundcolor"></a><a href="#backgroundcolor" 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></h3>
<p>The background color of the status bar.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>$FlowFixMe</td><td>No</td><td>Android</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="translucent"></a><a href="#translucent" 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></h3>
<p>If the status bar is translucent. When translucent is set to true, 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>Platform</th></tr>
</thead>
<tbody>
<tr><td>boolean</td><td>No</td><td>Android</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>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>literal ‖ ,literal ‖ ,literal</td><td>No</td><td>iOS</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="networkactivityindicatorvisible"></a><a href="#networkactivityindicatorvisible" 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></h3>
<p>If the network activity indicator should be visible.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>boolean</td><td>No</td><td>iOS</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="showhidetransition"></a><a href="#showhidetransition" 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></h3>
<p>The transition effect when showing and hiding the status bar using the <code>hidden</code> prop. Defaults to 'fade'.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
</thead>
<tbody>
<tr><td>literal ‖ ,literal</td><td>No</td><td>iOS</td></tr>
</tbody>
</table>
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-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>Methods</h2>
<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</td><td><a href="/react-native/docs/0.39/statusbar#statusbaranimation">StatusBarAnimation</a></td><td>No</td><td>Optional animation when changing the status bar hidden property.</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="/react-native/docs/0.39/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="setnetworkactivityindicatorvisible"></a><a href="#setnetworkactivityindicatorvisible" 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></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="setbackgroundcolor"></a><a href="#setbackgroundcolor" 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></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="settranslucent"></a><a href="#settranslucent" 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></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-1"></a><a href="#type-definitions-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>Type Definitions</h2>
<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</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>Description</th></tr>
</thead>
<tbody>
<tr><td>default</td><td>Default status bar style (dark for iOS, light for Android)</td></tr>
<tr><td>light-content</td><td>Dark background, white texts and icons</td></tr>
<tr><td>dark-content</td><td>Light background, dark texts and icons</td></tr>
</tbody>
</table>
<hr>
<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</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>Description</th></tr>
</thead>
<tbody>
<tr><td>none</td><td>No animation</td></tr>
<tr><td>fade</td><td>Fade animation</td></tr>
<tr><td>slide</td><td>Slide animation</td></tr>
</tbody>
</table>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.39/snapshotviewios"><span class="arrow-prev">← </span><span>Previous</span></a><a class="docs-next button" href="/react-native/docs/0.39/switch"><span>Switch</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props-1">Props</a><ul class="toc-headings"><li><a href="#animated"><code>animated</code></a></li><li><a href="#hidden"><code>hidden</code></a></li><li><a href="#backgroundcolor"><code>backgroundColor</code></a></li><li><a href="#translucent"><code>translucent</code></a></li><li><a href="#barstyle"><code>barStyle</code></a></li><li><a href="#networkactivityindicatorvisible"><code>networkActivityIndicatorVisible</code></a></li><li><a href="#showhidetransition"><code>showHideTransition</code></a></li></ul></li><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#sethidden"><code>setHidden()</code></a></li><li><a href="#setbarstyle"><code>setBarStyle()</code></a></li><li><a href="#setnetworkactivityindicatorvisible"><code>setNetworkActivityIndicatorVisible()</code></a></li><li><a href="#setbackgroundcolor"><code>setBackgroundColor()</code></a></li><li><a href="#settranslucent"><code>setTranslucent()</code></a></li></ul></li><li><a href="#type-definitions-1">Type Definitions</a><ul class="toc-headings"><li><a href="#statusbarstyle">StatusBarStyle</a></li><li><a href="#statusbaranimation">StatusBarAnimation</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/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="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/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.39"],"hitsPerPage":5}
});
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink