add MODIFY_STACK

docs/API_CONFIGURATION.md

@@ -66,6 +66,16 @@ Actions.ROUTE_NAME({type: ActionConst.RESET});
 | ActionConst.REFRESH | `string` | 'REACT_NATIVE_ROUTER_FLUX_REFRESH' | 'refresh' |
 | ActionConst.RESET | `string` | 'REACT_NATIVE_ROUTER_FLUX_RESET' | 'reset' |
 | ActionConst.FOCUS | `string` | 'REACT_NATIVE_ROUTER_FLUX_FOCUS' | 'focus' |
+| ActionConst.MODIFY_STACK | `string` | 'REACT_NATIVE_ROUTER_FLUX_MODIFY_STACK' | 'modifyStack' |
+
+The modifyStack action is used to execute a sequence of commands that manipulate the hidden scenes in the stack without animation.
+
+| Property | Type | Value | Description |
+|-----------|--------|---------|-----------------------------------------|
+| ActionConst.ModifyStackTypes.REMOVE | `string` | 'REMOVE' | Remove a scene from the stack |
+| ActionConst.ModifyStackTypes.INSERT | `string` | 'INSERT' | Insert a scene into the stack |
+| ActionConst.ModifyStackTypes.JUMP | `string` | 'JUMP' | Jump between tab bars |
+
 
 ### ActionConst and Scene.type explaination
 

index.d.ts

@@ -294,6 +294,7 @@ declare namespace RNRF {
     REFRESH: string,
     RESET: string,
     FOCUS: string,
+    MODIFY_STACK: string,
   }
   export var ActionConst: RNRFActionConst;
 

src/ActionConst.js

@@ -10,3 +10,10 @@ export const REFRESH = 'REACT_NATIVE_ROUTER_FLUX_REFRESH';
 export const RESET = 'REACT_NATIVE_ROUTER_FLUX_RESET';
 export const FOCUS = 'REACT_NATIVE_ROUTER_FLUX_FOCUS';
 export const ANDROID_BACK = 'REACT_NATIVE_ROUTER_FLUX_ANDROID_BACK';
+export const MODIFY_STACK = 'REACT_NATIVE_ROUTER_FLUX_MODIFY_STACK';
+
+export const ModifyStackTypes = {
+  REMOVE: 'REMOVE',
+  INSERT: 'INSERT',
+  JUMP: 'JUMP',
+};

src/Actions.js

@@ -23,6 +23,7 @@ export const ActionMap = {
   focus: ActionConst.FOCUS,
   pushOrPop: ActionConst.PUSH_OR_POP,
   androidBack: ActionConst.ANDROID_BACK,
+  modify: ActionConst.MODIFY_STACK,
   [ActionConst.JUMP]: ActionConst.JUMP,
   [ActionConst.PUSH]: ActionConst.PUSH,
   [ActionConst.REPLACE]: ActionConst.REPLACE,
@@ -35,6 +36,7 @@ export const ActionMap = {
   [ActionConst.FOCUS]: ActionConst.FOCUS,
   [ActionConst.PUSH_OR_POP]: ActionConst.PUSH_OR_POP,
   [ActionConst.ANDROID_BACK]: ActionConst.ANDROID_BACK,
+  [ActionConst.MODIFY_STACK]: ActionConst.MODIFY_STACK,
 };
 
 function filterParam(data) {
@@ -71,6 +73,9 @@ class Actions {
     this.pop = this.pop.bind(this);
     this.refresh = this.refresh.bind(this);
     this.focus = this.focus.bind(this);
+    this.modifyStack = this.modifyStack.bind(this);
+    this.replaceInStack = this.replaceInStack.bind(this);
+    this.jumpInStack = this.jumpInStack.bind(this);
   }
 
   iterate(root: Scene, parentProps = {}, refsParam = {}, wrapBy) {
@@ -211,6 +216,24 @@ class Actions {
     return this.callback({ ...filterParam(props), type: ActionConst.ANDROID_BACK });
   }
 
+  modifyStack(commands, props = {}) {
+    return this.callback(
+      { ...filterParam({ ...props, commands }), type: ActionConst.MODIFY_STACK });
+  }
+
+  replaceInStack(sceneKey, withSceneKey, props = {}) {
+    return this.modifyStack([
+      { type: ActionConst.ModifyStackTypes.REMOVE, sceneKey },
+      { type: ActionConst.ModifyStackTypes.INSERT, sceneKey: withSceneKey },
+    ], props);
+  }
+
+  jumpInStack(sceneKey, props = {}) {
+    return this.modifyStack(
+      [{ sceneKey, type: ActionConst.ModifyStackTypes.JUMP }],
+      { key: sceneKey, ...props });
+  }
+
   create(scene:Scene, wrapBy = x => x) {
     assert(scene, 'root scene should be defined');
     const refs = {};

src/NavBar.js

@@ -480,6 +480,7 @@ class NavBar extends React.Component {
     const renderTitle = selected.renderTitle ||
       selected.component.renderTitle ||
       this.props.renderTitle;
+    const getNavBarContainer = this.props.getNavBarContainer || state.getNavBarContainer;
     const navigationBarBackgroundImage = this.props.navigationBarBackgroundImage ||
       state.navigationBarBackgroundImage;
     const contents = (
@@ -498,11 +499,10 @@ class NavBar extends React.Component {
           selected.navigationBarStyle,
         ]}
       >
-        {navigationBarBackgroundImage ? (
-          <Image source={navigationBarBackgroundImage}>
-            {contents}
-          </Image>
-        ) : contents}
+        {getNavBarContainer ? getNavBarContainer(contents)
+          : navigationBarBackgroundImage ? <Image source={navigationBarBackgroundImage}>contents</Image>
+          : contents
+        }
       </Animated.View>
     );
   }

src/Reducer.js

@@ -71,7 +71,10 @@ function inject(state, action, props, scenes) {
           break;
         }
       }
-      return changed ? { ...state, children: res, index: changedIndex } : state;
+      if (changed) {
+        return ActionMap[action.type] === ActionConst.MODIFY_STACK ?
+          { ...state, children: res } : { ...state, children: res, index: changedIndex };
+      }
     }
     return state;
   }
