SheetManager.show opening Two instances on both iOS and Android

[ahsan-lebara]

``I am following the same structure mentioned in the documentation. When I hit sheet manager, it opens two instances.

await SheetManager.show(ThreeDSAuth, { payload: 'https://google.com', });

Here is the basic code of the sheet:

function ThreeDSAuthentication(props: SheetProps) {
  useEffect(() => {
    console.log(' Opening Sheet ');
  }, []);

  return (
    <ActionSheet containerStyle={styles.container} id={props.sheetId}>
      <View style={styles.header}>
        <View style={styles.headerTopLine}></View>
        <TouchableOpacity
          onPress={() => {
            SheetManager.hide(props.sheetId);
          }}
          style={styles.closeIcon}>
          {iconMapping.iconCrossGray}
        </TouchableOpacity>
      </View>
      <WebViewerScreen
        webURL={props.payload}
        paymentCallback={(token: string) => {
          SheetManager.hide(props.sheetId, {
            payload: token,
          });
        }}
      />
    </ActionSheet>
  );
}

export default ThreeDSAuthentication;

Package Versions: "react-native-actions-sheet": "0.9.0-alpha.21", "react-native": "0.66.5",

[gguidotti]

@ahsan-lebara I'm having the same issue. I'm running almost the same react-native version (0.6.3) and latest stable react-native-actions-sheet version (0.8.21). Have you found a solution in the meantime?

UPDATE: I figured that out. I took a look at current implementation inside my project and noticed that the sheets weren't created properly (a coworker updated to latest stable version a couple of months ago but apparently did nothing in terms of checking for breaking changes and so on). By following the website guide I replaced the previous logic with the SheetProvider component and now everything seems to be working fine.