Skip to content

Commit a060b03

Browse files
committed
chore: add docs for PortalWhileClosingView
1 parent c7b2576 commit a060b03

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

package/src/components/UIComponents/PortalWhileClosingView.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,46 @@ import {
1212
} from '../../state-store';
1313

1414
type PortalWhileClosingViewProps = {
15+
/**
16+
* Content that should render in place normally and teleport to a closing portal host
17+
* while the message overlay is closing.
18+
*/
1519
children: ReactNode;
20+
/**
21+
* Name of the closing `PortalHost` in `MessageOverlayHostLayer`.
22+
* This key is also used in the closing layout registry.
23+
*/
1624
portalHostName: string;
25+
/**
26+
* Stable portal instance name used by `react-native-teleport` to move this content
27+
* between the in-place tree and the closing host.
28+
*/
1729
portalName: string;
1830
};
1931

32+
/**
33+
* Keeps wrapped UI above the message overlay during close animation by teleporting it to a closing portal host.
34+
*
35+
* Why this is needed:
36+
*
37+
* When the overlay closes, the animated message can visually pass over fixed UI (for example composer/header).
38+
* This wrapper moves that UI into the overlay host layer for the closing phase, so stacking stays correct.
39+
*
40+
* To use it, simply wrap any view that should remain on top while the overlay is closing, and pass a `portalHostName`
41+
* and a `portalName`. Registration within the host layer will happen automatically, as will calculating layout.
42+
*
43+
* Behavior:
44+
* - renders children in place during normal operation
45+
* - registers absolute layout for `portalHostName`
46+
* - while overlay state is `closing`, teleports children to the matching closing host
47+
* - renders a local placeholder while closing to preserve original layout space
48+
*
49+
* Host registration is done once per key; subsequent layout updates are pushed via shared values.
50+
*
51+
* @param props.children content to render and teleport while closing
52+
* @param props.portalHostName closing host slot name used for layout registration and portal target
53+
* @param props.portalName stable portal instance name for `react-native-teleport`
54+
*/
2055
export const PortalWhileClosingView = ({
2156
children,
2257
portalHostName,

0 commit comments

Comments
 (0)