@@ -229,10 +232,6 @@ function inject(state, action, props, scenes) {
       return { ...state, index: ind };
     }
     case ActionConst.REPLACE:
-      if (state.children[state.index].sceneKey === action.key) {
-        return state;
-      }
-
       state.children[state.children.length - 1] = getInitialState(
         props,
         scenes,
@@ -255,6 +254,63 @@ function inject(state, action, props, scenes) {
         from: null,
         children: state.children,
       };
+    case ActionConst.MODIFY_STACK: {
+      const newChildren = [...state.children];
+      let removedIndex = null;
+
+      assert(props.commands, 'Modify stack commands is undefined.');
+
+      let jumpIndex = null;
+      props.commands.forEach(command => {
+        const findIndex = sceneKey => {
+          return newChildren.findIndex(c => c.sceneKey === sceneKey);
+        };
+        switch (command.type) {
+          case ActionConst.ModifyStackTypes.REMOVE:
+            assert(command.sceneKey || command.index >= 0,
+              `sceneKey or index has to be defined - ${command}`);
+            removedIndex = command.sceneKey ? findIndex(command.sceneKey) : command.index;
+            assert(removedIndex < newChildren.length - 1,
+              `You are not allowed to remove current scene - ${command}`);
+            if (removedIndex >= 0) {
+              newChildren.splice(removedIndex, 1);
+              newChildren[removedIndex].duration = 0;
+            }
+            break;
+
+          case ActionConst.ModifyStackTypes.INSERT:
+            const index =
+              command.beforeSceneKey ? findIndex(command.beforeSceneKey) : command.index;
+            assert((index || 0) < newChildren.length,
+              `You are not allowed change current scene - ${command}`);
+            const sceneState = getInitialState(scenes[command.sceneKey], scenes);
+            newChildren.splice(index || removedIndex || 0, 0, sceneState);
+            break;
+
+          case ActionConst.ModifyStackTypes.JUMP:
+            const tabPage = findElement(state, command.sceneKey);
+            assert(tabPage,
+              `The tab page sceneKey: ${command.sceneKey} ` +
+              `could not be found in the stack - ${command}`);
+            const tabBarPage = findElement(state, tabPage.parent);
+            assert(state === tabBarPage,
+              `The tab page Parent=${tabPage.parent} could not be found in the stack - ${command}`);
+            assert(tabBarPage.tabs,
+              `The tab page Parent=${tabPage.parent} is not tab bar, jump action is not valid`);
+            jumpIndex = tabBarPage.children.findIndex(c => c === tabPage);
+            break;
+
+          default:
+            assert(false, `Unknown modify stack command type ${command.type} - ${command}.`);
+        }
+      });
+      return {
+        ...state,
+        index: jumpIndex !== null ? jumpIndex : newChildren.length - 1,
+        from: null,
+        children: newChildren,
+      };
+    }
     default:
       return state;
   }
@@ -337,7 +393,9 @@ function reducer({ initialState, scenes }) {
           ActionMap[action.type] === ActionConst.ANDROID_BACK ||
           ActionMap[action.type] === ActionConst.POP_AND_REPLACE ||
           ActionMap[action.type] === ActionConst.REFRESH ||
-          ActionMap[action.type] === ActionConst.POP_TO) {
+          ActionMap[action.type] === ActionConst.POP_TO ||
+          ActionMap[action.type] === ActionConst.MODIFY_STACK
+      ) {
         if (!action.key && !action.parent) {
           action = { ...getCurrent(state), ...action };
         }
@@ -380,7 +438,9 @@ function reducer({ initialState, scenes }) {
       if (ActionMap[action.type] === ActionConst.BACK_ACTION ||
           ActionMap[action.type] === ActionConst.BACK ||
           ActionMap[action.type] === ActionConst.ANDROID_BACK ||
-          ActionMap[action.type] === ActionConst.POP_AND_REPLACE) {
+          ActionMap[action.type] === ActionConst.POP_AND_REPLACE ||
+          ActionMap[action.type] === ActionConst.MODIFY_STACK
+      ) {
         const parent = action.parent || state.scenes[action.key].parent;
         let el = findElement(state, parent, action.type);
         while (el.parent && (el.children.length <= 1 || el.tabs)) {
@@ -403,6 +463,7 @@ function reducer({ initialState, scenes }) {
       case ActionConst.REPLACE:
       case ActionConst.RESET:
       case ActionConst.ANDROID_BACK:
+      case ActionConst.MODIFY_STACK:
         return update(state, action);
 
       default: