[Bug?] ModalBottomSheet loses contexts

[deniz-blue]

ModalBottomSheet (when not nativeOverlay) seems to use a custom in-library Portal implementation that reparents the sheet into a different tree, this makes child components/tree unable to use existing context from the tree.

// psuedocode
const Cx = createContext();

const SheetUser = () => {
  return (
    <Cx value={1}>
      <ModalBottomSheet ...>
         <Inner />
      </ModalBottomSheet>
    </Cx>
  )
}

const Inner = () => {
  const value = useContext(Cx)
  // value is always undefined
  return ...
}

This should either be documented on the documentation or it could be solved by using a library such as react-native-teleport

PS. I came across this issue while trying to add keyboard avoidance to a nativeOverlay modal sheet, and it does not seem to be really possible - keyboard state is undetectable inside the sheet. Should I make another issue for that?

[deniz-blue]

A third option would be to provide some sort of escape hatch for a "bring your own portal" kind of solution

[falcondpr]

I ran into this as well and dug into the implementation a bit some findings that might be useful for whoever picks this up.

The root cause is in how the provider portal works. Portal doesn't use a real React portal: it registers the already-created child elements in a map:

react-native-bottom-sheet/src/BottomSheetProvider.tsx

Lines 84 to 86 in 25a2ba3

	useLayoutEffect(() => {
	addPortal(id, children);
	}, [id, children, addPortal]);

and PortalHost then renders those elements inside BottomSheetProvider's own tree:

react-native-bottom-sheet/src/BottomSheetProvider.tsx

Lines 31 to 35 in 25a2ba3

	return portals.map(([key, element]) => (
	<View key={key} style={StyleSheet.absoluteFill} pointerEvents="box-none">
	{element}
	</View>
	));

Since React resolves context at the position where an element is rendered rather than where the JSX is created, any provider sitting between BottomSheetProvider and ModalBottomSheet doesn't wrap the portal host, so its value never reaches the sheet's children. Providers above BottomSheetProvider do work, because PortalHost renders inside them.

Interestingly, the library already solves this correctly in one mode: with nativeOverlay, the sheet stays inline in the React tree (so context flows normally) and the native layer reparents the view into the overlay window the same technique react-native-teleport uses. So the default portal mode is currently the only mode that breaks context, which seems like a good argument for eventually moving the provider portal to native reparenting as well, rather than adopting another JS portal.

Beyond custom contexts, this also affects useNavigation() from React Navigation: with BottomSheetProvider at the app root, a sheet opened from a screen loses that screen's navigator context (related to #51).

Two workarounds that work today, in case they help anyone landing here:

1. Put providers above BottomSheetProvider when possible.
2. Capture the context value in the component that owns the sheet and re-provide it inside the sheet's children:

const SheetUser = () => {
  const value = useContext(Cx); // resolved here, in the original tree
    
  return (
    <ModalBottomSheet /* ... */>
      <Cx.Provider value={value}>
        <Inner />
      </Cx.Provider>
    </ModalBottomSheet>
  );
};

Updates propagate correctly with this pattern: a context change re-renders SheetUser, which re-registers fresh children with the portal.

In the meantime this seems worth a note on the modal-sheets docs page I can put together a small docs PR with these workarounds.