can't navigate to different screen using react-native-drawer with react-native-router-flux

I'm using react-native-router-flux for the Navigation system and using react-native-drawer for the sidebar. If an user clicks on menu item which is in the sidebar, I want to redirect user to different screen and close the Drawer. I'm using the following code snippets.

Actions.refresh({key: 'drawer', open: false}) to Close the Drawer

Actions.pageTwo.call() to Open the Second Page

Both are working without any problem if I'm using it in separate functions. But, If I trigger both the snippets from the same function. It is not working.

Thanks in Advance,

Solution

I have this scenario working for me with both libraries. At a high level I create a custom component to render the content of react-native-drawer which I pass a function to responsible for closing the drawer. Then when I press one of the drawer items I fire both a react-native-router-flux navigation action (in my case a PUSH) and I call the function passed in to close the drawer.

Here is what defining my drawer looks like. Remember DrawerNavigationConten is ultimately just a ListView or whatever implementation you prefer to render the drawer content.

class RootComponent extends Component {
  ...

  closeDrawer() {
    this.drawerRef.closeDrawer();
  }

  render() {
    const drawerNavigationContent = (
      <DrawerNavigationContent
        closeDrawer={this.closeDrawer.bind(this)}
      />
    );

    return <Drawer
      ref={(ref) => { this.drawer = ref; }}
      content={drawerNavigationContent}
      ...
      >
      ...here I define my react-native-router-flux scenes...
      </Drawer>
    );
  }
  ...
}

Here are the important items in DrawerNavigationContent

  import { Actions } from 'react-native-router-flux';

  class DrawerNavigationContent extends Component {
    ...

    navigate(location) {
      Actions[location]();
      this.props.closeDrawer();
    }

    ...

    render() {
      ...
      <TouchableOpacity onPress={this.navigate(...some dynamic scene key...)}>
        ...
      </TouchableOpacity>
      ...
    }
  }