React navigation box status? (open or closed)

DrawerClose

Custom navigation actions are required to capture the event :

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

const defaultGetStateForAction = MyDrawerNavigator.router.getStateForAction;

MyDrawerNavigator.router.getStateForAction = (action, state) => {

    //use 'DrawerOpen' to capture drawer open event
    if (state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerClose') {
        console.log('DrawerClose');
        //write the code you want to deal with 'DrawerClose' event
    }
    return defaultGetStateForAction(action, state);
};

      

        
        
        
      

    

Working with "navigation reaction": "^ 3.5.1"

const defaultGetStateForAction = DrawerNav.router.getStateForAction;

DrawerNav.router.getStateForAction = (action, state) => {

    if(action){
        if(action.type == 'Navigation/MARK_DRAWER_SETTLING' && action.willShow){   
            StatusBar.setHidden(true);
        } else if(action.type == 'Navigation/MARK_DRAWER_SETTLING' && !action.willShow) {
            StatusBar.setHidden(false);
        }
    }

    return defaultGetStateForAction(action, state);
};


      

        
        
        
      

    

I found something similar to asdfghjklm

.

Here is my code that works fine even when you use to open and then use a button to close it:

openCloseDrawer = (props) => {
  if (props.navigation.state.index == 1) {
    props.navigation.navigate('DrawerClose');
  } else {
    props.navigation.navigate('DrawerOpen');
  }
}

      

        
        
        
      

    

I execute this function when the user clicks the Open / Close Drawer button.

Based on the solution by Brad Boombalow, Fredrivette (thank you, man), I find a faster solution to the answer (the other solution is delaying seconds in some cases).

const defaultGetStateForAction = StackLogadoDrawer.router.getStateForAction;

StackLogadoDrawer.router.getStateForAction = (action, state) => {
  switch (action.type) {
    case 'Navigation/MARK_DRAWER_SETTLING':
      if (action.willShow == false) {
        console.log('CERRADO');
      } else if (action.willShow == true) {
        console.log('ABIERTO');
      }
      break;
    }

  return defaultGetStateForAction(action, state);
};

      

        
        
        
      

    

It only fires when there is an action (or very close).

Works on gestures or openDrawer () call

Anyway, I think this is a "must have" simple and straightforward way in the API

Hmm, not really much. One way would be to control the opening / closing of the drawer manually using:

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

      

        
        
        
      

    

This way you can close your private / public events in a function where you can do whatever you want before opening / closing.

The only other possible solution I've seen in my docs is using a custom contentComponent

. You can pass a function to an event onItemPress(route)

, so maybe you can try connecting to it.

This works fine in React-Native, not sure about React .

In my case, I had to change the StatusBar , so I didn't need to know if the box is completely closed or not, so the code below worked for me ...

props.navigation.state.drawerMovementDirection === 'closing'
        ? //it is closing not fully closed
        : (props.navigation.state.drawerMovementDirection === 'opening' ||
            props.navigation.state.isDrawerOpen) && (
          //fully opened or opening 
        )

      

        
        
        
      

    

If you don't need immediate information, you can use the code below and it will work fine and give you an exact answer whether the box is open or not!

Note. The answer will be delayed, in my case it took 1 second.

        props.navigation.state.isDrawerOpen?
                //open
                :
                //close;

      

        
        
        
      

    

If the solution doesn't work, I'm really sorry, but first of all, the answer won't work! So this is the version that works for me :))

For those who want to wire it up so that the drawer events are available on one of your screens or components instead of the top level app, I was able to wire it up using screenProps as described in this post . First, you set up screenProps in your application and pass the router and whatever you need. You can extract the screenProps from the props and use it as a screen or component (in this example I wired it in the constructor) by using getStateForAction to set setState in your router event driven component.

Here's an example (some code has been removed for clarity)

App.js

import React from 'react';
import { AppLoading } from 'expo';

import {
  createDrawerNavigator,
  createAppContainer,
  createStackNavigator,
} from 'react-navigation';

import { HomeScreen } from './src/screens/HomeScreen.android';
import { LanguageSelectScreen } from './src/screens/LanguageSelectScreen';

export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
    isTilted: false,
  };

  constructor() {
    super();
  }

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading  />
      );
    } else {
      return (
        <MyApp screenProps={MyAppNavigator.router} />
      );
    }
  }
}

const MyAppNavigator = createDrawerNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    PlayerNameScreen: {
      screen: PlayerNameScreen,
    },
  },
  {
    unmountInactiveRoutes: true,
    initialRouteName: 'PlayerNameScreen',
  },
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MyAppNavigator,
    },
    MyModal: {
      screen: LanguageSelectScreen,
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  },
);

export const MyApp = createAppContainer(RootStack);

      

        
        
        
      

    

HomeScreen.android.js

import React from 'react';
import {Icon} from 'react-native-elements';

export class HomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: () => 'Home',
    drawerIcon: ({ tintColor }) => (
      <Icon
        name="checkerboard"
        type="material-community"
        size={25}
        color={tintColor}
      />
    ),
  };

  constructor(props) {
    super(props);

    const router = props.screenProps;

    const defaultGetStateForAction = router.getStateForAction;

    router.getStateForAction = (action, state) => {
      switch (action.type) {
        case 'Navigation/MARK_DRAWER_SETTLING':
          if (action.willShow == false) {
            console.log('CLOSED');
            this.setState({ isTilted: false });
          } else if (action.willShow == true) {
            this.setState({ isTilted: true });
            console.log('OPEN');
          }
          break;
      }

      return defaultGetStateForAction(action, state);
    };

    this.state = {
      isTilted: false,
    };
  }

  render() {
    const { isTilted } = this.state;

    // ... render using isTilted
  }

}

      

        
        
        
      

    

Without Redux integration, you can use onNavigationStateChange for the router component. Just intercept the drawer actions: DrawerOpen and DrawerClose .

Example:

  handleNavigationState = (previous, next, action) => {    
    if (action.routeName === 'DrawerOpen') {
      this.props.setDrawerState(true);
    } else if (action.routeName === 'DrawerClose') {
      this.props.setDrawerState(false);
    }
  }

  render() {
    return (
      <Router onNavigationStateChange={this.handleNavigationState} />
    );
  }