react native root sibling elements manager
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) =>
}
// ...
function HomeScreen() {
return
}
setTimeout(showWelcomeModal, 3000);
`
---
`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 (
);
`
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`
{ /* 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
*/}
{ /* 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:
1. Create sibling element
`jsx`
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.
2. Update sibling element
`jsx`
sibling.update(
/>);
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.
`jsx
import { RootSiblingPortal } from 'react-native-root-siblings';
class extends Component {
render() {
return (
)
}
}
`
`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(
>
);
id++;
elements.push(sibling);
};
destroySibling = () => {
let lastSibling = elements.pop();
lastSibling && lastSibling.destroy();
};
updateSibling = () => {
let lastId = elements.length - 1;
lastId >= 0 && elements[lastId].update(
>
m No.{lastId} : {Math.random()}
);
};
render() {
return
onPress={this.addSibling}
>
onPress={this.destroySibling}
>
onPress={this.updateSibling}
>
}
}
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
}
});
`
1. fork this repository
2. change dictionary to Examples
3. run