Change Status Bar Background Color in React Native
source link: https://webomnizz.com/change-status-bar-background-color-in-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Sometimes, we need to use a different color on the Application Status Bar on both devices i.e. Android and IOS. In this article, we are going to learn how to change status bar background color in your React Native application. Let’s start without further delay.
Table of content
This is what I have on my App.js file. Basically, The MainScreen is the landing screen that only contains some text.
import { StyleSheet } from 'react-native';
import MainScreen from './screens/MainScreen';
const THEME_COLOR = '#285E29';
export default function App() {
return (
<>
<MainScreen />
</>
);
}
The constant THEME_COLOR
holds the main color that we want to apply to the Status Bar as a background color.
Background Color for IOS Device
We are going to use the SafeAreaView to change the background color of the status bar for the IOS device.
SafeAreaView only applicable to iOS devices with iOS version 11 or later.
const THEME_COLOR = '#285E29';
export default function App() {
return (
<>
<SafeAreaView style={styles.topSafeArea} />
<SafeAreaView style={styles.bottomSafeArea}>
<StatusBar barStyle="light-content" />
<MainScreen />
</SafeAreaView>
</>
);
}
const styles = StyleSheet.create({
topSafeArea: {
flex: 0,
backgroundColor: THEME_COLOR
},
bottomSafeArea: {
flex: 1,
backgroundColor: THEME_COLOR
},
});
Now if you test the above codes in the IOS simulator or real Device then its working fine with it. But as we know that the SafeAreaView is not working with Android devices, so we have to implement it in a different way.
You might also like
Background Color for Android Device
Let’s make a custom StatusBar to make it working with the Android device. Create a component with the name AppStatusBar.js and add the following code.
import React from 'react';
import { StyleSheet, StatusBar, View } from 'react-native';
const AppStatusBar = ({backgroundColor, ...props}) => {
return (
<View style={[styles.statusBar, backgroundColor]}>
<StatusBar backgroundColor={backgroundColor} {...props} />
</View>
);
};
const BAR_HEIGHT = StatusBar.currentHeight;
const styles = StyleSheet.create({
statusBar: {
height: BAR_HEIGHT
},
});
export default AppStatusBar;
We have created a view with the same height and the background-color. The StatusBar.currentHeight
will provide the StatusBar height of the current device. Later we have merged the backgroundColor property with the status bar style.
style={[styles.statusBar, backgroundColor]}
Finally, this is how we have implemented it to the App.js file.
import React from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import AppStatusBar from './components/AppStatusBar';
import MainScreen from './screens/MainScreen';
const THEME_COLOR = '#285E29';
export default function App() {
return (
<>
<SafeAreaView style={styles.topSafeArea} />
<SafeAreaView style={styles.bottomSafeArea}>
<AppStatusBar backgroundColor={THEME_COLOR} barStyle="light-content" />
<MainScreen />
</SafeAreaView>
</>
);
}
const styles = StyleSheet.create({
topSafeArea: {
flex: 0,
backgroundColor: THEME_COLOR
},
bottomSafeArea: {
flex: 1,
backgroundColor: THEME_COLOR
},
});
We hope this article will help you to change status bar color to the React Native application. If you like this article then please follow us on Facebook and Twitter.
- Category: React Native
Posted by Jogesh Sharma
Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.
Post navigation
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK