kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_statusbar.html
at main 62 kB view raw
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-statusbar" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>StatusBar · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/statusbar><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="StatusBar · React Native"><meta data-rh=true name=description content="Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons."><meta data-rh=true property=og:description content="Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/statusbar><link data-rh=true rel=alternate href=https://reactnative.dev/docs/statusbar hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/statusbar hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON Feed"><link rel=preconnect href=https://www.google-analytics.com><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script><script async src=https://www.google-analytics.com/analytics.js></script><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs> 2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> 3</defs></svg> 4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/statusbar>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/statusbar>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/statusbar>0.79</a><li><a class=dropdown__link href=/docs/0.78/statusbar>0.78</a><li><a class=dropdown__link href=/docs/0.77/statusbar>0.77</a><li><a class=dropdown__link href=/docs/0.76/statusbar>0.76</a><li><a class=dropdown__link href=/docs/0.75/statusbar>0.75</a><li><a class=dropdown__link href=/docs/0.74/statusbar>0.74</a><li><a class=dropdown__link href=/docs/0.73/statusbar>0.73</a><li><a class=dropdown__link href=/docs/0.72/statusbar>0.72</a><li><a class=dropdown__link href=/docs/0.71/statusbar>0.71</a><li><a class=dropdown__link href=/docs/0.70/statusbar>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/getting-started>Guides</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</a><a class="navbar__item navbar__link" href=/blog>Blog</a><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/components-and-apis>Core Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/components-and-apis>Core Components and APIs</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/activityindicator>ActivityIndicator</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/button>Button</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/flatlist>FlatList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/image>Image</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/imagebackground>ImageBackground</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/keyboardavoidingview>KeyboardAvoidingView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/modal>Modal</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/pressable>Pressable</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/refreshcontrol>RefreshControl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/scrollview>ScrollView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sectionlist>SectionList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/statusbar>StatusBar</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/switch>Switch</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/text>Text</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/textinput>TextInput</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablehighlight>TouchableHighlight</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchableopacity>TouchableOpacity</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablewithoutfeedback>TouchableWithoutFeedback</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/view>View</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/virtualizedlist>VirtualizedList</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/drawerlayoutandroid>Android Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/drawerlayoutandroid>DrawerLayoutAndroid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablenativefeedback>TouchableNativeFeedback</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/inputaccessoryview>iOS Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/inputaccessoryview>InputAccessoryView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/safeareaview>SafeAreaView</a></ul></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/image-style-props>Props</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/boxshadowvalue>Object Types</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>StatusBar</h1></header><p>Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.</p> 5<h3 class="anchor anchorWithStickyNavbar_JmGV" id=usage-with-navigator>Usage with Navigator<a href=#usage-with-navigator class=hash-link aria-label="Direct link to Usage with Navigator" title="Direct link to Usage with Navigator">​</a></h3> 6<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> 7<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">TypeScript<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">JavaScript</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb hidden><div class=snack-player data-snack-name="StatusBar Component Example" data-snack-description="Example usage" data-snack-files="%7B%22App.js%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20Button%2C%5Cn%20%20Platform%2C%5Cn%20%20StatusBar%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Text%2C%5Cn%20%20View%2C%5Cn%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20STYLES%20%3D%20%5B'default'%2C%20'dark-content'%2C%20'light-content'%5D%3B%5Cnconst%20TRANSITIONS%20%3D%20%5B'fade'%2C%20'slide'%2C%20'none'%5D%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5Bhidden%2C%20setHidden%5D%20%3D%20useState(false)%3B%5Cn%20%20const%20%5BstatusBarStyle%2C%20setStatusBarStyle%5D%20%3D%20useState(STYLES%5B0%5D)%3B%5Cn%20%20const%20%5BstatusBarTransition%2C%20setStatusBarTransition%5D%20%3D%20useState(%5Cn%20%20%20%20TRANSITIONS%5B0%5D%2C%5Cn%20%20)%3B%5Cn%5Cn%20%20const%20changeStatusBarVisibility%20%3D%20()%20%3D%3E%20setHidden(!hidden)%3B%5Cn%5Cn%20%20const%20changeStatusBarStyle%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20const%20styleId%20%3D%20STYLES.indexOf(statusBarStyle)%20%2B%201%3B%5Cn%20%20%20%20if%20(styleId%20%3D%3D%3D%20STYLES.length)%20%7B%5Cn%20%20%20%20%20%20setStatusBarStyle(STYLES%5B0%5D)%3B%5Cn%20%20%20%20%7D%20else%20%7B%5Cn%20%20%20%20%20%20setStatusBarStyle(STYLES%5BstyleId%5D)%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%3B%5Cn%5Cn%20%20const%20changeStatusBarTransition%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20const%20transition%20%3D%20TRANSITIONS.indexOf(statusBarTransition)%20%2B%201%3B%5Cn%20%20%20%20if%20(transition%20%3D%3D%3D%20TRANSITIONS.length)%20%7B%5Cn%20%20%20%20%20%20setStatusBarTransition(TRANSITIONS%5B0%5D)%3B%5Cn%20%20%20%20%7D%20else%20%7B%5Cn%20%20%20%20%20%20setStatusBarTransition(TRANSITIONS%5Btransition%5D)%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CStatusBar%5Cn%20%20%20%20%20%20%20%20%20%20animated%3D%7Btrue%7D%5Cn%20%20%20%20%20%20%20%20%20%20backgroundColor%3D%5C%22%2361dafb%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20barStyle%3D%7BstatusBarStyle%7D%5Cn%20%20%20%20%20%20%20%20%20%20showHideTransition%3D%7BstatusBarTransition%7D%5Cn%20%20%20%20%20%20%20%20%20%20hidden%3D%7Bhidden%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20StatusBar%20Visibility%3A%7B'%5C%5Cn'%7D%5Cn%20%20%20%20%20%20%20%20%20%20%7Bhidden%20%3F%20'Hidden'%20%3A%20'Visible'%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20StatusBar%20Style%3A%7B'%5C%5Cn'%7D%5Cn%20%20%20%20%20%20%20%20%20%20%7BstatusBarStyle%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%7BPlatform.OS%20%3D%3D%3D%20'ios'%20%3F%20(%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20StatusBar%20Transition%3A%7B'%5C%5Cn'%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7BstatusBarTransition%7D%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20)%20%3A%20null%7D%5Cn%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonsContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Toggle%20StatusBar%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7BchangeStatusBarVisibility%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20StatusBar%20Style%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7BchangeStatusBarStyle%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%7BPlatform.OS%20%3D%3D%3D%20'ios'%20%3F%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20StatusBar%20Transition%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7BchangeStatusBarTransition%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20)%20%3A%20null%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20backgroundColor%3A%20'%23ECF0F1'%2C%5Cn%20%20%7D%2C%5Cn%20%20buttonsContainer%3A%20%7B%5Cn%20%20%20%20padding%3A%2010%2C%5Cn%20%20%7D%2C%5Cn%20%20textStyle%3A%20%7B%5Cn%20%20%20%20textAlign%3A%20'center'%2C%5Cn%20%20%20%20marginBottom%3A%208%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=android,ios data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div><div role=tabpanel class=tabItem_wHwb><div class=snack-player data-snack-name="StatusBar Component Example" data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20Button%2C%5Cn%20%20Platform%2C%5Cn%20%20StatusBar%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Text%2C%5Cn%20%20View%2C%5Cn%20%20StatusBarStyle%2C%5Cn%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20STYLES%20%3D%20%5B'default'%2C%20'dark-content'%2C%20'light-content'%5D%20as%20const%3B%5Cnconst%20TRANSITIONS%20%3D%20%5B'fade'%2C%20'slide'%2C%20'none'%5D%20as%20const%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5Bhidden%2C%20setHidden%5D%20%3D%20useState(false)%3B%5Cn%20%20const%20%5BstatusBarStyle%2C%20setStatusBarStyle%5D%20%3D%20useState%3CStatusBarStyle%3E(%5Cn%20%20%20%20STYLES%5B0%5D%2C%5Cn%20%20)%3B%5Cn%20%20const%20%5BstatusBarTransition%2C%20setStatusBarTransition%5D%20%3D%20useState%3C%5Cn%20%20%20%20'fade'%20%7C%20'slide'%20%7C%20'none'%5Cn%20%20%3E(TRANSITIONS%5B0%5D)%3B%5Cn%5Cn%20%20const%20changeStatusBarVisibility%20%3D%20()%20%3D%3E%20setHidden(!hidden)%3B%5Cn%5Cn%20%20const%20changeStatusBarStyle%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20const%20styleId%20%3D%20STYLES.indexOf(statusBarStyle)%20%2B%201%3B%5Cn%20%20%20%20if%20(styleId%20%3D%3D%3D%20STYLES.length)%20%7B%5Cn%20%20%20%20%20%20setStatusBarStyle(STYLES%5B0%5D)%3B%5Cn%20%20%20%20%7D%20else%20%7B%5Cn%20%20%20%20%20%20setStatusBarStyle(STYLES%5BstyleId%5D)%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%3B%5Cn%5Cn%20%20const%20changeStatusBarTransition%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20const%20transition%20%3D%20TRANSITIONS.indexOf(statusBarTransition)%20%2B%201%3B%5Cn%20%20%20%20if%20(transition%20%3D%3D%3D%20TRANSITIONS.length)%20%7B%5Cn%20%20%20%20%20%20setStatusBarTransition(TRANSITIONS%5B0%5D)%3B%5Cn%20%20%20%20%7D%20else%20%7B%5Cn%20%20%20%20%20%20setStatusBarTransition(TRANSITIONS%5Btransition%5D)%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CStatusBar%5Cn%20%20%20%20%20%20%20%20%20%20animated%3D%7Btrue%7D%5Cn%20%20%20%20%20%20%20%20%20%20backgroundColor%3D%5C%22%2361dafb%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20barStyle%3D%7BstatusBarStyle%7D%5Cn%20%20%20%20%20%20%20%20%20%20showHideTransition%3D%7BstatusBarTransition%7D%5Cn%20%20%20%20%20%20%20%20%20%20hidden%3D%7Bhidden%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20StatusBar%20Visibility%3A%7B'%5C%5Cn'%7D%5Cn%20%20%20%20%20%20%20%20%20%20%7Bhidden%20%3F%20'Hidden'%20%3A%20'Visible'%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20StatusBar%20Style%3A%7B'%5C%5Cn'%7D%5Cn%20%20%20%20%20%20%20%20%20%20%7BstatusBarStyle%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%7BPlatform.OS%20%3D%3D%3D%20'ios'%20%3F%20(%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.textStyle%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20StatusBar%20Transition%3A%7B'%5C%5Cn'%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7BstatusBarTransition%7D%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20)%20%3A%20null%7D%5Cn%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonsContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Toggle%20StatusBar%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7BchangeStatusBarVisibility%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20StatusBar%20Style%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7BchangeStatusBarStyle%7D%5Cn%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%7BPlatform.OS%20%3D%3D%3D%20'ios'%20%3F%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20StatusBar%20Transition%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7BchangeStatusBarTransition%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20)%20%3A%20null%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20backgroundColor%3A%20'%23ECF0F1'%2C%5Cn%20%20%7D%2C%5Cn%20%20buttonsContainer%3A%20%7B%5Cn%20%20%20%20padding%3A%2010%2C%5Cn%20%20%7D%2C%5Cn%20%20textStyle%3A%20%7B%5Cn%20%20%20%20textAlign%3A%20'center'%2C%5Cn%20%20%20%20marginBottom%3A%208%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=android,ios data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div></div></div> 8<h3 class="anchor anchorWithStickyNavbar_JmGV" id=imperative-api>Imperative API<a href=#imperative-api class=hash-link aria-label="Direct link to Imperative API" title="Direct link to Imperative API">​</a></h3> 9<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> 10<hr> 11<h1>Reference</h1> 12<h2 class="anchor anchorWithStickyNavbar_JmGV" id=constants>Constants<a href=#constants class=hash-link aria-label="Direct link to Constants" title="Direct link to Constants">​</a></h2> 13<h3 class="anchor anchorWithStickyNavbar_JmGV" id=currentheight-android><code>currentHeight</code> <div class="label android">Android</div><a href=#currentheight-android class=hash-link aria-label="Direct link to currentheight-android" title="Direct link to currentheight-android">​</a></h3> 14<p>The height of the status bar, which includes the notch height, if present.</p> 15<hr> 16<h2 class="anchor anchorWithStickyNavbar_JmGV" id=props>Props<a href=#props class=hash-link aria-label="Direct link to Props" title="Direct link to Props">​</a></h2> 17<h3 class="anchor anchorWithStickyNavbar_JmGV" id=animated><code>animated</code><a href=#animated class=hash-link aria-label="Direct link to animated" title="Direct link to animated">​</a></h3> 18<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> 19<table><thead><tr><th>Type<th>Required<th>Default<tbody><tr><td>boolean<td>No<td><code>false</code></table> 20<hr> 21<h3 class="anchor anchorWithStickyNavbar_JmGV" id=backgroundcolor-android><code>backgroundColor</code> <div class="label android">Android</div><a href=#backgroundcolor-android class=hash-link aria-label="Direct link to backgroundcolor-android" title="Direct link to backgroundcolor-android">​</a></h3> 22<p>The background color of the status bar.</p> 23<div class="theme-admonition theme-admonition-warning admonition_WCGJ alert alert--warning"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 16 16"><path fill-rule=evenodd d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg></span>warning</div><div class=admonitionContent_pbrs><p>Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35.</div></div> 24<table><thead><tr><th>Type<th>Required<th>Default<tbody><tr><td><a href=/docs/colors>color</a><td>No<td>default system StatusBar background color, or <code>'black'</code> if not defined</table> 25<hr> 26<h3 class="anchor anchorWithStickyNavbar_JmGV" id=barstyle><code>barStyle</code><a href=#barstyle class=hash-link aria-label="Direct link to barstyle" title="Direct link to barstyle">​</a></h3> 27<p>Sets the color of the status bar text.</p> 28<p>On Android, this will only have an impact on API versions 23 and above.</p> 29<table><thead><tr><th>Type<th>Required<th>Default<tbody><tr><td><a href=/docs/statusbar#statusbarstyle>StatusBarStyle</a><td>No<td><code>'default'</code></table> 30<hr> 31<h3 class="anchor anchorWithStickyNavbar_JmGV" id=hidden><code>hidden</code><a href=#hidden class=hash-link aria-label="Direct link to hidden" title="Direct link to hidden">​</a></h3> 32<p>If the status bar is hidden.</p> 33<table><thead><tr><th>Type<th>Required<th>Default<tbody><tr><td>boolean<td>No<td><code>false</code></table> 34<hr> 35<h3 class="anchor anchorWithStickyNavbar_JmGV" id=networkactivityindicatorvisible-ios><code>networkActivityIndicatorVisible</code> <div class="label ios">iOS</div><a href=#networkactivityindicatorvisible-ios class=hash-link aria-label="Direct link to networkactivityindicatorvisible-ios" title="Direct link to networkactivityindicatorvisible-ios">​</a></h3> 36<p>If the network activity indicator should be visible.</p> 37<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>false</code></table> 38<hr> 39<h3 class="anchor anchorWithStickyNavbar_JmGV" id=showhidetransition-ios><code>showHideTransition</code> <div class="label ios">iOS</div><a href=#showhidetransition-ios class=hash-link aria-label="Direct link to showhidetransition-ios" title="Direct link to showhidetransition-ios">​</a></h3> 40<p>The transition effect when showing and hiding the status bar using the <code>hidden</code> prop.</p> 41<table><thead><tr><th>Type<th>Default<tbody><tr><td><a href=/docs/statusbar#statusbaranimation>StatusBarAnimation</a><td><code>'fade'</code></table> 42<hr> 43<h3 class="anchor anchorWithStickyNavbar_JmGV" id=translucent-android><code>translucent</code> <div class="label android">Android</div><a href=#translucent-android class=hash-link aria-label="Direct link to translucent-android" title="Direct link to translucent-android">​</a></h3> 44<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> 45<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>false</code></table> 46<h2 class="anchor anchorWithStickyNavbar_JmGV" id=methods>Methods<a href=#methods class=hash-link aria-label="Direct link to Methods" title="Direct link to Methods">​</a></h2> 47<h3 class="anchor anchorWithStickyNavbar_JmGV" id=popstackentry><code>popStackEntry()</code><a href=#popstackentry class=hash-link aria-label="Direct link to popstackentry" title="Direct link to popstackentry">​</a></h3> 48<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>popStackEntry</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">entry</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">StatusBarProps</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 49<p>Get and remove the last StatusBar entry from the stack.</p> 50<p><strong>Parameters:</strong></p> 51<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>entry <div class="label basic required">Required</div><td>any<td>Entry returned from <code>pushStackEntry</code>.</table> 52<hr> 53<h3 class="anchor anchorWithStickyNavbar_JmGV" id=pushstackentry><code>pushStackEntry()</code><a href=#pushstackentry class=hash-link aria-label="Direct link to pushstackentry" title="Direct link to pushstackentry">​</a></h3> 54<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>pushStackEntry</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">props</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">StatusBarProps</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">StatusBarProps</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 55<p>Push a StatusBar entry onto the stack. The return value should be passed to <code>popStackEntry</code> when complete.</p> 56<p><strong>Parameters:</strong></p> 57<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>props <div class="label basic required">Required</div><td>any<td>Object containing the StatusBar props to use in the stack entry.</table> 58<hr> 59<h3 class="anchor anchorWithStickyNavbar_JmGV" id=replacestackentry><code>replaceStackEntry()</code><a href=#replacestackentry class=hash-link aria-label="Direct link to replacestackentry" title="Direct link to replacestackentry">​</a></h3> 60<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>replaceStackEntry</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> entry</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">StatusBarProps</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> props</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">StatusBarProps</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">StatusBarProps</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 61<p>Replace an existing StatusBar stack entry with new props.</p> 62<p><strong>Parameters:</strong></p> 63<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>entry <div class="label basic required">Required</div><td>any<td>Entry returned from <code>pushStackEntry</code> to replace.<tr><td>props <div class="label basic required">Required</div><td>any<td>Object containing the StatusBar props to use in the replacement stack entry.</table> 64<hr> 65<h3 class="anchor anchorWithStickyNavbar_JmGV" id=setbackgroundcolor-android><code>setBackgroundColor()</code> <div class="label android">Android</div><a href=#setbackgroundcolor-android class=hash-link aria-label="Direct link to setbackgroundcolor-android" title="Direct link to setbackgroundcolor-android">​</a></h3> 66<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setBackgroundColor</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">color</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">ColorValue</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> animated</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>boolean</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 67<p>Set the background color for the status bar.</p> 68<div class="theme-admonition theme-admonition-warning admonition_WCGJ alert alert--warning"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 16 16"><path fill-rule=evenodd d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg></span>warning</div><div class=admonitionContent_pbrs><p>Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35.</div></div> 69<p><strong>Parameters:</strong></p> 70<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>color <div class="label basic required">Required</div><td>string<td>Background color.<tr><td>animated<td>boolean<td>Animate the style change.</table> 71<hr> 72<h3 class="anchor anchorWithStickyNavbar_JmGV" id=setbarstyle><code>setBarStyle()</code><a href=#setbarstyle class=hash-link aria-label="Direct link to setbarstyle" title="Direct link to setbarstyle">​</a></h3> 73<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setBarStyle</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">style</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">StatusBarStyle</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> animated</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>boolean</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 74<p>Set the status bar style.</p> 75<p><strong>Parameters:</strong></p> 76<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>style <div class="label basic required">Required</div><td><a href=/docs/statusbar#statusbarstyle>StatusBarStyle</a><td>Status bar style to set.<tr><td>animated<td>boolean<td>Animate the style change.</table> 77<hr> 78<h3 class="anchor anchorWithStickyNavbar_JmGV" id=sethidden><code>setHidden()</code><a href=#sethidden class=hash-link aria-label="Direct link to sethidden" title="Direct link to sethidden">​</a></h3> 79<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setHidden</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">hidden</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>boolean</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> animation</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">StatusBarAnimation</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 80<p>Show or hide the status bar.</p> 81<p><strong>Parameters:</strong></p> 82<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>hidden <div class="label basic required">Required</div><td>boolean<td>Hide the status bar.<tr><td>animation <div class="label ios">iOS</div><td><a href=/docs/statusbar#statusbaranimation>StatusBarAnimation</a><td>Animation when changing the status bar hidden property.</table> 83<hr> 84<h3 class="anchor anchorWithStickyNavbar_JmGV" id=setnetworkactivityindicatorvisible-ios><code>setNetworkActivityIndicatorVisible()</code> <div class="label ios">iOS</div><a href=#setnetworkactivityindicatorvisible-ios class=hash-link aria-label="Direct link to setnetworkactivityindicatorvisible-ios" title="Direct link to setnetworkactivityindicatorvisible-ios">​</a></h3> 85<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setNetworkActivityIndicatorVisible</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">visible</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>boolean</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 86<p>Control the visibility of the network activity indicator.</p> 87<p><strong>Parameters:</strong></p> 88<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>visible <div class="label basic required">Required</div><td>boolean<td>Show the indicator.</table> 89<hr> 90<h3 class="anchor anchorWithStickyNavbar_JmGV" id=settranslucent-android><code>setTranslucent()</code> <div class="label android">Android</div><a href=#settranslucent-android class=hash-link aria-label="Direct link to settranslucent-android" title="Direct link to settranslucent-android">​</a></h3> 91<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setTranslucent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">translucent</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>boolean</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 92<p>Control the translucency of the status bar.</p> 93<p><strong>Parameters:</strong></p> 94<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>translucent <div class="label basic required">Required</div><td>boolean<td>Set as translucent.</table> 95<h2 class="anchor anchorWithStickyNavbar_JmGV" id=type-definitions>Type Definitions<a href=#type-definitions class=hash-link aria-label="Direct link to Type Definitions" title="Direct link to Type Definitions">​</a></h2> 96<h3 class="anchor anchorWithStickyNavbar_JmGV" id=statusbaranimation>StatusBarAnimation<a href=#statusbaranimation class=hash-link aria-label="Direct link to StatusBarAnimation" title="Direct link to StatusBarAnimation">​</a></h3> 97<p>Status bar animation type for transitions on the iOS.</p> 98<table><thead><tr><th>Type<tbody><tr><td>enum</table> 99<p><strong>Constants:</strong></p> 100<table><thead><tr><th>Value<th>Type<th>Description<tbody><tr><td><code>'fade'</code><td>string<td>Fade animation<tr><td><code>'slide'</code><td>string<td>Slide animation<tr><td><code>'none'</code><td>string<td>No animation</table> 101<hr> 102<h3 class="anchor anchorWithStickyNavbar_JmGV" id=statusbarstyle>StatusBarStyle<a href=#statusbarstyle class=hash-link aria-label="Direct link to StatusBarStyle" title="Direct link to StatusBarStyle">​</a></h3> 103<p>Status bar style type.</p> 104<table><thead><tr><th>Type<tbody><tr><td>enum</table> 105<p><strong>Constants:</strong></p> 106<table><thead><tr><th>Value<th>Type<th>Description<tbody><tr><td><code>'default'</code><td>string<td>Default status bar style (dark for iOS, light for Android)<tr><td><code>'light-content'</code><td>string<td>White texts and icons<tr><td><code>'dark-content'</code><td>string<td>Dark texts and icons (requires API>=23 on Android)</table></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/statusbar.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/statusbar.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/sectionlist><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>SectionList</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/switch><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Switch</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#usage-with-navigator class="table-of-contents__link toc-highlight">Usage with Navigator</a><li><a href=#imperative-api class="table-of-contents__link toc-highlight">Imperative API</a><li><a href=#constants class="table-of-contents__link toc-highlight">Constants</a><ul><li><a href=#currentheight-android class="table-of-contents__link toc-highlight"><code>currentHeight</code> <div class="label android">Android</div></a></ul><li><a href=#props class="table-of-contents__link toc-highlight">Props</a><ul><li><a href=#animated class="table-of-contents__link toc-highlight"><code>animated</code></a><li><a href=#backgroundcolor-android class="table-of-contents__link toc-highlight"><code>backgroundColor</code> <div class="label android">Android</div></a><li><a href=#barstyle class="table-of-contents__link toc-highlight"><code>barStyle</code></a><li><a href=#hidden class="table-of-contents__link toc-highlight"><code>hidden</code></a><li><a href=#networkactivityindicatorvisible-ios class="table-of-contents__link toc-highlight"><code>networkActivityIndicatorVisible</code> <div class="label ios">iOS</div></a><li><a href=#showhidetransition-ios class="table-of-contents__link toc-highlight"><code>showHideTransition</code> <div class="label ios">iOS</div></a><li><a href=#translucent-android class="table-of-contents__link toc-highlight"><code>translucent</code> <div class="label android">Android</div></a></ul><li><a href=#methods class="table-of-contents__link toc-highlight">Methods</a><ul><li><a href=#popstackentry class="table-of-contents__link toc-highlight"><code>popStackEntry()</code></a><li><a href=#pushstackentry class="table-of-contents__link toc-highlight"><code>pushStackEntry()</code></a><li><a href=#replacestackentry class="table-of-contents__link toc-highlight"><code>replaceStackEntry()</code></a><li><a href=#setbackgroundcolor-android class="table-of-contents__link toc-highlight"><code>setBackgroundColor()</code> <div class="label android">Android</div></a><li><a href=#setbarstyle class="table-of-contents__link toc-highlight"><code>setBarStyle()</code></a><li><a href=#sethidden class="table-of-contents__link toc-highlight"><code>setHidden()</code></a><li><a href=#setnetworkactivityindicatorvisible-ios class="table-of-contents__link toc-highlight"><code>setNetworkActivityIndicatorVisible()</code> <div class="label ios">iOS</div></a><li><a href=#settranslucent-android class="table-of-contents__link toc-highlight"><code>setTranslucent()</code> <div class="label android">Android</div></a></ul><li><a href=#type-definitions class="table-of-contents__link toc-highlight">Type Definitions</a><ul><li><a href=#statusbaranimation class="table-of-contents__link toc-highlight">StatusBarAnimation</a><li><a href=#statusbarstyle class="table-of-contents__link toc-highlight">StatusBarStyle</a></ul></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>