clone option on Scene to dynamically push to current parent

Author: joenoon

Example/Example.js

@@ -7,6 +7,7 @@ import {Scene, Reducer, Router, Switch, TabBar, Modal, Schema, Actions} from 're
 import Error from './components/Error'
 import Home from './components/Home'
 import TabView from './components/TabView'
+import EchoView from './components/EchoView'
 
 class TabIcon extends React.Component {
     render(){
@@ -47,6 +48,7 @@ export default class Example extends React.Component {
         return <Router createReducer={reducerCreate} sceneStyle={{backgroundColor:'#F7F7F7'}}>
             <Scene key="modal" component={Modal} >
                 <Scene key="root" hideNavBar={true}>
+                    <Scene key="echo" clone component={EchoView} />
                     <Scene key="register" component={Register} title="Register"/>
                     <Scene key="register2" component={Register} title="Register2" duration={1}/>
                     <Scene key="home" component={Home} title="Replace" type="replace"/>

Example/components/EchoView.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react-native');
+var {View, Text, StyleSheet} = React;
+var Button = require('react-native-button');
+var Actions = require('react-native-router-flux').Actions;
+
+
+class EchoView extends React.Component {
+    render(){
+        return (
+            <View style={[styles.container, this.props.sceneStyle]}>
+                <Text style={styles.instructions}>key: {this.props.navigationState.key}</Text>
+                <Text style={styles.instructions}>sceneKey: {this.props.navigationState.sceneKey}</Text>
+                <Button onPress={Actions.echo}>push new scene</Button>
+                <Button onPress={Actions.pop}>pop</Button>
+            </View>
+        );
+    }
+}
+
+var styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+    instructions: {
+        textAlign: 'center',
+        color: '#333333',
+        marginBottom: 5,
+    },
+});
+
+module.exports = EchoView;

Example/components/TabView.js

@@ -23,6 +23,7 @@ class TabView extends React.Component {
                 <Button onPress={Actions.tab3}>Switch to tab3</Button>
                 <Button onPress={Actions.tab4}>Switch to tab4</Button>
                 <Button onPress={Actions.tab5}>Switch to tab5</Button>
+                <Button onPress={Actions.echo}>push new scene</Button>
             </View>
         );
     }
@@ -47,4 +48,4 @@ var styles = StyleSheet.create({
     },
 });
 
-module.exports = TabView;
+module.exports = TabView;

Example/package.json

@@ -9,7 +9,7 @@
     "react-native": "^0.22.0",
     "react-native-button": "^1.2.1",
     "react": "^0.14.7",
-    "react-native-router-flux": "^3.2.0",
+    "react-native-router-flux": "file:../",
     "react-native-modalbox": "^1.3.0"
   }
 }

README.md

@@ -118,6 +118,7 @@ class App extends React.Component {
 | renderRightButton | Closure | | optional closure to render the right title / buttons element |
 | rightButtonStyle | View style | | optional style override for the container of right title / buttons |
 | rightButtonTextStyle | Text style | | optional style override for the right title element |
+| clone | bool | | Scenes marked with `clone` will be treated as templates and cloned into the current scene's parent when pushed. See example. |
 | other props | | | all properties that will be passed to your component instance |
 
 ## Example

src/Reducer.js

@@ -97,6 +97,8 @@ function update(state,action){
     return inject(state, action, props, state.scenes);
 }
 
+var _uniqPush = 0;
+
 function reducer({initialState, scenes}){
     assert(initialState, "initialState should not be null");
     assert(initialState.key, "initialState.key should not be null");
@@ -108,7 +110,17 @@ function reducer({initialState, scenes}){
         assert(state.scenes, "state.scenes is missed");
 
         if (action.key){
-            assert(state.scenes[action.key], "missed route data for key="+action.key);
+            let scene = state.scenes[action.key];
+            assert(scene, "missed route data for key="+action.key);
+
+            // clone scene
+            if (action.type === PUSH_ACTION && scene.clone) {
+                let uniqKey = `${_uniqPush++}$${scene.key}`;
+                let clone = {...scene, key: uniqKey, sceneKey: uniqKey, parent: getCurrent(state).parent};
+                state.scenes[uniqKey] = clone;
+                action.key = uniqKey;
+            }
+
         } else {
             // set current route for pop action or refresh action
             if (action.type === POP_ACTION || action.type === POP_ACTION2 || action.type === REFRESH_ACTION){
@@ -125,7 +137,13 @@ function reducer({initialState, scenes}){
                     assert(el, "Cannot find element for parent=" + el.parent + " within current state");
                 }
                 action.parent = el.sceneKey;
-             }
+            }
+
+            // remove if clone
+            if (action.clone && action.sceneKey && (action.type === POP_ACTION || action.type === POP_ACTION2)) {
+                delete state.scenes[action.sceneKey];
+            }
+
         }
         switch (action.type) {
             case POP_ACTION2: