Segmented control tab with multiple list view overlapping data

1.4k views Asked by At

I am working on a react native application in which I have used Segmented control tab which works for both Android and iOS. I am using this github component for segmented tabs https://www.npmjs.com/package/react-native-segmented-control-tab

Here is my code sample :-

<View>
    <SegmentedControlTab
      values={['Tab 1', 'Tab 2']}
      selectedIndex={this.state.selectedIndex}
      onTabPress={this.handleIndexChange}
    />
    <SearchBox
      placeholder={this.state.selectedIndex === 0 ? 'Tab 1' : 'Tab 2'}
      onFilterChange={this.onFilterChange}
      filterPress={this.filterPress}
    />
    { this.state.selectedIndex === 0 ?
      <ListView
        style={styles.list}
        dataSource={this.state.dataSource}
        renderRow={user => (
          <UserListRow
            {...{ user }}
          />)}
        refreshControl={
          <RefreshControl
            refreshing={false}
            onRefresh={() => this._onRefresh()}
          />
        }
         onEndReached={() => this._onEndReached()}
         onEndReachedThreshold={10}
        enableEmptySections={true}
      />
    :
      <ListView
        style={styles.list}
        dataSource={this.state.dataSourceJobs}
        renderRow={job => (
          <JobListRow
            {...{ job }}
          />
        )}
        refreshControl={
          <RefreshControl
            refreshing={false}
            onRefresh={() => this._onRefresh()}
          />
      }
       onEndReached={() => this._onEndReached()}
       onEndReachedThreshold={10}
        enableEmptySections={true}
      />
    }
  </View>

Everything is working as I expected till the time I am not scrolling the Tab 1 OR Tab 2. Data gets overlap while scrolling down for pagination. e.g Data inside Tab 1 moves to Tab 2 and vice versa.

I am using below code for updating dataSource of list view.

componentWillReceiveProps({ data }) {
  this.updateDataSource(data.tab1); 
  this.updateDataSourceJobs(data.tab2); 
}

Here are some other usefult methods:-

updateDataSource(users) {
this._data = _.uniqBy(this._data.concat(users.toJS()), 'id');
this.setState({
  dataSource: this.state.dataSource.cloneWithRows(
    this._data
  )
});
}

updateDataSourceJobs(jobs) {
this._jobData = _.uniqBy(this._jobData.concat(jobs.toJS()), 'id');
this.setState({
  dataSourceJobs: this.state.dataSourceJobs.cloneWithRows(
    this._jobData
  ),
});
}

I am not able to understand the issue is with Segmented control tab or with list view. Also, If I am scrolling Tab 1 the other tab also gets scrolled. Any help would be appreciated!

0

There are 0 answers