Drawer Navigator Event (open, close) to animate a menu

Question

My Drawer :

const AppDrawerNavigator = createDrawerNavigator({

    Home: {
        screen: HomeScreen,
    },
}, {
    contentComponent: Sidebar
}
 )

Here my Side Bar component : (troncated to be more clear)

render() {
  const routes = [{
      title: "Home",
      icon: "home",
      route: "HomeScreen",
  },
  {
      title: "Settings",
      icon: "cog",
      route: "Settings",
  }]

  handleViewRef = ref => this.view = ref;
  bounce = () => this.view.bounce(80000)

return (
    <Animatable.View animation="fadeInDown" iterationCount="infinite" direction="alternate">
     <View style={ styles.tab}>
     {
         routes.map(e => (
             <TouchableOpacity key={e.route} style={ styles.link } onPress={_ => this.navigate(e.route)}> 
                <Icon style={styles.ico} name={e.icon} size={20}/>
               <Text style={styles.txt}> {e.title}  </Text>
              </TouchableOpacity>
        ) 
)}
   </Animatable.View>

As you can see I use an animatable View from https://github.com/oblador/react-native-animatable

this lib got onAnimationBegin, so what I would like to archieve is to get an 'event' from the drawer, which said "im open" so I can call onAnimationBegin to start my animation. Because in my exemple, it's a loop, just to see if the animation works.

Thanks a lot for your help

score 0 · Answer 1 · answered Oct 19 '18 at 12:46

I think, because the sidebar is a complete react component, you can use the componentDidMount() method. So what you can do is :

componentDidMount(){
    onAnimationBegin()
}

A complete reference about the componentDidMount() method can be found here: https://reactjs.org/docs/react-component.html#componentdidmount

Drawer Navigator Event (open, close) to animate a menu

1 Answers1