React-native-router-flux: Close drawer on page change.

Created on 28 Sep 2016  路  4Comments  路  Source: aksonov/react-native-router-flux

So inside my drawer I am emitting an action to change scenes.

I noticed this negates the page change and only closes the draw:

 Actions.home()
 Actions.refresh({key: 'drawer', open: value => false })

With minimal knowledge on the design of the library, I could see this being caused by some async locking. Could I append a params or callback to either of these functions to get my desired behavior? Thanks in advance.

question

Most helpful comment

I was facing this either, took me very long time to find solution.
Right now, using context seems to be the best way to achieve redirect & close drawer:
(i guess you want to call those two statements when selecting an item from the drawer)

<Drawer
    .....
    content={<DrawerContent />}
    .....
>
        .....
</Drawer>

class DrawerContent extends Component {

    onHomeSelected(){
        const drawer = this.context.drawer;
        drawer.close()
        Actions.home()
    }

    render() {
        return (
            <View>
                <Text onPress={()=>this.onHomeSelected()}>HOME</Text>
            </View>
        )
    }
}

DrawerContent.contextTypes = {
    drawer: React.PropTypes.object
}

hope this helps you :)

All 4 comments

I was facing this either, took me very long time to find solution.
Right now, using context seems to be the best way to achieve redirect & close drawer:
(i guess you want to call those two statements when selecting an item from the drawer)

<Drawer
    .....
    content={<DrawerContent />}
    .....
>
        .....
</Drawer>

class DrawerContent extends Component {

    onHomeSelected(){
        const drawer = this.context.drawer;
        drawer.close()
        Actions.home()
    }

    render() {
        return (
            <View>
                <Text onPress={()=>this.onHomeSelected()}>HOME</Text>
            </View>
        )
    }
}

DrawerContent.contextTypes = {
    drawer: React.PropTypes.object
}

hope this helps you :)

I ended up doing something similar with a prop

SideMenu.js

class SideMenu extends Component {
  static propTypes = {
    close: PropTypes.func.isRequired
  }

Draw.js

class AppDrawer extends Component {
  closeSideMenu() {
    this._drawer.close()
  }

  render(){
    const state = this.props.navigationState
    const children = state.children

      return (
        <Drawer
          ref={(ref) => this._drawer = ref}
          type="static"
          tapToClose={true}
          open={state.open}
          onOpen={()=>Actions.refresh({key:state.key, open: true})}
          onClose={()=>Actions.refresh({key:state.key, open: false})}
          content={<SideMenu close={this.closeSideMenu.bind(this)}/>}
          openDrawerOffset={70}
          closedDrawerOffset={-3}
          styles={drawerStyles}>
          <DefaultRenderer session={session}
                           navigationState={children[0]}
                           onNavigate={this.props.onNavigate} />
        </Drawer>
      );
    } else {
      return <Text>Invalid Session</Text>
    }
  }
}

Thank you for the direction helped immensely!

@charpeni u can close this

Not sure if this is a good solution but works for me. In your components called from the drawer add this method Actions.refresh({ key: 'drawer', open: false }) to componentWillMount()

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jgibbons picture jgibbons  路  3Comments

tonypeng picture tonypeng  路  3Comments

fgrs picture fgrs  路  3Comments

GCour picture GCour  路  3Comments

maphongba008 picture maphongba008  路  3Comments