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!