Open Drawer from the navigation bar

[haikov]

Hey, thank you for the amazing library!

I'm trying to implement navigation with drawer by root-two and I faced the problem. Is it possible to open drawer by clicking at the left button on the navigation bar? Here's my current code:

Inside index.ios.js I have

...
renderLeftButton() {
   // is it possible to open drawer here
   return (
       <TouchableOpacity onPress={() => this.context.drawer.open()} style={{height: 20, width: 20, backgroundColor: 'black'}}/>
    )
}
...
<Router createReducer={reducerCreate}>
    <Scene key="modal"  hideNavBar={true}>
        <Scene key="drawer" component={Drawer}>
            <Scene key="container" renderLeftButton={this.renderLeftButton.bind(this)}>
                <Scene key="dashboard" type="replace" component={Dashboard}/>
                <Scene key="articles" type="replace" component={Articles}/>
            </Scene>
        </Scene>
    </Scene>
</Router>
...

Or maybe I'm doing something wrong?

[jeroenbourgois]

I struggled a bit with this myself.... But what I already see missing is the binding of the context types?

I think you will need to create your own NavBar component and set the contexType with the drawer there... What I did was copying the NavBar in the source of this repo and build there...

Then, inside that NavBar be sure to include the context type. So in short, create a NavBar

class NavBar extends Component {
   // ... implementation found in this repo, just tweak it to what you need
}

// context types!
NavBar.contextTypes = {
  drawer: PropTypes.object
}

Then on your scene pass the NavBar and the drawer will be passed in the context. Allthough for me I had to pass the NavBar as a child of the drawer (for you that would be container instead of drawer. Here is my router:

<Router createReducer={reducerCreate}>
    <Scene key="modal" hideNavBar={true}>
      <Scene key="login" type="push" direction="vertical" initial={true} component={Login} title="Inloggen" />
      <Scene key="register" type="push" direction="vertical" hideNavBar={true} component={Register} title="Register" />
      <Scene key="howItWorks" component={HowItWorks} title="Hoe werkt het?" />

      <Scene key="sidemenu" component={SideMenu} title="ballekes">
        <Scene key="main" navBar={NavBar}>
          <Scene key="home" component={Home} title="Home" />
        </Scene>
      </Scene>
    </Scene>
  </Router>

BUT -> I am by far an expert, I am still learning a whole lot about both React Native, Redux and this library. So I might be doing things the wrong way :)

[haikov]

@jeroenbourgois thank you for the nice idea!

I solved it this way. First, I implemented my custom nav bar this way:

import React from 'react-native';
import NavBar from 'react-native-router-flux/src/NavBar';

class AppNavBar extends NavBar {
    static contextTypes = {
        drawer: React.PropTypes.object
    };

    _renderLeftButton() {
        return (
            <TouchableOpacity onPress={this.context.drawer.open}>
                <Text>Test</Text>
            </TouchableOpacity>
        );
    }
}

but I started to see 'Maximum call stack exceeded' because of this line inside the render: https://github.com/aksonov/react-native-router-flux/blob/master/src/NavBar.js#L60 (it returns itself in the loop). So I have to rewrite render function also. And the final class is

class AppNavBar extends NavBar {
    static contextTypes = {
        drawer: React.PropTypes.object
    };

    _renderLeftButton() {
        return (
            <TouchableOpacity onPress={this.context.drawer.open}>
                <Text>Test</Text>
            </TouchableOpacity>
        );
    }

    render() {
        const state = this.props.navigationState;
        return (
            <Animated.View
                style={[styles.header, state.navigationBarStyle]}>
                {state.children.map(this._renderTitle, this)}
                {this._renderBackButton()}
                {this._renderLeftButton()}
                {this._renderRightButton()}
            </Animated.View>
        );
    }
}

Thanks again!

[KBLNY]

@gaykov That's sounds a pretty solution, but I get the following error:
Cannot read property 'open' of undefined
Any idea?

[haikov]

@KBLNY make sure you have drawer in you contextTypes:

static contextTypes = {
    drawer: React.PropTypes.object
};

[coderbit-net]

Helped me a lot. Many thanks ))

[aksonov]

@gaykov I believe you should always prefer composition over inheritance in react native world (btw, maybe it could be true for any language). As I see you are using private API of NavBar, so it easy could be broken (or already broken)

[coderbit-net]

@aksonov
Pavel, what is the best way to hide navigation drawer after any onPress={Action ...}

[aksonov]

@A1ex5andr It is out of scope for this component. You will probably need onPress={()=>{Action.NAME();drawer.hide()}

[coderbit-net]

@aksonov Exactly 👍 Thanks a lot ))

[haifaGh]

Hey can you please post the complete code .. I'm struggling in integrating drawer and navbar here .. thanks a lot :)