Enable dynamic sliding tabs

src/ExNavigationReducer.js

@@ -239,9 +239,13 @@ class ExNavigationReducer {
     const defaultRouteConfig = navigatorState.defaultRouteConfig;
 
     const newChildren = routes.map(child => {
-      const newChild = child.clone();
-      newChild.config = _.merge({}, defaultRouteConfig, child.config);
-      return newChild;
+      if (child.clone) {
+        const newChild = child.clone();
+        newChild.config = _.merge({}, defaultRouteConfig, child.config);
+        return newChild;
+      } else {
+        return child;
+      }
     });
 
     return {

src/sliding-tab/ExNavigationSlidingTab.js

@@ -55,6 +55,7 @@ type Props = {
   renderFooter?: (props: any) => ?React.Element<any>,
   renderLabel?: (routeParams: any) => ?React.Element<any>,
   getRenderLabel?: (props: any) => (routeParams: any) => ?React.Element<any>,
+  tabBarScrollEnabled?: boolean,
   style?: any,
   swipeEnabled?: boolean,
   tabBarStyle?: any,
@@ -87,6 +88,7 @@ class ExNavigationSlidingTab extends PureComponent<any, Props, State> {
     indicatorStyle: {},
     position: 'top',
     pressColor: 'rgba(0,0,0,0.2)',
+    tabBarScrollEnabled: false,
     tabStyle: {},
     renderBefore: () => null,
   };
@@ -119,12 +121,9 @@ class ExNavigationSlidingTab extends PureComponent<any, Props, State> {
   }
 
   componentWillMount() {
-    let tabItems = this._parseTabItems(this.props);
-
     this._registerNavigatorContext();
 
-    let routes = tabItems.map(({ id, title }) => ({ title, key: id }));
-    let routeKeys = routes.map(r => r.key);
+    const { routes, routeKeys } = this._parseRoutes(this._parseTabItems(this.props));
 
     this.props.navigation.dispatch(Actions.setCurrentNavigator(
       this.state.navigatorUID,
@@ -142,10 +141,16 @@ class ExNavigationSlidingTab extends PureComponent<any, Props, State> {
   }
 
   componentWillReceiveProps(nextProps) {
-    // TODO: Should make it possible to dynamically add children after initial render?
-    // if (nextProps.children && nextProps.children !== this.props.children) {
-    //   this._parseTabItems(nextProps);
-    // }
+    if (nextProps.children && nextProps.children !== this.props.children) {
+      const { routes, routeKeys } = this._parseRoutes(this._parseTabItems(nextProps));
+      const navigationState = nextProps.navigationState;
+      const currentTabKey = (navigationState && navigationState.routes[navigationState.index].key) || nextProps.initialTab;
+      nextProps.navigation.dispatch(Actions.immediatelyResetStack(
+        this.state.navigatorUID,
+        routes,
+        routeKeys.indexOf(currentTabKey),
+      ));
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -167,7 +172,6 @@ class ExNavigationSlidingTab extends PureComponent<any, Props, State> {
     }
   }
 
-
   render() {
     if (!this.props.children || !this.state.tabItems) {
       return null;
@@ -226,6 +230,7 @@ class ExNavigationSlidingTab extends PureComponent<any, Props, State> {
       tabStyle: this.props.tabStyle,
       labelStyle: this.props.labelStyle,
       renderLabel: renderLabelFn,
+      scrollEnabled: this.props.tabBarScrollEnabled,
       style: [{backgroundColor: this.props.barBackgroundColor}, this.props.tabBarStyle],
     };
 
@@ -283,6 +288,16 @@ class ExNavigationSlidingTab extends PureComponent<any, Props, State> {
     return tabItems;
   }
 
+  _parseRoutes(tabItems) {
+    const routeKeys = [];
+    const routes = tabItems.map(({ id, title }) => {
+      routeKeys.push(id);
+      return { title, key: id };
+    });
+
+    return { routes, routeKeys };
+  }
+
   _setActiveTab = (i) => {
     let tabItem = this.state.tabItems[i];
     let key = tabItem.id;