added new switch feature - unmountScenes

docs/OTHER_INFO.md

@@ -20,12 +20,17 @@ Every tab has its own navigation bar. However, if you do not set its parent `<Sc
 Your scene `component` class could implement _static_ renderNavigationBar(props) method that could return different navbar depending from component props
 
 ## Switch (new feature)
-New feature for 3.x release is custom scene renderer that should be used together with tabs={true} property. It allows to select `tab` scene to show depending from app state.
+New feature for 3.x release is custom scene renderer that should be used together with tabs={true} property. It allows to select `tab` scene to show depending from app state. Add the prop "unmountScenes" to your switch scene if the tabs should be unmounted when switched.
 It could be useful for authentication, restricted scenes, etc. Usually you should wrap `Switch` with redux `connect` to pass application state to it:
 Following example chooses scene depending from sessionID using Redux:
 ```jsx
-<Scene key="root" component={connect(state=>({profile:state.profile}))(Switch)} tabs={true}
-       selector={props=>props.profile.sessionID ? "main" : "signUp"}>
+<Scene
+    key="root"
+    component={connect(state=>({profile:state.profile}))(Switch)}
+    tabs={true}
+    unmountScenes
+    selector={props=>props.profile.sessionID ? "main" : "signUp"}
+    >
     <Scene key="signUp" component={SignUp}/>
     <Scene key="main" component={Main}>
 </Scene>

src/Switch.js

@@ -32,11 +32,20 @@ export default function Switch(props) {
     });
     if (index === -1) console.error(`A scene for key “${selectedKey}” does not exist.`);
   }
-  const navigationState = index !== navState.index ? { ...navState, index } : navState;
+  let navigationState = index !== navState.index ? { ...navState, index } : navState;
+
+  if (props.unmountScenes) {
+    navigationState = {
+      ...navigationState,
+      children: [navState.children[navigationState.index]],
+      index: 0,
+    };
+  }
   return (
     <TabBar
       onNavigate={props.onNavigate}
       navigationState={navigationState}
+      unmountScenes={props.unmountScenes}
     />
   );
 }
@@ -46,4 +55,5 @@ Switch.propTypes = {
   onNavigate: PropTypes.func,
   selector: PropTypes.func,
   statem: PropTypes.any,
+  unmountScenes: PropTypes.bool,
 };

src/TabBar.js

@@ -12,6 +12,7 @@ class TabBar extends Component {
     navigationState: PropTypes.object,
     tabIcon: PropTypes.any,
     onNavigate: PropTypes.func,
+    unmountScenes: PropTypes.bool,
   };
 
   constructor(props, context) {
@@ -45,7 +46,9 @@ class TabBar extends Component {
   render() {
     const state = this.props.navigationState;
 
-    const hideTabBar = deepestExplicitValueForKey(state, 'hideTabBar');
+    const hideTabBar = this.props.unmountScenes
+      ? true
+      : deepestExplicitValueForKey(state, 'hideTabBar');
 
     return (
       <View