closing drawer seems almost instantaneous now

[mschipperheyn]

Updated to 2.0. When I programmatically close the drawer, there doesn;t seem to be a closing animation anymore. It just jumps to a closed position.

  <Drawer
  type="overlay"
  ref="drawer"
  animation="easeInOut"
  openDrawerOffset={50}
  panCloseMask={1}
  acceptPan={!this.props.leftMenu.enabled}
  content={<DrawerMenu navigate={this.navigate.bind(this)} user={this.props.user}/>}
  onOpen={this.props.onOpen}
  onClose={this.props.onClose}
  acceptTap={this.props.leftMenu.visible}
  styles={{
   drawer:{
     shadowColor:'#000000',
     shadowOpacity: 0.8,
     shadowRadius: 3,
   },
   main:{
     paddingLeft:3
   }
  }}
  tweenHandler={(ratio) => {
    return {
      drawer: { shadowRadius: ratio < .2 ? ratio*5*5 : 5 },
      main: {
        opacity:(2-ratio)/2
      },
    }
  }}
  >
   <MainScreen navigate={this.navigate.bind(this)} toggleDrawer={this.toggleDrawer.bind(this)}/>

 </Drawer>

[rt2zz]

Off the top of my head, I am not sure what is happening. There is nowhere that we hard set the open/close position, it always runs through the tween function. It is possible there is a performance issue that is resulting in few to no animation frames.

I will give your code a try when I have a chance. In the meantime you might want to debug this by adding a log statement in your render method to see how often render is being called. Ideally render will be called 0 times during the open/close animation otherwise perf will be impacted.

Alternatively feel free to go back to v1, the main improvements for v2 were adding a mainOverlay and fixing captureGestures, but it does not appear you are using either of those features.

[rt2zz]

based on the fact that acceptTap is not working either it leads me to believe there is something weird going on with the interaction of your specific props and possibly the render cycle as well. Will let you know if I figure out more...

[mschipperheyn]

Ok, thanks. opening is smooth now. It may have been a glitch. I still can't close the drawer

[Qizly]

I ran into the same issue. When I first created a project with a couple of links and pages with light contents I had no problem but now that I added a lot of links in the drawer and the content pages are heavier, the animation is very fast and the screen flickers when I do drawer.close().

When close the drawer by tapping the content the speed is normal.

It didn't make sense so I removed all but one link in the drawer and that improved the speed but when I took out most of the content that also helped.

export default class extends Component {
  render(){
    const children = this.props.navigationState.children;
    return (
      <Drawer
        ref="navigation"
        type="displace"
        content={<SideMenu />}
        tapToClose={true}
        openDrawerOffset={0.3}
        panCloseMask={0.3}
        styles={{
          drawer: { shadowColor: '#000000', shadowOpacity: 0, shadowRadius: 0 },
          mainOverlay: {backgroundColor: '#000000', opacity: 0}}}
        negotiatePan={true}
        tweenHandler={(ratio) => ({
          mainOverlay: { opacity: ( ratio / 3 )}
        })}
      >
        <DefaultRenderer navigationState={children[0]} />
      </Drawer>
    );
  }
}

[Qizly]

I managed to make the animation smooth by changing the route and closing the drawer Instead of closing the drawer and changing the route. I use react-native-router-flux.