react-native-root-siblings

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.

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) => );
}

// ...
function HomeScreen() {
  return Welcome!
}

setTimeout(showWelcomeModal, 3000);

Installation

npm i react-native-root-siblings

Insert RootSiblingParent between your providers and root app in your root render function.

import { RootSiblingParent } from 'react-native-root-siblings';

return (
  
      // 
  
);      

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.

    //  
        //  
        { /* View put in here would be transported to RootSiblingParent 
            * So it can have a same hierarchy as the RootView to cover any other views
            */}
          
          
        
      
    
  

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

let sibling = new RootSiblings();

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.

1. Update sibling element

sibling.update();

This will update the sibling instance to a View with blue backgroundColor and cover the screen by 10 offset distance.

1. Destroy sibling element

sibling.destroy();

This will remove the sibling element.

Component API

import { RootSiblingPortal } from 'react-native-root-siblings';

class extends Component {
    render() {
        return (
            
                
            
        )
    }
}

EXAMPLE

…