CODEWITHSUNDEEP
androidiosreact-nativenavigation-drawer
Sugeivan Senthinathan
Sugeivan Senthinathan

Reputation: 129

Drawer in React native

I implement drawer in react native

  <Drawer
    ref={(ref) => this._drawer = ref}
    type="overlay"
    tapToClose={true}
    content={ <Navigator

       initialRoute={{name: 'controlpanel'}}
       renderScene={this.renderScene.bind(this)}
        />}

    acceptDoubleTap
    styles={{main: {shadowColor: '#000000', shadowOpacity: 0.3, shadowRadius: 15}}}
    onOpen={() => {
      console.log('onopen')
      this.setState({drawerOpen: true})
    }}
    onClose={() => {
      console.log('onclose')
      this.setState({drawerOpen: false})
    }}
    tweenDuration={100}
    panThreshold={0.08}
    disabled={this.state.drawerDisabled}
    openDrawerOffset={0.2}
    panOpenMask={0.2}
    negotiatePan
    >

     <Navigator

       initialRoute={{name: 'main'}}
       renderScene={this.renderScene.bind(this)}
        />

in side drawer (ControlPanel component), I created 5 button. when i click one button, it shows like this:

enter image description here

after clicking my account , it looks like this:

enter image description here

I want it to be full size.

Upvotes: 0

Views: 640

Answers (1)

lalkmim
lalkmim

Reputation: 646

The content property should receive the component to be shown inside the Drawer, and the children tags of the Drawer should receive the main content of your app.

I imagine that, when a user clicks on a link, it should close the Drawer and present the content on your main page, correct?

My suggestions are:

1) Replace your content property with just the component with the links (the 'controlpanel' points to which component?)

content={ <Navigator
   initialRoute={{name: 'controlpanel'}}
   renderScene={this.renderScene.bind(this)}
    />}

Replace with something like:

content={<ControlPanel />}

2) After clicking the button, you should push the route you want to show to your navigator object so it appears on the correct location.

navigator.push({ name: 'main' });

Upvotes: 1

Related Questions