Lazy mouting and rendering of tabs when selected.Changes made to mount tabs only when clicked for first time and render only selected tabs

Author: code-smith

SceneComponent.js

@@ -0,0 +1,17 @@
+const React = require('react');
+const ReactNative = require('react-native');
+const {Component, } = React;
+const {View, StyleSheet, } = ReactNative;
+
+const StaticContainer = require('react-static-container');
+
+const SceneComponent = (Props) => {
+  const {selected, ...props, } = Props;
+  return <View {...props}>
+      <StaticContainer shouldUpdate={selected}>
+        {props.children}
+      </StaticContainer>
+  </View>;
+};
+
+module.exports = SceneComponent;

index.js

@@ -1,6 +1,7 @@
 const React = require('react');
 const {
   PropTypes,
+  Component,
 } = React;
 const ReactNative = require('react-native');
 const {
@@ -15,9 +16,11 @@ const {
 } = ReactNative;
 const TimerMixin = require('react-timer-mixin');
 
+const SceneComponent = require('./SceneComponent');
 const DefaultTabBar = require('./DefaultTabBar');
 const ScrollableTabBar = require('./ScrollableTabBar');
 
+
 const ScrollableTabView = React.createClass({
   mixins: [TimerMixin, ],
   statics: {
@@ -56,6 +59,7 @@ const ScrollableTabView = React.createClass({
       currentPage: this.props.initialPage,
       scrollValue: new Animated.Value(this.props.initialPage),
       containerWidth: Dimensions.get('window').width,
+      sceneKeys: this.updateSceneKeys(this.props.children, [], this.props.initialPage),
     };
   },
 
@@ -83,7 +87,12 @@ const ScrollableTabView = React.createClass({
       }
     }
 
-    this.setState({currentPage: pageNumber, });
+    if(this.props.children.length !== this.state.sceneKeys.length) {
+      let newKeys = this.updateSceneKeys(this.props.children, this.state.sceneKeys, pageNumber);
+      this.setState({currentPage: pageNumber, sceneKeys: newKeys, });
+    }else{
+      this.setState({currentPage: pageNumber, });
+    }
   },
 
   renderTabBar(props) {
@@ -96,8 +105,26 @@ const ScrollableTabView = React.createClass({
     }
   },
 
+  updateSceneKeys(children, sceneKeys = [], currentPage) {
+    let newKeys = [];
+    children.forEach((child, idx) => {
+      let key = this._makeSceneKey(child, idx);
+      if(this._keyExists(sceneKeys, key) || currentPage === idx) newKeys.push(key);
+    });
+    return newKeys;
+  },
+
+  _keyExists(sceneKeys, key) {
+    return sceneKeys.find((sceneKey) => key === sceneKey);
+  },
+
+  _makeSceneKey(child, idx) {
+    return child.props.tabLabel + '_' + idx;
+  },
+
   renderScrollableContent() {
     if (Platform.OS === 'ios') {
+      const scenes = this._composeScenes();
       return (
         <ScrollView
           horizontal
@@ -133,16 +160,11 @@ const ScrollableTabView = React.createClass({
           alwaysBounceVertical={false}
           keyboardDismissMode="on-drag"
           {...this.props.contentProps}>
-          {this._children().map((child, idx) => {
-            return <View
-              key={child.key}
-              style={{width: this.state.containerWidth, }}>
-              {child}
-            </View>;
-          })}
+            {scenes}
         </ScrollView>
       );
     } else {
+      const scenes = this._composeScenes();
       return (
         <ViewPagerAndroid
          key={this._children().length}
@@ -157,26 +179,43 @@ const ScrollableTabView = React.createClass({
          }}
          ref={(scrollView) => { this.scrollView = scrollView; }}
          {...this.props.contentProps}>
-         {this._children().map((child, idx) => {
-           return <View
-             key={child.key}
-             style={{width: this.state.containerWidth, }}>
-             {child}
-           </View>;
-         })}
+           {scenes}
         </ViewPagerAndroid>
       );
     }
   },
 
+  _composeScenes() {
+    return this._children().map((child, idx) => {
+      let key = this._makeSceneKey(child, idx);
+      return (
+        <SceneComponent
+          key={child.key}
+          selected={(this.state.currentPage === idx)}
+          style={{width: this.state.containerWidth, }}
+        >
+        {this._keyExists(this.state.sceneKeys, key) ? child : <View tabLabel={child.props.tabLabel}/>}
+        </SceneComponent>
+      );
+    });
+  },
+
   _updateSelectedPage(currentPage) {
     let localCurrentPage = currentPage;
     if (typeof localCurrentPage === 'object') {
       localCurrentPage = currentPage.nativeEvent.position;
     }
-    this.setState({currentPage: localCurrentPage, }, () => {
-      this.props.onChangeTab({ i: localCurrentPage, ref: this._children()[localCurrentPage], });
-    });
+    // scenekeys length and children length is same then no need to update the keys as all are stored by now
+    if(this.props.children.length !== this.state.sceneKeys.length) {
+      let newKeys = this.updateSceneKeys(this.props.children, this.state.sceneKeys, localCurrentPage);
+      this.setState({currentPage: localCurrentPage, sceneKeys: newKeys, }, () => {
+        this.props.onChangeTab({ i: localCurrentPage, ref: this._children()[localCurrentPage], });
+      });
+    }else{
+      this.setState({currentPage: localCurrentPage, }, () => {
+        this.props.onChangeTab({ i: localCurrentPage, ref: this._children()[localCurrentPage], });
+      });
+    }
   },
 
   _updateScrollValue(value) {

package.json

@@ -28,6 +28,7 @@
   },
   "homepage": "https://github.com/brentvatne/react-native-scrollable-tab-view#readme",
   "dependencies": {
+    "react-static-container": "^1.0.1",
     "react-timer-mixin": "^0.13.3"
   }
 }