React-native-navigation: [V2]setStackRoot not unmounting the first screen in the case of sidemenu

[React-Vishnu]

I have to reset my homescreen and sidedrawer. and i used setStackRoot for both but it works only for homescreen. after reset the sidedrawer it showing the first screen, not unmounting the first drawer screen

```js
Navigation.setRoot({
root: {
sideMenu: {
id: "sideMenu",
left: {
enabled: false,
stack: {
id: 'DrawerStack',
children: [{
component: {
name: "MyApp.LeftDrawer",
passProps: {
isLoggedIn: this.state.isLoggedIn,
},
}
}]
},
},
center: {
stack: {
id: 'Root',
children: [{
component: {
name: 'MyApp.HomeScreen',
passProps: {
isLoggedIn: this.state.isLoggedIn,
},
options: {
topBar: {
title: {
text: "Markets",
},
leftButtons: [
{
id: 'drawerMenu',
icon: icon,
color: Colors.topBarButton
},
],
},
}
}
}],
}
},
}
}
});

resetting the side drawer and homescreen

```js
   Navigation.setStackRoot('DrawerStack', {
  component: {
      name: "MyApp.LeftDrawer",
      passProps: {
          isLoggedIn,
      },
      options: {
          animations:{  
              setStackRoot:{  
              enable:true
              }
          }
      }
  }
});


  Navigation.setStackRoot('Root', {
  component: {
      name: 'MyApp.HomeScreen',
      passProps: {
          isLoggedIn,
          username,
          password,
          twofaStatus,
          accountType,
          isConnected,
      },
      options: {
          animations:{  
              setStackRoot:{  
              enable:true
              }
          },
          topBar: {
              borderColor: Colors.topBarColor,
              title: {
                  text: "Markets",
              },
              leftButtons: [
                  {
                  id: 'drawerMenu',
                  icon: icon,
                  color:Colors.topBarButton
                  },
              ]
          }
      }
  }   
});

---

"react-native-navigation": "^2.5.1",
"react-native": "0.57.8",
Platform: android

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[MakhouT]

I am having this exact same issue...
@React-Vishnu Were you able to fix this?

[MakhouT]

For me this is currently a critical bug, which means I have to fallback to a custom drawer built with Overlay

I'll provide as much details as I can so @guyca or @yogevbd can pick this one up.

So I am creating a sidemenu like this

    sideMenu: {
      right: {
        stack: {
          children: [
            {
              component: {
                id: CONSTANTS.DRAWER_COMPONENT,
                name: CONSTANTS.DRAWER_COMPONENT,
              },
            },
          ],
        },
      },
      center: {
        bottomTabs: {
          children: tabs,
        },
      },
      options: {
        sideMenu: {
          animationType: 'slide-and-scale',
          right: {
            animationVelocity: 2500,
            width: Dimensions.get('screen').width / 1.25,
            visible: false,
            enabled: false,
          },
        },
      },
    },
  }

My DRAWER_COMPONENT is pretty simple. It just takes in a component to render in the body of the sidemenu

export const Drawer = (props: IDrawerProps) => {
  const { component } = props;

  console.log(props);

  return (
    <View style={styles.sideMenuContainer}>
      <View style={styles.sidemenu}>
        <View style={styles.body}>{component && component()}</View>
      </View>
    </View>
  );
};

This is the part where it starts to get interesting.
Then I wrote an abstraction that injects the props and builds the sidemenu with the passed in data.

export const openDrawer = (
  componentId: string,
  title: string,
  component: () => React.ReactElement,
  rightButtonTitle?: string,
  rightButtonAction?: () => void,
) => {
  Navigation.setStackRoot(CONSTANTS.DRAWER_COMPONENT, [
    {
      component: {
        name: CONSTANTS.DRAWER_COMPONENT,
        passProps: {
          component,
        },
        options: {
          topBar: {
            leftButtons: [
              {
                id: 'leftButtonCallback',
                text: 'cancel'
              },
            ],
            rightButtons: [
              {
                id: 'rightButtonCallback',
                text: rightButtonTitle,
              },
            ],
            title: {
              text: title,
            },
          },
          animations: {
            setStackRoot: {
              enabled: true,
            },
          },
        },
      },
    },
  ]);

  Navigation.mergeOptions(componentId, {
    sideMenu: {
      right: {
        visible: true,
      },
    },
  });
};

Basically I am setting the title of the stack and passing a component prop to my DRAWER_COMPONENT that will render the component.

I call this abstraction like this

openDrawer(
      props.componentId,
     'Search article',
      () => <Text>This is the search artical component<Text/>,
      'Search',
      () => console.log('Searching'),
    );

This works perfectly up here.
The problem is when having a second button that also want to open the sidemenu and render an other title in the sidemenu with an other component.
So my second button press calls the open drawer like this:

openDrawer(
      props.componentId,
     'Add friend',
      () => <Text>Lets add a friend component<Text/>,
      'Add',
      () => console.log('Add'),
    );

And here the sidemenu opens up again, but still with the component and title that got mounted first.

The wanted solution is that the sidemenu should always reset the stack and open up the new passed component to it.

RN: 0.61.5
RNN: 3.6
OS: iOS / iPad / Simulator

I'll also try it now in the playground and see if it's reproducible.

[MakhouT]

@guyca @yogevbd I was able to reproduce this in the playground app
https://github.com/MakhouT/react-native-navigation/commit/353c059ee62ad3211c52a367a52219a735d1349b

[guyca]

@MakhouT Your issue is caused by wrong id. You need to assign a unique id to the stack displayed in the SideMenu - and call setStackRoot with that id.

applying the following patch file to your commit fixes the issue

diff --git a/playground/src/screens/LayoutsScreen.js b/playground/src/screens/LayoutsScreen.js
index b9044cfc2821823388bc67ec3ad841478322feb5..708a8f8a11ba9f9790ccf7222124fdd2a8bbb6ac 100644
--- a/playground/src/screens/LayoutsScreen.js
+++ b/playground/src/screens/LayoutsScreen.js
@@ -59,10 +59,9 @@ class LayoutsScreen extends React.Component {
     sideMenu: {
       left: stack({
           component: {
-            id: 'left',
             name: Screens.SideMenuLeft
           }
-      }),
+      }, 'left'),
       center: stack({
           component: {
             id: 'SideMenuCenter',
diff --git a/playground/src/screens/SideMenuCenterScreen.js b/playground/src/screens/SideMenuCenterScreen.js
index 0dbc8f1e6a6f3fee93c6aa590f3ba02eb4771516..f58ef1f1c9ff00bc99c1905a49d62784f0f534d6 100644
--- a/playground/src/screens/SideMenuCenterScreen.js
+++ b/playground/src/screens/SideMenuCenterScreen.js
@@ -1,4 +1,5 @@
 const React = require('react');
+const {Text} = require('react-native');
 const Root = require('../components/Root');
 const Button = require('../components/Button')
 const Navigation = require('../services/Navigation');

[MakhouT]

I just tested it out this way and now it's working like a charm. Thanks for having a look!

[temitopealabi]

Thanks @guyca had a similar issues mine was adding property color to the leftButtons property