@oxyhq/bloom 1.6.0 → 1.8.0

package/lib/typescript/module/teleport/reducer.d.ts

@@ -0,0 +1,40 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/state/reducer.ts`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: nothing — byte-for-byte, only its path.
+ */
+import type { ScrollViewContextValue } from "./scroll-view-context/types";
+export type PortalState = {
+    removed: Record<string, Record<string, Record<string, boolean>>>;
+    hosts: Record<string, number>;
+    hostScrollViewContexts: Record<string, ScrollViewContextValue | undefined>;
+};
+export type Action = {
+    type: "REMOVE_PORTAL";
+    hostName: string;
+    name: string;
+} | {
+    type: "CLEAR_REMOVED_ON_UNMOUNT";
+    hostName: string;
+    name: string;
+    instanceId: string;
+} | {
+    type: "REGISTER_PORTAL";
+    hostName: string;
+    name: string;
+    instanceId: string;
+} | {
+    type: "REGISTER_HOST";
+    hostName: string;
+} | {
+    type: "UNREGISTER_HOST";
+    hostName: string;
+} | {
+    type: "SET_HOST_SCROLL_VIEW_CONTEXT";
+    hostName: string;
+    value: ScrollViewContextValue;
+};
+export declare const initialState: PortalState;
+export declare const reducer: (state: PortalState, action: Action) => PortalState;
+//# sourceMappingURL=reducer.d.ts.map

package/lib/typescript/module/teleport/reducer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../../../src/teleport/reducer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAE1E,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,GAAG,SAAS,CAAC,CAAC;CAC5E,CAAC;AAEF,MAAM,MAAM,MAAM,GACd;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACzD;IACE,IAAI,EAAE,0BAA0B,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,iBAAiB,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACpB,GACD;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAC3C;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAC7C;IACE,IAAI,EAAE,8BAA8B,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,sBAAsB,CAAC;CAC/B,CAAC;AAEN,eAAO,MAAM,YAAY,EAAE,WAI1B,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,OAAO,WAAW,EAAE,QAAQ,MAAM,KAAG,WAmD5D,CAAC"}

package/lib/typescript/module/teleport/scroll-view-context/context.d.ts

@@ -0,0 +1,4 @@
+import type { ScrollViewContextValue } from "./types";
+declare const ScrollViewContext: import("react").Context<ScrollViewContextValue>;
+export default ScrollViewContext;
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/module/teleport/scroll-view-context/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/teleport/scroll-view-context/context.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,QAAA,MAAM,iBAAiB,iDAA8C,CAAC;AAEtE,eAAe,iBAAiB,CAAC"}

package/lib/typescript/module/teleport/scroll-view-context/context.native.d.ts

@@ -0,0 +1,13 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/contexts/ScrollViewContext/index.native.ts`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: import paths, and `ScrollView.Context` is reached through a cast
+ * because Bloom does not compile with their `react-native-strict-api` condition,
+ * which is the only place that property is declared.
+ */
+import type { Context } from "react";
+import type { ScrollViewContextValue } from "./types";
+declare const ScrollViewContext: Context<ScrollViewContextValue>;
+export default ScrollViewContext;
+//# sourceMappingURL=context.native.d.ts.map

package/lib/typescript/module/teleport/scroll-view-context/context.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.native.d.ts","sourceRoot":"","sources":["../../../../../src/teleport/scroll-view-context/context.native.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAKtD,QAAA,MAAM,iBAAiB,iCACb,CAAC;AAEX,eAAe,iBAAiB,CAAC"}

package/lib/typescript/module/teleport/scroll-view-context/types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/contexts/ScrollViewContext/types.ts`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: nothing — byte-for-byte, only its path.
+ */
+export type ScrollViewContextValue = {
+    horizontal: boolean;
+} | null;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/teleport/scroll-view-context/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/teleport/scroll-view-context/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAAC"}

package/lib/typescript/module/teleport/specs/PortalHostViewNativeComponent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/specs/PortalHostViewNativeComponent.ts`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: nothing — byte-for-byte, only its path.
+ */
+import { type ViewProps } from "react-native";
+interface NativeProps extends ViewProps {
+    name?: string;
+}
+declare const _default: import("react-native").HostComponent<NativeProps>;
+export default _default;
+//# sourceMappingURL=PortalHostViewNativeComponent.d.ts.map

package/lib/typescript/module/teleport/specs/PortalHostViewNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalHostViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../../src/teleport/specs/PortalHostViewNativeComponent.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtE,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;;AAED,wBAEG"}

