{"_id":"23mofang-react-native-root-siblings","_rev":"2-1ec36396a70b6b4a13e02195bc2e33b6","name":"23mofang-react-native-root-siblings","description":"react native root sibling elements manager","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"version":"1.0.1","name":"23mofang-react-native-root-siblings","repository":{"type":"git","url":"git+ssh://git@github.com/23mf/react-native-root-siblings.git"},"license":"MIT","main":"./lib/SiblingsManager","description":"react native root sibling elements manager","dependencies":{"static-container":"^1.0.0"},"keywords":["react-component","react-native","ios","android"],"bugs":{"url":"https://github.com/23mf/react-native-root-siblings/issues"},"homepage":"https://github.com/23mf/react-native-root-siblings#readme","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","gitHead":"c68b1a8fb4a2634f21494f8004a9c94707ba1b35","_id":"23mofang-react-native-root-siblings@1.0.1","_shasum":"e50b94a6ef4eea5390b42b47715c8c6e1a45b047","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.2","_npmUser":{"name":"23mf","email":"1008@23mofang.com"},"dist":{"shasum":"e50b94a6ef4eea5390b42b47715c8c6e1a45b047","tarball":"https://registry.npmjs.org/23mofang-react-native-root-siblings/-/23mofang-react-native-root-siblings-1.0.1.tgz","integrity":"sha512-FPzQT6chSjOW2wHvpWr+zahCXq1h0obBgE+9ib+kVjjo/3uQVjiO4ITzXCE6EI0rSAFbzQAWWgm3WcYXWZ7D2w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXx+LZM3wouDrbzSN6RTSmIW6Ev1BF/d0zpTA9GoenLAIgNOVHjm7lYUP4oIy/6uPAnHs7JDGgjoxydfSIAOzWJEc="}]},"maintainers":[{"name":"23mf","email":"1008@23mofang.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/23mofang-react-native-root-siblings-1.0.1.tgz_1511159923418_0.979147772770375"}}},"readme":"### react-native-root-siblings\n---\n\nAdd sibling elements after your app root element.\nThe created sibling elements are above the rest of your app elements.\nThis can be used to create a `Modal` component or something should be over your app.\n\n### Add it to your project\n\nRun `npm install react-native-root-siblings --save`\n\n### USAGE\nThis library can add element above the root app component registered by `AppRegistry.registerComponent`.\n\n1. Create sibling element\n```\nlet sibling = new RootSiblings(<View\n    style={{top: 0,right: 0,bottom: 0,left: 0,backgroundColor: 'red'}}\n/>);\n```\nThis will create a View element cover all of your app elements,\nand returns a sibling instance.\nYou can create a sibling anywhere inside your react native code.\n\n2. Update sibling element\n```\nsibling.update(<View\n    style={{top: 10,right: 10,bottom: 10,left: 10,backgroundColor: 'blue'}}\n/>);\n```\nThis will update the sibling instance to a View with blue backgroundColor and cover the screen by `10` offset distance.\n\n3. Destroy sibling element\n```\nsibling.destroy();\n```\nThis will remove the sibling element.\n\n### EXAMPLE\n\n```\n'use strict';\nimport React, {\n    AppRegistry,\n    View,\n    Component,\n    TouchableHighlight,\n    StyleSheet,\n    Text\n} from 'react-native';\nimport Dimensions from 'Dimensions';\n\n// Import library there,it will wrap everything registered by AppRegistry.registerComponent\n// And add or remove other elements after the root component\nimport RootSiblings from 'react-native-root-siblings';\n\nvar id = 0;\nvar elements = [];\nclass SiblingsExample extends Component{\n    addSibling = () => {\n        let sibling = new RootSiblings(<View\n            style={[styles.sibling, {top: id * 20}]}\n        >\n            <Text>I`m No.{id}</Text>\n        </View>);\n        id++;\n        elements.push(sibling);\n    };\n\n    destroySibling = () => {\n        let lastSibling = elements.pop();\n        lastSibling && lastSibling.destroy();\n    };\n\n    updateSibling = () => {\n        let lastId = elements.length - 1;\n        lastId >= 0 && elements[lastId].update(<View\n            style={[styles.sibling, {top: lastId * 20}]}\n        >\n            <Text>I`m No.{lastId} : {Math.random()}</Text>\n        </View>);\n    };\n\n    render() {\n        return <View style={styles.container}>\n            <TouchableHighlight\n                style={styles.button}\n                onPress={this.addSibling}\n            >\n                <Text style={styles.buttonText}>Add element</Text>\n            </TouchableHighlight>\n            <TouchableHighlight\n                style={styles.button}\n                onPress={this.destroySibling}\n            >\n                <Text style={styles.buttonText}>Destroy element</Text>\n            </TouchableHighlight>\n            <TouchableHighlight\n                style={styles.button}\n                onPress={this.updateSibling}\n            >\n                <Text style={styles.buttonText}>Update element</Text>\n            </TouchableHighlight>\n        </View>;\n    }\n}\n\nAppRegistry.registerComponent('SiblingsExample', () => SiblingsExample);\n\nvar styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: 'green',\n    },\n    button: {\n        borderRadius: 4,\n        padding: 10,\n        marginLeft: 10,\n        marginRight: 10,\n        backgroundColor: '#ccc',\n        borderColor: '#333',\n        borderWidth: 1,\n    },\n    buttonText: {\n        color: '#000'\n    },\n    sibling: {\n        left: 0,\n        height: 20,\n        width: Dimensions.get('window').width / 2,\n        backgroundColor: 'blue',\n        opacity: 0.5\n    }\n});\n\n```\n\n![screen shoot](./Examples/screen-shoot.gif)\n\n### RUN EXAMPLE\n\n1. fork this repository\n2. change dictionary to `Examples`\n3. run `npm i`\n\n### MODIFY\n\nimport EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter'\nto\nimport EventEmitter from 'react-native/Libraries/EventEmitter/EventEmitter‘\n","maintainers":[{"name":"23mf","email":"1008@23mofang.com"}],"time":{"modified":"2022-06-12T14:06:42.281Z","created":"2017-11-20T06:38:43.528Z","1.0.1":"2017-11-20T06:38:43.528Z"},"homepage":"https://github.com/23mf/react-native-root-siblings#readme","keywords":["react-component","react-native","ios","android"],"repository":{"type":"git","url":"git+ssh://git@github.com/23mf/react-native-root-siblings.git"},"bugs":{"url":"https://github.com/23mf/react-native-root-siblings/issues"},"license":"MIT","readmeFilename":"README.md"}