fix(layout): Recalculate views if number of items change

iRoachie · Dec 17, 2017 · 5458ac0 · 5458ac0
1 parent 3fd0737
commit 5458ac0
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/components/MaterialTabs.js b/src/components/MaterialTabs.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Animated, ScrollView } from 'react-native';
+import { Animated, ScrollView, View } from 'react-native';
 import { Bar, TabTrack } from '../lib/styles';
 import Tab from './Tab';
 import Indicator from './Indicator';
@@ -59,11 +59,21 @@ export default class MaterialTabs extends React.Component<Props, State> {
     );
   }
 
+  componentWillUpdate(nextProps: Props) {
+    // Recalculate views if the number of items change
+    if (nextProps.items.length !== this.props.items.length) {
+      this.bar.measure((_, b, width) => {
+        this.getTabWidth(width);
+      });
+    }
+  }
+
   componentDidUpdate() {
     this.selectTab();
   }
 
   scrollView: ScrollView;
+  bar: View;
 
   getAnimateValues() {
     const idx = this.props.selectedIndex;
@@ -133,6 +143,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
   renderContent() {
     return (
       <Bar
+        innerRef={ref => (this.bar = ref)}
         barColor={this.props.barColor}
         onLayout={event => this.getTabWidth(event.nativeEvent.layout.width)}
       >