[Discussion] Interop Story with Portal

[crutchcorn]

Hi there! Huge fan!

When using @gorhom/portal, I found a confusing behavior.

I noticed that when I was trying to open the BottomSheetModal component via a ref, it would open fine on web + iOS, but would not open at all on Android.

I can minimally reproduce this issue with the following:

import {useCallback, useRef} from "react";
import {BottomSheetModal, BottomSheetModalProvider, BottomSheetView} from "@gorhom/bottom-sheet";
import {GestureHandlerRootView} from "react-native-gesture-handler";
import {PortalProvider} from "@gorhom/portal";
import {Button} from "react-native";

function App() {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);
  
  return <PortalProvider shouldAddRootHost={false}>
    <GestureHandlerRootView style={{flex: 1}}>
      <BottomSheetModalProvider>
        <BottomSheetModal
          ref={bottomSheetModalRef}
        >
          <BottomSheetView
          >
            <Text>Hi!</Text>
          </BottomSheetView>
        </BottomSheetModal>
      </BottomSheetModalProvider>
      <Button title="Open" onPress={handlePresentModalPress}/>
    </GestureHandlerRootView>
  </PortalProvider>
}

However, after some digging I realized it's because <PortalProvider> is being added via <BottomSheetModalProvider> but for some reason on Android, it's detecting the top-most provider.

However, this opens a totally different non-bug related question:

Should <BottomSheetModalProvider> overwrite the provided instance of <PortalProvider>?

I would argue "no" and suggest that we add a namespace={string} flag to @gorhom/portal (happy to do this PR myself to both Portal and BottomSheet)

However, even if the answer is "yes", we should document this edgecase somewhere.

WDYT?

[gorhom]

hi @crutchcorn, thanks for opening up this issue/discussion.

based on your initial investigation, you are right. The bottom sheet modal should not mount on the most-top portal-host but instead the portal-host added by the bottom sheet modal provider.

seems like a bug, i'll give it a quick look and see if that something i could fix today, if not feel free to cut a PR :)

[gorhom]

did a quick investigation and found that by default the bottom sheet modal does not provide a custom host name for the portal, therefore it remains as the default value root, which explains why the modal mounted in the root portal host

https://github.com/gorhom/react-native-bottom-sheet/blob/master/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx#L202

[gorhom]

this should be addressed in v5.1.5