Use global state in useModalPortalRoot()

[maxilie]

The current useModalPortalRoot() hook uses local state, which means you can only use its offsets within the same component where the PortalHost was added, or else by prop drilling. To make the hook usable everywhere, this PR adds a hostName parameter to the hook and saves the offsets to a zustand store. This way, you can call the hook wherever you define your dropdowns, selects, etc. I also added a section to the portal docs to show its usage.

Breaking Changes

I tested the demo using this method, and I'm also using it in my own app & website. However, there's two files in the react-native-reusables repo that need to be updated. They each need a one-line update to pass the hostName to the hook, and that's it. The files are:

• apps/docs/src/content/docs/getting-started/common-patterns.mdx
• apps/showcase/app/modal.tsx

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rn-primitives	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 10, 2024 10:59am

[a-eid]

I am not sure why we need useModalPortalRoot hook, wouldn't wrapping the portal host in FullWindowOverlay make it work out of the box with ios modals ?

import { FullWindowOverlay } from "react-native-screens"

const WindowOverlay = Platform.OS === "ios" ? FullWindowOverlay : Fragment

<WindowOverlay>
   <PortalHost />
</WindowOverlay>

[mrzachnugent]

@a-eid Thanks for pointing that out!

@maxilie useModalPortalRoot was just deprecated so I will have to close this PR. Thanks for contributing!