@ohos-ports/react-native-root-siblings 5.0.1-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) [2015-2016] [Horcrux]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,249 @@
+## react-native-root-siblings [![npm version](https://badge.fury.io/js/react-native-root-siblings.svg)](http://badge.fury.io/js/react-native-root-siblings)
+
+The easiest way to create overlays(`Modal`, `Popover`, `Dialog` etc) for both `react` and `react-native`. 
+
+Make your own `showModal` and use it in any component without any `isShow` state or even in a pure function call.
+
+```jsx
+import { ReactNode } from 'react';
+import RootSiblingsManager from 'react-native-root-siblings';
+
+export const showModal = (renderModal) => {
+  let rootNode;
+  const onClose = () => {
+    rootNode?.destroy();
+    rootNode = null;
+  };
+  rootNode = new RootSiblingsManager(renderModal(onClose));
+  return onClose;
+};
+
+import WelcomeModal from './WelcomeModal';
+
+export function showWelcomeModal() {
+  showModal((onClose) => <WelcomeModal onClose={onClose} />);
+}
+
+// ...
+function HomeScreen() {
+  return <Button onClick={showWelcomeModal}>Welcome!</Button>
+}
+
+setTimeout(showWelcomeModal, 3000);
+```
+
+---
+
+
+## Installation
+
+```sh
+npm i react-native-root-siblings
+```
+
+Insert `RootSiblingParent` between your providers and root app in your root render function.
+
+```jsx
+import { RootSiblingParent } from 'react-native-root-siblings';
+
+return (
+  <SomeProviders>
+    <RootSiblingParent>  // <- use RootSiblingParent to wrap your root component
+      <App />
+    </RootSiblingParent>
+  </SomeProviders>
+);      
+```
+
+`RootSiblingParent` works as a mounting base and can be mounted multiple times. Only the last mounted one would be active.
+
+In react native, a view has a higher hierarchy if it's more close to the root level.
+
+```jsx
+<RootSiblingParent>
+  <RootView>  //  <- the highest view
+    <NavigationView>
+      <ScreenView>  //  <- the lowest view
+       { /* what if you want to show a fullscreen modal here?
+          * usually you have to use a Native Modal which is even higher than RootView
+          * but it's buggy and has a lot of limitations
+          */}
+        <RootSiblingPortal>
+        { /* View put in here would be transported to RootSiblingParent 
+            * So it can have a same hierarchy as the RootView to cover any other views
+            */}
+          <View>
+          </View>
+        </RootSiblingPortal>
+      </ScreenView>
+    </NavigationView>
+  </View>
+</RootSiblingParent>
+```
+
+In react we have `createPortal` but still it's not so convenient as it can not be used outside of a component. 
+
+`react-native-root-siblings` provides the most possible flexibility:
+
+
+
+## Usage
+
+### Imperative API
+
+1. Create sibling element
+
+```jsx
+let sibling = new RootSiblings(<View
+    style={{top: 0,right: 0,bottom: 0,left: 0,backgroundColor: 'red'}}
+/>);
+```
+
+This will create a View element cover all of your app elements,
+and returns a sibling instance.
+You can create a sibling anywhere, no matter in a component, hook or even a pure function.
+
+2. Update sibling element
+
+```jsx
+sibling.update(<View
+    style={{top: 10,right: 10,bottom: 10,left: 10,backgroundColor: 'blue'}}
+/>);
+```
+
+This will update the sibling instance to a View with blue backgroundColor and cover the screen by `10` offset distance.
+
+3. Destroy sibling element
+
+```js
+sibling.destroy();
+```
+
+This will remove the sibling element.
+
+
+### Component API
+
+```jsx
+import { RootSiblingPortal } from 'react-native-root-siblings';
+
+
+class extends Component {
+    render() {
+        return (
+            <RootSiblingPortal>
+                <View style={[StyleSheet.absoluteFill, { backgroundColor: 'rgba(0, 0, 0, 0.25)' }]} />
+            </RootSiblingPortal>
+        )
+    }
+}
+
+```
+
+## EXAMPLE
+
+```jsx
+import React, {
+    AppRegistry,
+    View,
+    Component,
+    TouchableHighlight,
+    StyleSheet,
+    Text
+} from 'react-native';
+import Dimensions from 'Dimensions';
+
+// Import library there,it will wrap everything registered by AppRegistry.registerComponent
+// And add or remove other elements after the root component
+import RootSiblings from 'react-native-root-siblings';
+
+var id = 0;
+var elements = [];
+class SiblingsExample extends Component{
+    addSibling = () => {
+        let sibling = new RootSiblings(<View
+            style={[styles.sibling, {top: id * 20}]}
+        >
+            <Text>I`m No.{id}</Text>
+        </View>);
+        id++;
+        elements.push(sibling);
+    };
+
+    destroySibling = () => {
+        let lastSibling = elements.pop();
+        lastSibling && lastSibling.destroy();
+    };
+
+    updateSibling = () => {
+        let lastId = elements.length - 1;
+        lastId >= 0 && elements[lastId].update(<View
+            style={[styles.sibling, {top: lastId * 20}]}
+        >
+            <Text>I`m No.{lastId} : {Math.random()}</Text>
+        </View>);
+    };
+
+    render() {
+        return <View style={styles.container}>
+            <TouchableHighlight
+                style={styles.button}
+                onPress={this.addSibling}
+            >
+                <Text style={styles.buttonText}>Add element</Text>
+            </TouchableHighlight>
+            <TouchableHighlight
+                style={styles.button}
+                onPress={this.destroySibling}
+            >
+                <Text style={styles.buttonText}>Destroy element</Text>
+            </TouchableHighlight>
+            <TouchableHighlight
+                style={styles.button}
+                onPress={this.updateSibling}
+            >
+                <Text style={styles.buttonText}>Update element</Text>
+            </TouchableHighlight>
+        </View>;
+    }
+}
+
+AppRegistry.registerComponent('SiblingsExample', () => SiblingsExample);
+
+var styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'green',
+    },
+    button: {
+        borderRadius: 4,
+        padding: 10,
+        marginLeft: 10,
+        marginRight: 10,
+        backgroundColor: '#ccc',
+        borderColor: '#333',
+        borderWidth: 1,
+    },
+    buttonText: {
+        color: '#000'
+    },
+    sibling: {
+        left: 0,
+        height: 20,
+        width: Dimensions.get('window').width / 2,
+        backgroundColor: 'blue',
+        opacity: 0.5
+    }
+});
+
+```
+
+![screen shoot](./Examples/screen-shoot.gif)
+
+## RUN EXAMPLE
+
+1. fork this repository
+2. change dictionary to `Examples`
+3. run `npm i`

package/lib/ChildrenWrapper.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export default function ChildrenWrapper(props: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/ChildrenWrapper.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export default function ChildrenWrapper(props) {
+    return _jsx(_Fragment, { children: props.children });
+}
+//# sourceMappingURL=ChildrenWrapper.js.map

package/lib/ChildrenWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChildrenWrapper.js","sourceRoot":"","sources":["../src/ChildrenWrapper.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAA+B;IACrE,OAAO,4BAAG,KAAK,CAAC,QAAQ,GAAI,CAAC;AAC/B,CAAC"}

package/lib/RootController.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export declare enum RootControllerChanges {
+    Insert = 0,
+    Update = 1,
+    Remove = 2
+}
+export interface RootControllerAction {
+    change: RootControllerChanges;
+    element: ReactNode;
+    updateCallback?: () => void;
+}
+export default class RootController {
+    private siblings;
+    private pendingActions;
+    private callback;
+    update(id: string, element: ReactNode, callback?: () => void): void;
+    destroy(id: string, callback?: () => void): void;
+    setCallback(callback: (id: string, action: RootControllerAction) => void): void;
+    private emit;
+}

package/lib/RootController.js

@@ -0,0 +1,61 @@
+export var RootControllerChanges;
+(function (RootControllerChanges) {
+    RootControllerChanges[RootControllerChanges["Insert"] = 0] = "Insert";
+    RootControllerChanges[RootControllerChanges["Update"] = 1] = "Update";
+    RootControllerChanges[RootControllerChanges["Remove"] = 2] = "Remove";
+})(RootControllerChanges || (RootControllerChanges = {}));
+export default class RootController {
+    constructor() {
+        this.siblings = new Set();
+        this.pendingActions = [];
+        this.callback = null;
+    }
+    update(id, element, callback) {
+        if (!this.siblings.has(id)) {
+            this.emit(id, {
+                change: RootControllerChanges.Insert,
+                element,
+                updateCallback: callback
+            });
+            this.siblings.add(id);
+        }
+        else {
+            this.emit(id, {
+                change: RootControllerChanges.Update,
+                element,
+                updateCallback: callback
+            });
+        }
+    }
+    destroy(id, callback) {
+        if (this.siblings.has(id)) {
+            this.emit(id, {
+                change: RootControllerChanges.Remove,
+                element: null,
+                updateCallback: callback
+            });
+            this.siblings.delete(id);
+        }
+        else if (callback) {
+            callback();
+        }
+    }
+    setCallback(callback) {
+        this.callback = callback;
+        this.pendingActions.forEach(({ id, action }) => {
+            callback(id, action);
+        });
+    }
+    emit(id, action) {
+        if (this.callback) {
+            this.callback(id, action);
+        }
+        else {
+            this.pendingActions.push({
+                action,
+                id
+            });
+        }
+    }
+}
+//# sourceMappingURL=RootController.js.map

package/lib/RootController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RootController.js","sourceRoot":"","sources":["../src/RootController.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC/B,qEAAM,CAAA;IACN,qEAAM,CAAA;IACN,qEAAM,CAAA;AACR,CAAC,EAJW,qBAAqB,KAArB,qBAAqB,QAIhC;AAQD,MAAM,CAAC,OAAO,OAAO,cAAc;IAAnC;QACU,aAAQ,GAAgB,IAAI,GAAG,EAAE,CAAC;QAClC,mBAAc,GAGjB,EAAE,CAAC;QACA,aAAQ,GAEL,IAAI,CAAC;IAmDlB,CAAC;IAjDQ,MAAM,CAAC,EAAU,EAAE,OAAkB,EAAE,QAAqB;QACjE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;YAC1B,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;gBACZ,MAAM,EAAE,qBAAqB,CAAC,MAAM;gBACpC,OAAO;gBACP,cAAc,EAAE,QAAQ;aACzB,CAAC,CAAC;YACH,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;SACvB;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;gBACZ,MAAM,EAAE,qBAAqB,CAAC,MAAM;gBACpC,OAAO;gBACP,cAAc,EAAE,QAAQ;aACzB,CAAC,CAAC;SACJ;IACH,CAAC;IAEM,OAAO,CAAC,EAAU,EAAE,QAAqB;QAC9C,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;gBACZ,MAAM,EAAE,qBAAqB,CAAC,MAAM;gBACpC,OAAO,EAAE,IAAI;gBACb,cAAc,EAAE,QAAQ;aACzB,CAAC,CAAC;YACH,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;SAC1B;aAAM,IAAI,QAAQ,EAAE;YACnB,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC;IAEM,WAAW,CAChB,QAA4D;QAE5D,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;YAC7C,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,IAAI,CAAC,EAAU,EAAE,MAA4B;QACnD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;SAC3B;aAAM;YACL,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACvB,MAAM;gBACN,EAAE;aACH,CAAC,CAAC;SACJ;IACH,CAAC;CACF"}

package/lib/RootSiblings.d.ts

@@ -0,0 +1,26 @@
+import { Component, ReactNode } from 'react';
+import RootController from './RootController';
+interface RootSiblingsProps {
+    controller: RootController;
+    renderSibling?: (sibling: ReactNode) => ReactNode;
+    children?: ReactNode;
+}
+interface RootSiblingsState {
+    siblings: Array<{
+        id: string;
+        element: ReactNode;
+    }>;
+}
+export default class extends Component<RootSiblingsProps, RootSiblingsState> {
+    private updatedSiblings;
+    private siblingsPool;
+    constructor(props: RootSiblingsProps);
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private commitChange;
+    private invokeCallback;
+    private renderSiblings;
+    private wrapSibling;
+}
+export {};

package/lib/RootSiblings.js

@@ -0,0 +1,85 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+import StaticContainer from './StaticContainer.js';
+import { RootControllerChanges } from './RootController.js';
+export default class extends Component {
+    constructor(props) {
+        super(props);
+        this.updatedSiblings = new Set();
+        this.siblingsPool = [];
+        this.state = {
+            siblings: []
+        };
+    }
+    componentDidMount() {
+        this.props.controller.setCallback((id, change) => {
+            setTimeout(() => this.commitChange(id, change));
+        });
+    }
+    componentDidUpdate() {
+        this.updatedSiblings.clear();
+    }
+    render() {
+        return (_jsxs(_Fragment, { children: [this.props.children, this.renderSiblings()] }));
+    }
+    commitChange(id, { change, element, updateCallback }) {
+        const siblings = Array.from(this.siblingsPool);
+        const index = siblings.findIndex(sibling => sibling.id === id);
+        if (change === RootControllerChanges.Remove) {
+            if (index > -1) {
+                siblings.splice(index, 1);
+            }
+            else {
+                this.invokeCallback(updateCallback);
+                return;
+            }
+        }
+        else if (change === RootControllerChanges.Update) {
+            if (index > -1) {
+                siblings.splice(index, 1, {
+                    element,
+                    id
+                });
+                this.updatedSiblings.add(id);
+            }
+            else {
+                this.invokeCallback(updateCallback);
+                return;
+            }
+        }
+        else {
+            if (index > -1) {
+                siblings.splice(index, 1);
+            }
+            siblings.push({
+                element,
+                id
+            });
+            this.updatedSiblings.add(id);
+        }
+        this.siblingsPool = siblings;
+        this.setState({
+            siblings
+        }, () => this.invokeCallback(updateCallback));
+    }
+    invokeCallback(callback) {
+        if (callback) {
+            callback();
+        }
+    }
+    renderSiblings() {
+        return this.state.siblings.map(({ id, element }) => {
+            return (_jsx(StaticContainer, { shouldUpdate: this.updatedSiblings.has(id), children: this.wrapSibling(element) }, `root-sibling-${id}`));
+        });
+    }
+    wrapSibling(element) {
+        const { renderSibling } = this.props;
+        if (renderSibling) {
+            return renderSibling(element);
+        }
+        else {
+            return element;
+        }
+    }
+}
+//# sourceMappingURL=RootSiblings.js.map

package/lib/RootSiblings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RootSiblings.js","sourceRoot":"","sources":["../src/RootSiblings.tsx"],"names":[],"mappings":"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"}

package/lib/RootSiblingsManager.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export declare function setSiblingWrapper(wrapper: (sibling: ReactNode) => ReactNode): void;
+export default class RootSiblingsManager {
+    private id;
+    private manager;
+    constructor(element: ReactNode, callback?: () => void);
+    update(element: ReactNode, callback?: () => void): void;
+    destroy(callback?: () => void): void;
+}
+export declare function RootSiblingParent(props: {
+    children: ReactNode;
+    inactive?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RootSiblingPortal(props: {
+    children: ReactNode;
+}): null;

package/lib/RootSiblingsManager.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import ChildrenWrapper from './ChildrenWrapper.js';
+import wrapRootComponent from './wrapRootComponent.js';
+let siblingWrapper = sibling => sibling;
+function renderSibling(sibling) {
+    return siblingWrapper(sibling);
+}
+export function setSiblingWrapper(wrapper) {
+    siblingWrapper = wrapper;
+}
+const { manager: defaultManager } = wrapRootComponent(ChildrenWrapper, renderSibling);
+let uuid = 0;
+const managerStack = [defaultManager];
+const inactiveManagers = new Set();
+function getActiveManager() {
+    for (let i = managerStack.length - 1; i >= 0; i--) {
+        const manager = managerStack[i];
+        if (!inactiveManagers.has(manager)) {
+            return manager;
+        }
+    }
+    return defaultManager;
+}
+export default class RootSiblingsManager {
+    constructor(element, callback) {
+        this.id = `root-sibling-${uuid + 1}`;
+        this.manager = getActiveManager();
+        this.manager.update(this.id, element, callback);
+        uuid++;
+    }
+    update(element, callback) {
+        this.manager.update(this.id, element, callback);
+    }
+    destroy(callback) {
+        this.manager.destroy(this.id, callback);
+    }
+}
+export function RootSiblingParent(props) {
+    const { inactive } = props;
+    const [sibling] = useState(() => {
+        const { Root: parentRoot, manager: parentManager } = wrapRootComponent(ChildrenWrapper, renderSibling);
+        managerStack.push(parentManager);
+        if (inactive) {
+            inactiveManagers.add(parentManager);
+        }
+        return {
+            Root: parentRoot,
+            manager: parentManager
+        };
+    });
+    useEffect(() => {
+        return () => {
+            if (sibling) {
+                const index = managerStack.indexOf(sibling.manager);
+                if (index > 0) {
+                    managerStack.splice(index, 1);
+                }
+            }
+        };
+    }, [sibling]);
+    if (inactive && sibling && !inactiveManagers.has(sibling.manager)) {
+        inactiveManagers.add(sibling.manager);
+    }
+    else if (!inactive && sibling && inactiveManagers.has(sibling.manager)) {
+        inactiveManagers.delete(sibling.manager);
+    }
+    const Parent = sibling.Root;
+    return _jsx(Parent, { children: props.children });
+}
+export function RootSiblingPortal(props) {
+    const [sibling] = useState(() => new RootSiblingsManager(null));
+    sibling.update(props.children);
+    useEffect(() => {
+        if (sibling) {
+            return () => sibling.destroy();
+        }
+    }, [sibling]);
+    return null;
+}
+//# sourceMappingURL=RootSiblingsManager.js.map

package/lib/RootSiblingsManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RootSiblingsManager.js","sourceRoot":"","sources":["../src/RootSiblingsManager.tsx"],"names":[],"mappings":"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"}

package/lib/StaticContainer.d.ts

@@ -0,0 +1,10 @@
+import { Component, ReactNode } from 'react';
+interface Props {
+    shouldUpdate: boolean;
+    children: ReactNode;
+}
+export default class extends Component<Props> {
+    shouldComponentUpdate(nextProps: Props): boolean;
+    render(): string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined;
+}
+export {};

package/lib/StaticContainer.js

@@ -0,0 +1,11 @@
+import { Component, Children } from 'react';
+export default class extends Component {
+    shouldComponentUpdate(nextProps) {
+        return nextProps.shouldUpdate;
+    }
+    render() {
+        const child = this.props.children;
+        return child === null || child === false ? null : Children.only(child);
+    }
+}
+//# sourceMappingURL=StaticContainer.js.map

package/lib/StaticContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticContainer.js","sourceRoot":"","sources":["../src/StaticContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAMvD,MAAM,CAAC,OAAO,MAAO,SAAQ,SAAgB;IAC3C,qBAAqB,CAAC,SAAgB;QACpC,OAAO,SAAS,CAAC,YAAY,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAClC,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzE,CAAC;CACF"}

package/lib/wrapRootComponent.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType, PropsWithChildren, ReactNode } from 'react';
+export interface RootSiblingManager {
+    update(id: string, element: ReactNode, callback?: () => void): void;
+    destroy(id: string, callback?: () => void): void;
+}
+export default function wrapRootComponent<T extends PropsWithChildren>(Root: ComponentType<T>, renderSibling?: (sibling: ReactNode) => ReactNode): {
+    Root: ComponentType<T>;
+    manager: RootSiblingManager;
+};

package/lib/wrapRootComponent.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import RootController from './RootController.js';
+import RootSiblings from './RootSiblings.js';
+export default function wrapRootComponent(Root, renderSibling) {
+    const controller = new RootController();
+    return {
+        Root: (props) => {
+            return (_jsx(RootSiblings, { controller: controller, renderSibling: renderSibling, children: _jsx(Root, Object.assign({}, props)) }));
+        },
+        manager: {
+            update(id, element, callback) {
+                controller.update(id, element, callback);
+            },
+            destroy(id, callback) {
+                controller.destroy(id, callback);
+            }
+        }
+    };
+}
+//# sourceMappingURL=wrapRootComponent.js.map

package/lib/wrapRootComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapRootComponent.js","sourceRoot":"","sources":["../src/wrapRootComponent.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAO1C,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,IAAsB,EACtB,aAAiD;IAKjD,MAAM,UAAU,GAAG,IAAI,cAAc,EAAE,CAAC;IAExC,OAAO;QACL,IAAI,EAAE,CAAC,KAAQ,EAAE,EAAE;YACjB,OAAO,CACL,KAAC,YAAY,IAAC,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,YAChE,KAAC,IAAI,oBAAK,KAAK,EAAI,GACN,CAChB,CAAC;QACJ,CAAC;QACD,OAAO,EAAE;YACP,MAAM,CAAC,EAAU,EAAE,OAAkB,EAAE,QAAqB;gBAC1D,UAAU,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;YAC3C,CAAC;YACD,OAAO,CAAC,EAAU,EAAE,QAAqB;gBACvC,UAAU,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;YACnC,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "version": "5.0.1-beta.0",
+  "name": "@ohos-ports/react-native-root-siblings",
+  "type": "module",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.60.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-native": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ohos-ports/ohos-ports.git",
+    "directory": "ports/react-native-root-siblings/5.0.1"
+  },
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
+  "main": "./lib/RootSiblingsManager.js",
+  "description": "react native root sibling elements manager",
+  "scripts": {
+    "lint": "npx tsc --noEmit && npx eslint \"./src/**/*.@(ts|tsx)\" --fix",
+    "test": "echo no tests",
+    "build": "npx tsc"
+  },
+  "lint-staged": {
+    "./src/**/*.{ts,tsx}": [
+      "npm run lint",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-native": "^4.1.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2"
+  },
+  "keywords": [
+    "react-component",
+    "react-native",
+    "modal",
+    "ios",
+    "android"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "bugs": {
+    "url": "https://github.com/ohos-ports/ohos-ports/issues"
+  }
+}