Hello React Native Friends,
In this blog, I will explain about Status Bar in React Native.
In React Native, the status bar is a component that represents the status bar of the device (e.g., the bar at the top of the screen that displays the time, battery status, and other system information).
In React Native or any mobile app development framework, developers have the ability to customize the appearance of the status bar to match the design of their app. This can include changing the background color, text color, and other styling options.
import React, {useState} from 'react'; import { Button, Platform, SafeAreaView, StatusBar, StyleSheet, Text, View, } from 'react-native'; import type {StatusBarStyle} from 'react-native'; const STYLES = ['default', 'dark-content', 'light-content'] as const; const TRANSITIONS = ['fade', 'slide', 'none'] as const; const App = () => { const [hidden, setHidden] = useState(false); const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>( STYLES[0], ); const [statusBarTransition, setStatusBarTransition] = useState< 'fade' | 'slide' | 'none' >(TRANSITIONS[0]); const changeStatusBarVisibility = () => setHidden(!hidden); const changeStatusBarStyle = () => { const styleId = STYLES.indexOf(statusBarStyle) + 1; if (styleId === STYLES.length) { setStatusBarStyle(STYLES[0]); } else { setStatusBarStyle(STYLES[styleId]); } }; const changeStatusBarTransition = () => { const transition = TRANSITIONS.indexOf(statusBarTransition) + 1; if (transition === TRANSITIONS.length) { setStatusBarTransition(TRANSITIONS[0]); } else { setStatusBarTransition(TRANSITIONS[transition]); } }; return ( <SafeAreaView style={styles.container}> <StatusBar animated={true} backgroundColor="#61dafb" barStyle={statusBarStyle} showHideTransition={statusBarTransition} hidden={hidden} /> <Text style={styles.textStyle}> StatusBar Visibility:{'\n'} {hidden ? 'Hidden' : 'Visible'} </Text> <Text style={styles.textStyle}> StatusBar Style:{'\n'} {statusBarStyle} </Text> {Platform.OS === 'ios' ? ( <Text style={styles.textStyle}> StatusBar Transition:{'\n'} {statusBarTransition} </Text> ) : null} <View style={styles.buttonsContainer}> <Button title="Toggle StatusBar" onPress={changeStatusBarVisibility} /> <Button title="Change StatusBar Style" onPress={changeStatusBarStyle} /> {Platform.OS === 'ios' ? ( <Button title="Change StatusBar Transition" onPress={changeStatusBarTransition} /> ) : null} </View> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#ECF0F1', }, buttonsContainer: { padding: 10, }, textStyle: { textAlign: 'center', marginBottom: 8, }, }); export default App;
The React Native StatusBar component offers a range of customization options, allowing developers to create a polished and cohesive design for their mobile applications. Whether you need to match the status bar with your app’s theme, hide it for a fullscreen experience, or make it translucent for overlay effects, the StatusBar component provides the tools to achieve these goals. By mastering the StatusBar component, you can enhance the overall aesthetics and user interface of your React Native application.
Happy Coding!
In this article, we will learn about how to get database value in the Shopify…
Tailwind CSS has emerged as a powerful utility-first CSS framework, offering developers a unique approach…
The mobile app development field has witnessed a rapid revolution over the past few years.…
Hello Magento mates, Today we will learn to add a call JS on the checkout…
Business survival in today’s digital world has become extremely difficult. Using traditional marketing techniques is…
Are you setting up a payroll system for your eCommerce startup? Ensuring compliance with myriad…