React Native - Status Bar




React Native - Status Bar

In this chapter, we will show you how to control the status bar appearance in React Native.

The Status bar is easy to use and all you need to do is set properties to change it.

The hidden property can be used to hide the status bar. In our example it is set to false. This is default value.

The barStyle can have three values – dark-content, light-content and default.

This component has several other properties that can be used. Some of them are Android or IOS specific. You can check it in official documentation.

App.js

import React, { Component } from 'react';
import { StatusBar } from 'react-native'

const App = () => {
   return (
      <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true}/>
   )
}
export default App

If we run the app, the status bar will be visible and content will have dark color.

Output

React Native - Status Bar



Frequently Asked Questions

+
Ans: React Native - Picker view more..
+
Ans: React Native - ActivityIndicator view more..
+
Ans: React Native - Modal view more..
+
Ans: React Native - Status Bar view more..
+
Ans: React Native - Switch view more..
+
Ans: React Native - Text view more..
+
Ans: React Native - Alert view more..
+
Ans: React Native - Geolocation view more..
+
Ans: React Native - AsyncStorage view more..




Rating - NAN/5
502 views

Advertisements