Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to open Drawer using a custom event / action within a screen #2265

Closed
sujayjaju opened this issue Aug 18, 2017 · 10 comments
Closed

How to open Drawer using a custom event / action within a screen #2265

sujayjaju opened this issue Aug 18, 2017 · 10 comments

Comments

@sujayjaju
Copy link

sujayjaju commented Aug 18, 2017

Version

react-native-router-flux v4

Expected behaviour

A way to open the drawer from within a scene

Actual behaviour

Only the navbar button opens the drawer

Steps to reproduce

This is my Router

<Scene key="root" titleStyle={{}} hideNavBar>
    <Scene key="auth">
        <Scene key="login" component={Login} title={ I18n.t('loginTitle') }/>
    </Scene>
    <Scene key="drawer" drawer contentComponent={SideMenu} initial drawerPosition="right" drawerWidth={200} drawerLabel="Hi">
        <Scene key="main">
            <Scene key="menu" component={Menu} title={ I18n.t('menuTitle') }/>
            <Scene key="orders" component={Orders} title={ I18n.t('ordersTitle') }/>
        </Scene>
    </Scene>
</Scene>

I need a custom button within the Menu scene to open the drawer.
I tried:

Actions.refresh({key: "drawer", open: true})

But that does not work since the new DrawerNavigatior does not have "open" as a config option. Docs say the way to open is:

this.props.navigation.navigate('DrawerOpen');

Not sure how to call that?

@aksonov
Copy link
Owner

aksonov commented Aug 18, 2017

Try Actions.drawerOpen()

@Tanumay92
Copy link

Just Add in root scene a prop drawer={true}

@Tanumay92
Copy link

Can anyone tell me how to customize the drawer which is added in root scene
??

@sujayjaju
Copy link
Author

@Tanumay92
You can define your own component for the drawer

<Drawer key="app" contentComponent={DrawerContent} drawerWidth={300} >

@Tanumay92
Copy link

Can you explain a Bit @sujayjaju

@Blapi
Copy link
Collaborator

Blapi commented Dec 14, 2017

@Tanumay92 read the doc :

contentComponent React.Component   Component used to render the content of the drawer (e.g. navigation items).

@nguyenvanphuc2203
Copy link

@aksonov it work for me

@baxri
Copy link

baxri commented Mar 19, 2019

Worked also for me, good job :)

@cjinghong
Copy link

cjinghong commented Apr 19, 2019

I'm currently facing this problem. Because I have 2 drawers, Actions.drawerOpen() will only open the root drawer. I need to be able to open a specific drawer.

@roots-ai
Copy link

I'm currently facing this problem. Because I have 2 drawers, Actions.drawerOpen() will only open the root drawer. I need to be able to open a specific drawer.

How did you solve this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants