Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/magicismight/react-native-root-siblings
A sibling elements manager.
https://github.com/magicismight/react-native-root-siblings
Last synced: about 7 hours ago
JSON representation
A sibling elements manager.
- Host: GitHub
- URL: https://github.com/magicismight/react-native-root-siblings
- Owner: magicismight
- License: mit
- Created: 2016-01-14T00:49:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-05-16T01:59:14.000Z (7 months ago)
- Last Synced: 2024-09-24T09:21:56.124Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.13 MB
- Stars: 696
- Watchers: 7
- Forks: 134
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-root-siblings ★452 - Add sibling elements after your app root element. (Components / UI)
- awesome-react-native - react-native-root-siblings ★452 - Add sibling elements after your app root element. (Components / UI)
- awesome-react-native - react-native-root-siblings - Add sibling elements after your app root element. This can be used to create a Modal component or something should be over your app.  (Utilities)
README
## react-native-root-siblings [](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 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
```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 (
// <- use RootSiblingParent to wrap your root component
);
```
`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
// <- the highest view
// <- 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
*/}
{ /* 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
```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.
### Component API
```jsx
import { RootSiblingPortal } from 'react-native-root-siblings';
class extends Component {
render() {
return (
)
}
}
```
## 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(
I`m No.{id}
);
id++;
elements.push(sibling);
};
destroySibling = () => {
let lastSibling = elements.pop();
lastSibling && lastSibling.destroy();
};
updateSibling = () => {
let lastId = elements.length - 1;
lastId >= 0 && elements[lastId].update(
I`m No.{lastId} : {Math.random()}
);
};
render() {
return
Add element
Destroy element
Update element
;
}
}
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
}
});
```
