React-native-tab-view: componentWillReceiveProps only being called after changing tab

Created on 28 Jun 2017 · 2Comments · Source: satya164/react-native-tab-view

I need to render many tabs, and each tab has a ListView to a different data that is being updated by a Redux Store.

I tried to encapsulate the ListView in another component called MyListView, and when the data changes the ListView only receives the update after I going to another tab. I checked and the componentWillReceiveProps of MyLIstView is being called only when I click on another tab.

I created this MyListView to not have to check the difference of each type of data on componentWillReceiveProps in my main component.

Appreciate some help/directions...

  _renderScene = ({ route }) => {
    switch(route.key) {
      case '1':
      {
        return (
          <MyListView
            style={styles.listView}
            data={this.props.data1}
            rowHasChanged={this.data1RowHasChanged}
            renderRow={this.data1RenderRow}
            renderSeparator={this.renderSeparator}
          />
        );
      }
      case '2':
      {
        return (
          <MyListView
            style={styles.listView}
            data={this.props.data2}
            rowHasChanged={this.data2RowHasChanged}
            renderRow={this.data2RenderRow}
            renderSeparator={this.renderSeparator}
          />
        );
      }
    }
  }

  render() {
    const { props } = this;
    return (
      <TabViewAnimated
        style={styles.views}
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
        onRequestChangeTab={this._handleChangeTab}
        animationEnabled={false}
        swipeEnabled={false}
      />
    );
  }

class MyListView extends React.Component {
  constructor(props) {
    super(props);
    this.state = { dataSource: new ListView.DataSource({ rowHasChanged: props.rowHasChanged }) };
  }

  componentDidMount() {
    const { props } = this;
    if (props.data && props.data.length !== 0) {
      this.setState({ dataSource: this.state.dataSource.cloneWithRows(props.data) });
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.data !== nextProps.data) {
      this.setState({ dataSource: this.state.dataSource.cloneWithRows(nextProps.data) });
    }
  }

  render() {
    return (
      <ListView
        style={this.props.style}
        dataSource={this.state.dataSource}
        renderRow={this.props.renderRow}
        renderSeparator={this.props.renderSeparator}
        removeClippedSubviews={false}
        enableEmptySections
      />
    );
  }
}

Source