CODEWITHSUNDEEP
javascriptreactjsreact-native
Digvijay
Digvijay

Reputation: 3271

How to show or hide status bar on different screens in React Native

I am new to react native and trying to create some app in which I want to show or hide status bar on different screens.In main screen I don't want to show status bar for that I have set its property hidden={true} but on doing this its also not visible on other screens how can I make it visible on other screens.

In Onboard and Home and screen I want to show status bar and in Login and Register screen I don't wanna show status bar.

Below is my code:

App.js

import React from 'react';
import {StatusBar} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Onboard from './components/Onboard';
import Login from './components/Login';
import Register from './components/Register';
import Home from './components/Home';

const Stack = createStackNavigator();

const App = () => {

return (
  <NavigationContainer>
   <StatusBar hidden={true}/>
    <Stack.Navigator>
     <Stack.Screen
       name="Onboard"
       component={Onboard}
       options={{ headerShown: false }} />
    <Stack.Screen
      name="Login"
      component={Login}
      options={{ headerShown: false }} />
    <Stack.Screen
      name="Register"
      component={Register} />
    <Stack.Screen
      name="Home"
      component={Home} 
      options={{ 
        headerLeft: null,
        headerTintColor:'white',
        headerStyle: {
          backgroundColor: '#e57373',
          elevation:0,
          shadowOpacity:0
       } }}/>  
    </Stack.Navigator>
  </NavigationContainer>
  );
};

export default App;

Someone let me know how can I achieve desired results.

Upvotes: 2

Views: 6346

Answers (2)

Ugur Eren
Ugur Eren

Reputation: 2204

If you don't want to put StatusBar... in every screen, you can also use useFocusEffect hook of react-navigation. https://reactnavigation.org/docs/use-focus-effect/

It is cleaner and easy to read.

import { useCallback } from 'react';
import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(useCallback(() => {
  // This will run when screen is `focused` or mounted.
  StatusBar.setHidden(true);

  // This will run when screen is `blured` or unmounted.
  return () => {
    StatusBar.setHidden(false);
  }
}, []));

Upvotes: 9

Flash At&#246;lyesi
Flash At&#246;lyesi

Reputation: 159

componentDidMount() {
   StatusBar.setHidden(false);
}

Add this code to every page's class. Write true or false to show and hide.

Upvotes: 1

Related Questions