Need help with react-native-root-siblings?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

magicismight
555 Stars 132 Forks MIT License 113 Commits 10 Opened issues

Description

A sibling elements manager.

Services available

!
?

Need anything else?

Contributors list

# 8,930
React N...
Objecti...
C++
ionic
27 commits
# 35,713
Java
Objecti...
React N...
sso-log...
26 commits
# 582
Objecti...
Swift
React N...
google-...
1 commit
# 1,825
JavaScr...
TypeScr...
wechat-...
wechat
1 commit
# 84,375
Objecti...
cocoapo...
React N...
React
1 commit
# 444
TypeScr...
ESLint
React
html-we...
1 commit

react-native-root-siblings npm version


Version 4.x requires react-native version >= 0.59, 3.x requires react-native version >= 0.47

Add sibling elements after your app root element. The created sibling elements are above the rest of your app elements. This can be used to create a

Modal
component or something should be over your app.

BREAKING CHANGE

For react native >= 0.62

The new LogBox component would impact this component's initialization. To make it work we have to explicitly insert a mount point in your app like this:

// in your entry file like `App.js`
import { RootSiblingParent } from 'react-native-root-siblings';

// in your render function return ( // );

You can skip this step if your react-native is lower than 0.62. And actually you can inject RootSiblingParent into anywhere like a react portal, for example if you have multiple rootviews you can choose which one to hold the root siblings.

4.x

From 4.0 the redux store context injection is not enabled by default, the redux store context should be set by a context wrapper.

import { setSiblingWrapper } from 'react-native-root-siblings';
import { Provider } from 'react-redux';

// const store = ... get store;

// Call this before using redux context inside RootSiblings. setSiblingWrapper((sibling) => {sibling});

You can also use

setSiblingWrapper
to provide other context into each sibling node.

3.x

From 3.0 the default style has been removed from the element. https://github.com/magicismight/react-native-root-siblings/commit/75b1f65502f41a5ecad0d17fd8d6ebb400365928

Add it to your project

Run

npm install react-native-root-siblings --save

USAGE

This library can add element above the root app component registered by

AppRegistry.registerComponent
.

Class 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 inside your react native code.

  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

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 &gt;= 0 &amp;&amp; elements[lastId].update(<view style="{[styles.sibling," lastid>
        <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

RUN EXAMPLE

  1. fork this repository
  2. change dictionary to
    Examples
  3. run
    npm i

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.