A change in tabs can produce display issues.

ScrollableTabBar.js

@@ -187,6 +187,13 @@ const ScrollableTabBar = React.createClass({
     </View>;
   },
 
+  componentWillReceiveProps(nextProps) {
+    // If the tabs change, force the width of the tabs container to be recalculated
+    if (JSON.stringify(this.props.tabs) != JSON.stringify(nextProps.tabs) && this.state._containerWidth) {
+      this.setState({ _containerWidth: null, });
+    }
+  },
+
   onTabContainerLayout(e) {
     this._tabContainerMeasurements = e.nativeEvent.layout;
     let width = this._tabContainerMeasurements.width;

examples/FacebookTabsExample/ChangingScrollableTabsExample.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  Text,
+  View,
+  TouchableHighlight,
+} from 'react-native';
+
+import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
+
+export default React.createClass({
+  getInitialState() {
+    return {
+        tabs: [ 'short', 'list' ],
+    };
+  },
+
+  render() {
+    return (
+        <ScrollableTabView
+            renderTabBar = { () => <ScrollableTabBar /> }
+        >
+            {
+                this.state.tabs.map(
+                    (tab,index) =>
+                    (
+                        <View
+                            tabLabel = { tab }
+                            key = {index}
+                        >
+                            <TouchableHighlight
+                                onPress = { () => this.setState({ tabs: [ 'short', 'list' ]})}
+                            >
+                                <Text> { 'short' } </Text>
+                            </TouchableHighlight>
+                            <TouchableHighlight
+                                onPress = { () => this.setState({ tabs: [ 'long', 'list', 'with', 'very', 'many long tabs forcing', 'it to', 'scroll', 'and even longer' ]})}
+                            >
+                                <Text> { 'long' } </Text>
+                            </TouchableHighlight>
+
+                        </View>
+                    )
+                )
+            }
+        </ScrollableTabView>
+    );
+  },
+});

examples/FacebookTabsExample/index.js

@@ -12,6 +12,7 @@ import ScrollableTabsExample from './ScrollableTabsExample';
 import OverlayExample from './OverlayExample';
 import FacebookExample from './FacebookExample';
 import DynamicExample from './DynamicExample';
+import ChangingScrollableTabsExample from './ChangingScrollableTabsExample';
 
 export default React.createClass({
   render() {
@@ -34,6 +35,8 @@ export default React.createClass({
       return <FacebookExample />;
     case 'dynamic':
       return <DynamicExample />;
+    case 'changingScrollable':
+      return <ChangingScrollableTabsExample />;
     default:
       return <View style={styles.container}>
         <TouchableOpacity
@@ -70,6 +73,13 @@ export default React.createClass({
         >
           <Text>Dynamic tabs example</Text>
         </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => nav.push({id: 'changingScrollable', })}
+        >
+          <Text>Changing scrollable tabs example</Text>
+        </TouchableOpacity>
       </View>;
     }
   },