Navigation drawer getting open after coming back from other screen

Question

I am using Wix's react-native-navigation V2. In my navigation drawer there is one component name after pressing on it I am going to the next screen and after pressing back button I am coming back but drawer getting opened.

Following is the code of my home screen which have the right button to open navigation drawer.

export default class Boiler extends Component {

    constructor(props) {
        super(props);
        this.isSideDrawerVisible = false;
        Navigation.events().bindComponent(this);
    }

    navigationButtonPressed({ buttonId }) {
        if (buttonId === "buttonOne") {
            (!this.isSideDrawerVisible) ? this.isSideDrawerVisible = true : this.isSideDrawerVisible = false
            Navigation.mergeOptions(this.props.componentId, {
                sideMenu: {
                    left: {
                        visible: this.isSideDrawerVisible,
                    }
                }
            });
            this.isSideDrawerVisible = false
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>Hello</Text>
            </View>
        );
    }
}

following is the code of my home screen's setRoot

Navigation.setRoot({
        root: {
            sideMenu: {
                left: {
                    component: {
                        name: 'SideDrawer',
                        passProps: {
                            text: 'This is a left side menu screen'
                        }
                    }
                },
                center: {
                    stack: {
                        id: 'mainStack',
                        children: [
                            {
                                stack: {
                                    id: 'tab1Stack',
                                    children: [
                                      {
                                        component: {
                                          name: 'Home'
                                        }
                                      }
                                    ],
                                    options: {
                                      topBar: {
                                        leftButtons: [
                                          {
                                            id: 'buttonOne',
                                            icon: sources[0]
                                          }
                                        ],
                                      }
                                    }
                                  }
                                },
                        ],

                    }
                }
            }
        }
    });

I am not getting after coming back to the main home screen then why the navigation drawer is getting opened.

and the following is the code for after pressing text on navigation-drawer

goNew = () => {
    this.goClose()
      Navigation.push('mainStack', {
        component: {
          name: 'NewComp',
          passProps: {
            text: 'Pushed screen'
          },
          options: {
            topBar: {
              title: {
                text: 'New Component'
              }
            },
            sideMenu: {
              left: {
              enabled: false
              }
            }
          }
        }
      });
    }

Please help if anyone can. thanks in advance.

Answer 1

this happens when you open your navigation drawer (sidemenu) on pressing of button is component say homescreen like

 navigationButtonPressed({ buttonId }) {
           if(buttonId == 'menu'){                  
                  Navigation.mergeOptions(this.props.componentId, {
                        sideMenu:{
                              left:{
                                    visible:true
                              }
                        }
                  })
            }
   }

and close the sidemenu by swiping right/left. At this stage the option in navigation for homescreen is

         sideMenu:{
             left:{
                 visible:true
             }
         }

so when your homescreen component re appears in stack, the sidemenu will appear as the result of the visible option

the solution to this is in homescreen component subscribe to navigation events

 constructor(props) {
            super(props);
            Navigation.events().bindComponent(this); 
 }

and in your componentDidDisappear()

 Navigation.mergeOptions(this.props.componentId,{
            sideMenu:{
                left:{
                      visible:false
                }
          }
        })

where this.props.componentId is the id of your homescreen component

Answer 2

In your Navigation drawer function where you are pushing the new screen, you just need to close the drawer before pushing it like:

goNew = () => {
  Navigation.mergeOptions(this.props.componentId, {
    sideMenu: {
      left: {
        visible: false
      }
    }
  })
    Navigation.push('mainStack', {
      component: {
        name: 'NewComp',
        passProps: {
          text: 'Pushed screen'
        },
        options: {
          topBar: {
            title: {
              text: 'New Component'
            }
          },
          sideMenu: {
            left: {
            enabled: false
            }
          }
        }
      }
    })
  }

where this.props.componentId is nothing but the component id for your drawer created by default by react-native-navigation.