mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
32 lines
11 KiB
Markdown
32 lines
11 KiB
Markdown
---
|
|
id: statusbar
|
|
title: StatusBar
|
|
category: Components
|
|
permalink: docs/statusbar.html
|
|
---
|
|
<div><div><p>Component to control the app status bar.</p><h3><a class="anchor" name="usage-with-navigator"></a>Usage with Navigator <a class="hash-link" href="docs/statusbar.html#usage-with-navigator">#</a></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><div class="prism language-javascript"> <span class="token operator"><</span>View<span class="token operator">></span>
|
|
<span class="token operator"><</span>StatusBar
|
|
backgroundColor<span class="token operator">=</span><span class="token string">"blue"</span>
|
|
barStyle<span class="token operator">=</span><span class="token string">"light-content"</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Navigator
|
|
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>statusBarHidden<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
|
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
<span class="token operator"><</span>View<span class="token operator">></span>
|
|
<span class="token operator"><</span>StatusBar hidden<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>statusBarHidden<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator">...</span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>View<span class="token operator">></span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>View<span class="token operator">></span></div><h3><a class="anchor" name="imperative-api"></a>Imperative API <a class="hash-link" href="docs/statusbar.html#imperative-api">#</a></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" name="constants"></a>Constants <a class="hash-link" href="docs/statusbar.html#constants">#</a></h3><p><code>currentHeight</code> (Android only) The height of the status bar.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/statusbar.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated?: <span class="propType">boolean</span> <a class="hash-link" href="docs/statusbar.html#animated">#</a></h4><div><p>If the transition between status bar property changes should be animated.
|
|
Supported for backgroundColor, barStyle and hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="barstyle"></a>barStyle?: <span class="propType"><span><span>literal | </span><span>literal | </span>literal</span></span> <a class="hash-link" href="docs/statusbar.html#barstyle">#</a></h4><div><p>Sets the color of the status bar text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hidden"></a>hidden?: <span class="propType">boolean</span> <a class="hash-link" href="docs/statusbar.html#hidden">#</a></h4><div><p>If the status bar is hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="backgroundcolor"></a><span class="platform">android</span>backgroundColor?: <span class="propType">string</span> <a class="hash-link" href="docs/statusbar.html#backgroundcolor">#</a></h4><div><p>The background color of the status bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a><span class="platform">android</span>translucent?: <span class="propType">boolean</span> <a class="hash-link" href="docs/statusbar.html#translucent">#</a></h4><div><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></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="networkactivityindicatorvisible"></a><span class="platform">ios</span>networkActivityIndicatorVisible?: <span class="propType">boolean</span> <a class="hash-link" href="docs/statusbar.html#networkactivityindicatorvisible">#</a></h4><div><p>If the network activity indicator should be visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showhidetransition"></a><span class="platform">ios</span>showHideTransition?: <span class="propType"><span><span>literal | </span>literal</span></span> <a class="hash-link" href="docs/statusbar.html#showhidetransition">#</a></h4><div><p>The transition effect when showing and hiding the status bar using the <code>hidden</code>
|
|
prop. Defaults to 'fade'.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/statusbar.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sethidden"></a><span class="methodType">static </span>setHidden<span class="methodType">(hidden: boolean, animation?: StatusBarAnimation)</span> <a class="hash-link" href="docs/statusbar.html#sethidden">#</a></h4><div><p>Show or hide the status bar</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>hidden<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Hide the status bar.</p></div></td></tr><tr><td>[animation]<br><br><div><span><a href="docs/statusbar.html#statusbaranimation">StatusBarAnimation</a></span></div></td><td class="description"><div><p>Optional animation when
|
|
changing the status bar hidden property.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setbarstyle"></a><span class="methodType">static </span>setBarStyle<span class="methodType">(style: StatusBarStyle, animated?: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setbarstyle">#</a></h4><div><p>Set the status bar style</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>style<br><br><div><span><a href="docs/statusbar.html#statusbarstyle">StatusBarStyle</a></span></div></td><td class="description"><div><p>Status bar style to set</p></div></td></tr><tr><td>[animated]<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Animate the style change.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setnetworkactivityindicatorvisible"></a><span class="methodType">static </span>setNetworkActivityIndicatorVisible<span class="methodType">(visible: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setnetworkactivityindicatorvisible">#</a></h4><div><p>Control the visibility of the network activity indicator</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>visible<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Show the indicator.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setbackgroundcolor"></a><span class="methodType">static </span>setBackgroundColor<span class="methodType">(color: string, animated?: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setbackgroundcolor">#</a></h4><div><p>Set the background color for the status bar</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>color<br><br><div><span>string</span></div></td><td class="description"><div><p>Background color.</p></div></td></tr><tr><td>[animated]<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Animate the style change.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="settranslucent"></a><span class="methodType">static </span>setTranslucent<span class="methodType">(translucent: boolean)</span> <a class="hash-link" href="docs/statusbar.html#settranslucent">#</a></h4><div><p>Control the translucency of the status bar</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>translucent<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Set as translucent.</p></div></td></tr></tbody></table></div></div></div></span><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/statusbar.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbarstyle"></a>StatusBarStyle <a class="hash-link" href="docs/statusbar.html#statusbarstyle">#</a></h4><div><p>Status bar style</p></div><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>default</td><td class="description"><div><p>Default status bar style (dark for iOS, light for Android)</p></div></td></tr><tr><td>light-content</td><td class="description"><div><p>Dark background, white texts and icons</p></div></td></tr><tr><td>dark-content</td><td class="description"><div><p>Light background, dark texts and icons</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbaranimation"></a>StatusBarAnimation <a class="hash-link" href="docs/statusbar.html#statusbaranimation">#</a></h4><div><p>Status bar animation</p></div><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>none</td><td class="description"><div><p>No animation</p></div></td></tr><tr><td>fade</td><td class="description"><div><p>Fade animation</p></div></td></tr><tr><td>slide</td><td class="description"><div><p>Slide animation</p></div></td></tr></tbody></table></div></div></div></span></div> |