init project

Author: Horcrux

.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -1,47 +1,2 @@
-# Windows image file caches
-Thumbs.db
-ehthumbs.db
-
-# Folder config file
-Desktop.ini
-
-# Recycle Bin used on file shares
-$RECYCLE.BIN/
-
-# Windows Installer files
-*.cab
-*.msi
-*.msm
-*.msp
-
-# Windows shortcuts
-*.lnk
-
-# =========================
-# Operating System Files
-# =========================
-
-# OSX
-# =========================
-
-.DS_Store
-.AppleDouble
-.LSOverride
-
-# Thumbnails
-._*
-
-# Files that might appear in the root of a volume
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
-
-# Directories potentially created on remote AFP share
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
+/node_modules
+.idea/

README.md

@@ -0,0 +1,115 @@
+### react-native-root-siblings
+---
+
+Add sibling elements to your app root
+
+
+### Add it to your project
+
+1. Run `npm install react-native-root-siblings --save`
+2. Import library **before** `AppRegistry.registerComponent`
+
+```javascript
+...do something there
+**import 'react-native-root-siblings';**
+...do something else
+
+*AppRegistry.registerComponent('MyApp', () => MyApp);*
+
+```
+
+### USAGE
+
+```
+'use strict';
+import React, {
+    AppRegistry,
+    View,
+    View,
+    Component,
+    TouchableHighlight,
+    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(<View
+            style={[styles.sibling, {top: id * 20}]}
+        >
+            <Text>I`m No.{id}</Text>
+        </View>);
+        id++;
+        elements.push(sibling);
+    };
+
+    destroySibling = () {
+        let lastSibling = elements.pop();
+        lastSibling.destroy();
+    };
+
+    updateSibling = () {
+
+    };
+
+    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'
+    }
+});
+
+```
+

index.js

@@ -0,0 +1,2 @@
+import RootDecorators from './lib/RootSiblings';
+export default RootDecorators;

lib/RootSiblings.js

@@ -0,0 +1,71 @@
+import React, {
+    StyleSheet,
+    Component,
+    View,
+    AppRegistry,
+    StaticContainer
+} from 'react-native';
+
+import _ from 'lodash';
+import SiblingsManager from './SiblingsManager';
+import SiblingContainer from './SiblingContainer';
+
+let styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        position: 'relative'
+    }
+});
+
+// inject modals into app entry component
+let originRegister = AppRegistry.registerComponent;
+AppRegistry.registerComponent = function (appKey, getComponentFunc) {
+    return originRegister(appKey, () => {
+        let Origin = getComponentFunc();
+        return React.createClass({
+            displayName: `Root(${appKey})`,
+            getInitialState() {
+                return {
+                    siblings: {}
+                };
+            },
+
+            componentWillMount() {
+                SiblingsManager.addListener('set', this.onSet);
+                SiblingsManager.addListener('update', (props, prevProps, id) =>
+                    this.onSet(props, id)
+                );
+                SiblingsManager.addListener('destroy', this.onDestroy);
+            },
+
+            onSet(element, id) {
+                this.state.siblings[id] = element;
+                this.forceUpdate();
+            },
+
+            onDestroy(destroyed, id) {
+                delete this.state.siblings[id];
+                this.forceUpdate();
+            },
+
+            getSiblings() {
+                return _.map(this.state.siblings, (sibling, id) => <SiblingContainer
+                    key={`sibling-${id}`}
+                >
+                    {sibling}
+                </SiblingContainer>);
+            },
+
+            render() {
+                return <View style={styles.container}>
+                    <StaticContainer shouldUpdate={false}>
+                        <Origin {...this.props} />
+                    </StaticContainer>
+                    {this.getSiblings()}
+                </View>;
+            }
+        });
+    });
+};
+
+export default SiblingsManager;

lib/SiblingContainer.js

@@ -0,0 +1,32 @@
+import React, {
+    StyleSheet,
+    Component,
+    View,
+    cloneElement
+} from 'react-native';
+
+import onlyChild from 'onlyChild';
+
+let styles = StyleSheet.create({
+    offStream: {
+        position: 'absolute'
+    }
+});
+
+class SiblingContainer extends Component {
+    static displayName = 'SiblingContainer';
+
+    static propTypes = {
+        ...View.propTypes
+    };
+
+    shouldComponentUpdate = () => false;
+
+    render() {
+        return cloneElement(onlyChild(this.props.children), {
+            style: [this.props.children.props.style, styles.offStream]
+        });
+    }
+}
+
+export default SiblingContainer;

lib/SiblingsManager.js

@@ -0,0 +1,59 @@
+import callbacks from 'jquery-callbacks';
+let decorators = {};
+let decoratorUid = 0;
+let setCallbacks = callbacks();
+let updateCallbacks = callbacks();
+let destroyCallbacks = callbacks();
+
+class SiblingsManager {
+    constructor(element) {
+        decoratorUid++;
+        decorators[decoratorUid] = element;
+        this.id = decoratorUid;
+        setCallbacks.fire(element, decoratorUid);
+    }
+
+    static addListener = (event, cb) => {
+        switch (event) {
+            case 'set':
+                setCallbacks.add(cb);
+                break;
+            case 'update':
+                updateCallbacks.add(cb);
+                break;
+            case 'destroy':
+                destroyCallbacks.add(cb);
+                break;
+            default:
+                console.warn(`SiblingsManager.addListener: Unexpected event \`${event}\`.\nEvent must be one of the ['set','update','destroy']`);
+        }
+    };
+
+    static removeListener = (event, cb) => {
+        switch (event) {
+            case 'set':
+                setCallbacks.remove(cb);
+                break;
+            case 'update':
+                updateCallbacks.remove(cb);
+                break;
+            case 'destroy':
+                destroyCallbacks.remove(cb);
+                break;
+            default:
+                console.warn(`SiblingsManager.removeListener: Unexpected event \`${event}\`.\nEvent must be one of the ['set','update','destroy']`);
+        }
+    };
+
+    update = element => {
+        updateCallbacks.fire(element, decorators[this.id], this.id);
+        decorators[this.id] = element;
+    };
+
+    destroy = () => {
+        destroyCallbacks.fire(decorators[this.id], this.id);
+        delete decorators[this.id];
+    };
+}
+
+export default SiblingsManager;

package.json

@@ -0,0 +1,19 @@
+{
+    "name": "react-native-root-siblings",
+    "repository": {
+        "type": "git",
+        "url": "git@github.com:magicismight/react-native-root-siblings.git"
+    },
+    "version": "1.0.0",
+    "main": "./index.js",
+    "description": "react native root sibling elements manager",
+    "dependencies": {
+        "jquery-callbacks": "^0.0.1"
+    },
+    "keywords": [
+        "react-component",
+        "react-native",
+        "ios",
+        "android"
+    ]
+}