Hide StatusBar in React Native when Drawer is opened

Question

Is there a way to hide the StatusBar only in certain components/when NavigationDrawer is opened? Right now, it is hidden everywhere.

I have a component

export default class Comp1 extends Component {
    ...
    render() {
        return (    
            <StatusBar hidden = {true} />
            ...
        )
    }
}

Which I implement into another Component

export default class Comp2 extends Component {
    ...
    render() {
        return (    
            <Comp1 ... />
            ...
        )
    }
}

Which is mounted into react navigation.

Doing it that way, the StatusBar is hidden on all screens. Is there a way to hide the StatusBar when something is clicked? Or do I have to implement it differently in the Component.

You can pass property to StatusBar component like this: https://facebook.github.io/react-native/releases/0.31/docs/statusbar.html#usage-with-navigator — Ivan Minakov, Aug 18 '17 at 13:47

score 1 · Accepted Answer · answered Aug 18 '17 at 15:10

Copy & Pasted from ufxmeng ufxmeng and edited a little:

import {
  StatusBar,
} from "react-native";

const MyDrawerNavigator = DrawerNavigator({
    //...
});

const defaultGetStateForAction = MyDrawerNavigator.router.getStateForAction;

MyDrawerNavigator.router.getStateForAction = (action, state) => {
    if(state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerClose') {
        StatusBar.setHidden(false);
    }

    if(state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerOpen') {
        StatusBar.setHidden(true);
    }


    return defaultGetStateForAction(action, state);
};

See here https://github.com/react-community/react-navigation/blob/673b9d2877d7e84fbfbe2928305ead7e51b04835/docs/api/routers/Routers.md and here https://github.com/aksonov/react-native-router-flux/issues/699

what If i want to call a custom component method like import DrawerContainer from '../Containers/DrawerContainer'; DrawerContainer.setHidden(false); — Navneet Garg, Oct 11 '18 at 13:01

score 0 · Answer 2 · answered Aug 18 '17 at 13:48

The way to do such a thing is to pass a prop from the components above it.

if in Comp2 you pass a prop to Comp1 for instance hiddenBool. You can set that value to be whatever you want it to be true/false in Comp2. Then when the prop reaches Comp1 and tries to render the status bar it will pass that prop rather than always passing true.

Same with onClick function, make the onClick set a prop to false/true and that will update your component .

Hide StatusBar in React Native when Drawer is opened

2 Answers2