React-native-router-flux: How to customize drawer button

[administerspice]

Version

• react-native-router-flux v3.34.0
• react-native v0.31.0

I'm trying to use an Ionicon from react-native-vector-icons as the menu button.

renderMenuButton = () => {
        return (
            <TouchableOpacity style={styles.leftButtonContainer}>
                <Ionicon name="ios-menu" size={30} color="#EF5C30"/>
            </TouchableOpacity>
        );
    };

...

<Scene key="dashboard" component={Dashboard} title="DASHBOARD" type='replace' leftButton={this.menuButton}/>

Actual behaviour

Button renders correctly but does not open drawer.
Using drawerImage={this.menuButton()} does not render button though functionality is still there.

[ailinykh]

The drawerImage property accepts only image path. It renders that inside an <Image> component.
If you want to use custom drawer icon component you need to provide renderLeftButton property.

<Scene 
    key="dashboard" 
    component={Dashboard} 
    title="DASHBOARD" 
    type='replace' 
    renderLeftButton={this.menuButton}
/>

[administerspice]

Yes, that does render the custom button, but how can I attach drawer toggle action?

[berkayk]

renderLeftButton={() => <MenuButton press={() => { Actions.refresh({key: "drawer", open: true})}} />}

I am not sure if this is the best way to do but it works. "drawer" is the key of the main container that has Drawer as the component. If there is a better way, please share with me :)

[aksonov]

Better way is to get reference to drawer directly and call its methods: Actions.get(‘drawer’).ref.switch()
and set Actions.refresh({ref:this.refs.drawer’) within comonentDidMount of Drawer component.

On 22 Aug 2016, at 20:39, Berkay Kaya [email protected] wrote:

renderLeftButton={() => }

I am not sure if this is the best way to do but it works. "drawer" is the key of the main container that has Drawer as the component. If there is a better way, please share with me :)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/1078#issuecomment-241508407, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcUgfHGaOuUlKPqmzJNHmeF-IgSchks5qiezJgaJpZM4JotPY.

[berkayk]

Can you give a short example?

[administerspice]

@aksonov Thanks! It works now!

@berkayk
In Drawer component:
componentDidMount() { Actions.refresh({key: 'drawer', ref: this.refs.navigation}); }

In Button component:
onPress={() => {Actions.get('drawer').ref.toggle()}}

[berkayk]

Thanks @wildQueequeg It worked! I also understood how to use refs in react-native-router-flux.
Cheers :+1:

[lkag2000]

My entire screen with header moves down when I add drawer sidemenu. Where could be the issue?

[remoteportal]

Has Actions.get() been deprecated as a method of Actions? It's not listed in the API.
When I try it I get:

_reactNativeRouterFlux.Actions.get is not a function
... .get is undefined