CODEWITHSUNDEEP
react-native
Dennis
Dennis

Reputation: 59

how to resove the scroll conflict between scrollview and flatList in React Native

I have a flatList and some views in the scrollView, how to make when the flatList scroll to top, we start to scroll flatList not scrollView.

<ScrollView>
  <View>
    // some child views
  </View>
<FlatList
  data={this.props.sourceData}
  renderItem={this._renderItem}
 />
<View>
  ....  // some child views
</View>

Upvotes: 1

Views: 567

Answers (1)

Lenoarod
Lenoarod

Reputation: 3620

the scroll conflict is complex, you can try to move the header views into FlatLIst ListHeaderComponent, and the footer views into the ListFooterComponent

 <FlatList
    data={DATA}
    ListHeaderComponent={"your header component"}
    renderItem={({ item }) => <Item title={item.title} />}
    keyExtractor={item => item.id}
    ListFooterComponent={"your bottom views"}
  />

you can also read my question, in the description I give some solution. I hope it can help you

Upvotes: 2

Related Questions