package/lib/typescript/module/teleport/specs/PortalViewNativeComponent.d.ts

@@ -0,0 +1,14 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/specs/PortalViewNativeComponent.ts`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: nothing — byte-for-byte, only its path.
+ */
+import { type ViewProps } from "react-native";
+interface NativeProps extends ViewProps {
+    name?: string;
+    hostName?: string;
+}
+declare const _default: import("react-native").HostComponent<NativeProps>;
+export default _default;
+//# sourceMappingURL=PortalViewNativeComponent.d.ts.map

package/lib/typescript/module/teleport/specs/PortalViewNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../../src/teleport/specs/PortalViewNativeComponent.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtE,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;;AAED,wBAEG"}

package/lib/typescript/module/teleport/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/types/index.ts`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: nothing — byte-for-byte, only its path.
+ */
+import type { StyleProp, ViewStyle } from "react-native";
+export type PortalProviderProps = {
+    children: React.ReactNode;
+};
+export type PortalHostProps = {
+    name: string;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+};
+export type PortalProps = {
+    name?: string;
+    hostName?: string;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/teleport/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/teleport/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AACF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC"}

package/lib/typescript/module/teleport/use-id.d.ts

@@ -0,0 +1,2 @@
+export default function useId(prefix?: string): string;
+//# sourceMappingURL=use-id.d.ts.map

package/lib/typescript/module/teleport/use-id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-id.d.ts","sourceRoot":"","sources":["../../../../src/teleport/use-id.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,MAAM,SAAQ,GAAG,MAAM,CAOpD"}

package/lib/typescript/module/teleport/use-portal.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The `usePortal` hook allows you to manage portals in imperative way.
+ *
+ * @category hooks
+ * @param `hostName` - `name` of the `<PortalHost />` component
+ * @returns an object that helps to manipulate portals
+ * @example
+ * ```tsx
+ * import { usePortal } from "react-native-teleport";
+ * export default function App() {
+ *   const { removePortal, isHostAvailable } = usePortal("root");
+ *   return (
+ *     <View style={{ flex: 1 }}>
+ *       <Text>{isHostAvailable ? "Host is available" : "Host is not available"}</Text>
+ *       <Button title="Remove" onPress={() => removePortal("portal")} />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export default function usePortal(hostName?: string): {
+    /**
+     * Whether a `<PortalHost />` with the given `hostName` is currently mounted.
+     */
+    isHostAvailable: boolean;
+    /**
+     * Remove portal from host container. Subsequent re-renders will not restore portal,
+     * but if you mount a new portal with the same name it will be shown (i. e. hook doesn't
+     * prevent new portal from being added).
+     *
+     * @param name - `name` of `<Portal />` component.
+     */
+    removePortal: (name: string) => void;
+};
+//# sourceMappingURL=use-portal.d.ts.map

package/lib/typescript/module/teleport/use-portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-portal.d.ts","sourceRoot":"","sources":["../../../../src/teleport/use-portal.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,QAAQ,GAAE,MAAe;IAIvD;;OAEG;;IAEH;;;;;;OAMG;yBACkB,MAAM;EAG9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -624,6 +624,20 @@
         "default": "./lib/commonjs/media-flight/index.js"
       }
     },
+    "./teleport": {
+      "react-native": {
+        "types": "./lib/typescript/module/teleport/index.d.ts",
+        "default": "./src/teleport/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/teleport/index.d.ts",
+        "default": "./lib/module/teleport/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/teleport/index.d.ts",
+        "default": "./lib/commonjs/teleport/index.js"
+      }
+    },
     "./pressable-scale": {
       "react-native": {
         "types": "./lib/typescript/module/pressable-scale/index.d.ts",
@@ -1457,6 +1471,7 @@
     "./package.json": "./package.json"
   },
   "files": [
+    "NOTICE",
     "src",
     "lib",
     "docs/*.mdx",

package/src/media-flight/MediaFlightLayer.tsx

@@ -4,11 +4,10 @@
  * ## The problem it exists for
  *
  * A shared-element transition normally assumes the ORIGIN screen is still
- * mounted while the element travels — which is why `react-native-teleport` needs
- * `presentation: 'transparentModal'` and has no web story at all. Under
- * expo-router on web the origin route is UNMOUNTED the moment the URL changes,
- * so anything the origin was rendering (a `VideoView`, a decoded image) is gone
- * before the first frame of the transition.
+ * mounted while the element travels. Under expo-router on web the origin route
+ * is UNMOUNTED the moment the URL changes, so anything the origin was rendering
+ * (a `VideoView`, a decoded image) is gone before the first frame of the
+ * transition.
  *
  * The fix is to move the surface OUT of both screens for the duration of the
  * flight. `<MediaFlightLayer>` is mounted ONCE at the app root and renders

package/src/media-flight/media-node.web.ts

@@ -225,6 +225,47 @@ function pick(claims: readonly MediaNodeClaim[]): MediaNodeClaim | null {
   return best;
 }
 
+/**
+ * An element that can be MOVED rather than removed and re-inserted.
+ *
+ * `moveBefore` is newer than TypeScript's DOM library, so the capability is
+ * named here and checked at runtime rather than assumed.
+ */
+interface MovingParent {
+  moveBefore(node: Node, child: Node | null): void;
+}
+
+/**
+ * DERIVED FROM react-native-teleport 1.2.0 — `src/views/Portal/index.tsx`,
+ * its `moveElementTo`. MIT, Copyright (c) 2025 Kiryl Ziusko; see `NOTICE`.
+ *
+ * Changed: typed for TypeScript's DOM library, which does not know `moveBefore`
+ * yet, and reduced to the append case Bloom needs (no `before` sibling).
+ *
+ * Why it is worth taking rather than keeping `appendChild`: `appendChild` of an
+ * ATTACHED node is a remove followed by an insert, and the only reason media
+ * survives it is that HTML's removal steps await a stable state and abort if
+ * the node is back in a document by then. `moveBefore` does not run the removal
+ * steps at all — it is the state-preserving primitive, which matters for
+ * anything the abort does not cover: focus, `<iframe>`s, CSS animations.
+ *
+ * Measured for a playing `<video>` in Chrome 151: indistinguishable from
+ * `appendChild` (ct 0.60 -> 1.00, never paused, 6 frames, worst frame gap
+ * 100 ms — the clip's own cadence — under both), while a real removal pauses
+ * and freezes. So this is not a fix for a defect Bloom has; it is the correct
+ * primitive for the ones it does not have yet.
+ */
+function moveInto(parent: HTMLElement, child: HTMLElement): void {
+  if (supportsMoveBefore && child.parentNode !== null) {
+    (parent as unknown as MovingParent).moveBefore(child, null);
+    return;
+  }
+  parent.appendChild(child);
+}
+
+const supportsMoveBefore =
+  typeof Element !== 'undefined' && 'moveBefore' in Element.prototype;
+
 /**
  * Put the wrapper where its top claim says, in ONE synchronous move.
  *
@@ -237,7 +278,7 @@ function place(record: MediaNodeRecord): void {
   const target = topClaim(record)?.el ?? holder(reg);
   if (target === null) return;
   if (record.wrapper.parentElement === target) return;
-  target.appendChild(record.wrapper);
+  moveInto(target, record.wrapper);
 }
 
 function sameRender(a: MediaNodeRender, b: MediaNodeRender): boolean {

package/src/teleport/Portal.tsx

@@ -0,0 +1,97 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/components/Portal.tsx`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: import paths only, for this flat directory.
+ */
+import { useContext, useEffect } from "react";
+import { usePortalManagerContext } from "./portal-manager";
+import ScrollViewContext from "./scroll-view-context/context";
+import PortalView from "./PortalView";
+import useId from "./use-id";
+import type { PortalProps } from "./types";
+
+/**
+ * Portal helps you to render a component in a different place in the view hierarchy.
+ * This is useful when you need a view to visually “break out” of its parent container (for example: modals, toasts, floating UI, popovers).
+ *
+ * @category components
+ * @param hostName - The `name` of the `PortalHost`. It's used to identify the host where the content should be rendered.
+ * @param name - The name of the portal. It's used to identify the portal.
+ * @param children - The content that should be rendered in the portal.
+ * @example
+ * ```tsx
+ * import { useState } from "react";
+ * import { View, StyleSheet, Button } from "react-native";
+ * import { Portal } from "react-native-teleport";
+ * export default function InstantRootExample() {
+ *   const [shouldBeTeleported, setTeleported] = useState(true);
+ *   return (
+ *     <View style={styles.container}>
+ *       {shouldBeTeleported && (
+ *         <Portal hostName={"overlay"}>
+ *           <View style={styles.box} />
+ *         </Portal>
+ *       )}
+ *       <Button
+ *         title={shouldBeTeleported ? "Hide" : "Show"}
+ *         onPress={() => setTeleported((t) => !t)}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     alignItems: "center",
+ *     justifyContent: "center",
+ *   },
+ *   box: {
+ *     width: 160,
+ *     height: 160,
+ *     marginVertical: 20,
+ *     backgroundColor: "blue",
+ *   },
+ * });
+ * ```
+ */
+const PortalComponent = ({ hostName, name, style, children }: PortalProps) => {
+  const sourceScrollViewContext = useContext(ScrollViewContext);
+  const { state, dispatch } = usePortalManagerContext();
+  const instanceId = useId();
+
+  const scrollViewContext =
+    hostName && state.hosts[hostName]
+      ? (state.hostScrollViewContexts[hostName] ?? null)
+      : sourceScrollViewContext;
+
+  const isRemoved =
+    hostName && name ? state.removed[hostName]?.[name]?.[instanceId] : false;
+
+  useEffect(() => {
+    if (!hostName || !name) {
+      return;
+    }
+
+    dispatch({ type: "REGISTER_PORTAL", hostName, name, instanceId });
+
+    return () => {
+      dispatch({
+        type: "CLEAR_REMOVED_ON_UNMOUNT",
+        hostName,
+        name,
+        instanceId,
+      });
+    };
+  }, [dispatch, hostName, name, instanceId]);
+
+  return (
+    <ScrollViewContext.Provider value={scrollViewContext}>
+      <PortalView hostName={hostName} name={name} style={style}>
+        {isRemoved ? null : children}
+      </PortalView>
+    </ScrollViewContext.Provider>
+  );
+};
+
+export default PortalComponent;

package/src/teleport/PortalHost.tsx

@@ -0,0 +1,61 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/components/PortalHost.tsx`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: import paths only, for this flat directory.
+ */
+import { useContext, useEffect } from "react";
+import { usePortalManagerContext } from "./portal-manager";
+import ScrollViewContext from "./scroll-view-context/context";
+import type { PortalHostProps } from "./types";
+import PortalHost from "./PortalHostView";
+
+/**
+ * PortalHost is a component that acts as an anchor for the portals.
+ * You can define multiple portal hosts in your app and use them to render different portals.
+ * Each portal host has a unique name that you can use to identify a necessary one among the others.
+ *
+ * @category components
+ * @param name - The name of the portal host. It's used by `<Portal />` component to identify the host.
+ *
+ * @example
+ * ```tsx
+ * import { StyleSheet, View } from "react-native";
+ * import { PortalHost, PortalProvider } from "react-native-teleport";
+ * export default function App() {
+ *   return (
+ *     <PortalProvider>
+ *        <PortalHost style={StyleSheet.absoluteFillObject} name="overlay" />
+ *     </PortalProvider>
+ *   );
+ * }
+ * ```
+ */
+const PortalHostComponent = ({ name, children, style }: PortalHostProps) => {
+  const { dispatch } = usePortalManagerContext();
+  const scrollViewContext = useContext(ScrollViewContext);
+
+  useEffect(() => {
+    dispatch({ type: "REGISTER_HOST", hostName: name });
+
+    return () => {
+      dispatch({ type: "UNREGISTER_HOST", hostName: name });
+    };
+  }, [name, dispatch]);
+
+  useEffect(() => {
+    dispatch({
+      type: "SET_HOST_SCROLL_VIEW_CONTEXT",
+      hostName: name,
+      value: scrollViewContext,
+    });
+  }, [name, dispatch, scrollViewContext]);
+
+  return (
+    <PortalHost name={name} style={style}>
+      {children}
+    </PortalHost>
+  );
+};
+
+export default PortalHostComponent;

package/src/teleport/PortalHostView.native.tsx

@@ -0,0 +1,14 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/views/PortalHost/index.native.tsx`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: import paths only, for this flat directory.
+ */
+import PortalHostNativeComponent from "./specs/PortalHostViewNativeComponent";
+import type { PortalHostProps } from "./types";
+
+const PortalHost = (props: PortalHostProps) => {
+  return <PortalHostNativeComponent pointerEvents="box-none" {...props} />;
+};
+
+export default PortalHost;

package/src/teleport/PortalHostView.tsx

@@ -0,0 +1,30 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/views/PortalHost/index.tsx`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: import paths only, for this flat directory.
+ */
+import { memo, useEffect } from "react";
+import { usePortalRegistryContext } from "./portal-registry";
+import type { PortalHostProps } from "./types";
+
+function PortalHost({ name, children, style }: PortalHostProps) {
+  const { registerHost } = usePortalRegistryContext();
+
+  useEffect(() => {
+    return () => {
+      registerHost(name, null);
+    };
+  }, [name, registerHost]);
+
+  return (
+    <div
+      style={{ ...style, pointerEvents: "none" } as React.CSSProperties}
+      ref={(ref) => registerHost(name, ref)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default memo(PortalHost);

package/src/teleport/PortalProvider.tsx

@@ -0,0 +1,51 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/PortalProvider.tsx`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: import paths only, for this flat directory.
+ */
+import PortalHost from "./PortalHost";
+import NativePortalProvider from "./PortalProviderView";
+import { PortalManagerProvider } from "./portal-manager";
+
+type PortalProviderProps = {
+  children: React.ReactNode;
+};
+
+/**
+ * Wraps your app with this component to use the teleport API.
+ *
+ * This component provides a context/registry for all Portals so that you can use imperative API, such as `usePortal` hook to manage Portals.
+ *
+ * @category components
+ * @example
+ * ```tsx
+ * import { PortalProvider } from "react-native-teleport";
+ * export default function App() {
+ *   return (
+ *     <PortalProvider>
+ *       //* your main application code goes here
+ *     </PortalProvider>
+ *   );
+ * }
+ */
+export default function PortalProvider({ children }: PortalProviderProps) {
+  return (
+    <NativePortalProvider>
+      <PortalManagerProvider>
+        {children}
+        <PortalHost name="root" style={styles.root} />
+      </PortalManagerProvider>
+    </NativePortalProvider>
+  );
+}
+
+const styles = {
+  root: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+} as const;

package/src/teleport/PortalProviderView.native.tsx

@@ -0,0 +1,11 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/views/PortalProvider/index.native.tsx`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: nothing — byte-for-byte, only its path.
+ */
+import type { PortalProviderProps } from "./types";
+
+export default function PortalProvider({ children }: PortalProviderProps) {
+  return children;
+}

package/src/teleport/PortalProviderView.tsx

@@ -0,0 +1,67 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/views/PortalProvider/index.tsx`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: import paths only, for this flat directory.
+ */
+import { useCallback, useMemo, useRef } from "react";
+import { PortalRegistryContext } from "./portal-registry";
+import type { PortalProviderProps } from "./types";
+
+export default function PortalProvider({ children }: PortalProviderProps) {
+  const hostsRef = useRef<Map<string, HTMLElement>>(new Map());
+  const pendingPortalsRef = useRef<Map<string, Set<() => void>>>(new Map());
+
+  const registerHost = useCallback((name: string, node: HTMLElement | null) => {
+    if (node) {
+      hostsRef.current.set(name, node);
+    } else {
+      hostsRef.current.delete(name);
+    }
+
+    const callbacks = pendingPortalsRef.current.get(name);
+    if (callbacks) {
+      callbacks.forEach((callback) => callback());
+    }
+  }, []);
+  const getHost = useCallback(
+    (name: string) => hostsRef.current.get(name) ?? null,
+    [],
+  );
+  const registerPendingPortal = useCallback(
+    (name: string, callback: () => void) => {
+      const callbacks = pendingPortalsRef.current.get(name) ?? new Set();
+      callbacks.add(callback);
+      pendingPortalsRef.current.set(name, callbacks);
+    },
+    [],
+  );
+  const unregisterPendingPortal = useCallback(
+    (name: string, callback: () => void) => {
+      const callbacks = pendingPortalsRef.current.get(name);
+      if (callbacks) {
+        callbacks.delete(callback);
+        if (callbacks.size === 0) {
+          pendingPortalsRef.current.delete(name);
+        }
+      }
+    },
+    [],
+  );
+
+  const value = useMemo(
+    () => ({
+      registerHost,
+      getHost,
+      registerPendingPortal,
+      unregisterPendingPortal,
+    }),
+    [registerHost, getHost, registerPendingPortal, unregisterPendingPortal],
+  );
+
+  return (
+    <PortalRegistryContext.Provider value={value}>
+      {children}
+    </PortalRegistryContext.Provider>
+  );
+}

package/src/teleport/PortalView.native.tsx

@@ -0,0 +1,7 @@
+/**
+ * COPIED FROM react-native-teleport 1.2.0 — `src/views/Portal/index.native.tsx`
+ * MIT, Copyright (c) 2025 Kiryl Ziusko. Full licence in `NOTICE` at the root.
+ *
+ * Changed: import paths only, for this flat directory.
+ */
+export { default } from "./specs/PortalViewNativeComponent";