React Native ScrollView with a FlatList

Question

My main component view is a ScrollView which has many views and a component which renders a flatlist. The thing is I want to scroll down the screen and when it reaches the end, where is the flatlist, start scrolling the flatlist. How can I achieve this?

I have something like this:

<ScrollView>
        <View style={{flex:1}}>
            <Image>
                <View>  
                    <Text></Text>
                    <Text></Text>
                </View>
            </Image>
            <EventInfo/>
            <Text>  </Text>
            <Text>  </Text>
            <EventHeader/>
        </View>
        <EventGuests/>
</ScrollView>

EventGuests is the component which renders the flatlist. This way is shown the entire list and all the screen is scrolled.

score 7 · Answer 1 · edited Jun 20 '20 at 09:12

7

The best approach to do this is to use ListHeaderComponent prop of FlatList.

You can check it here.

Just pass your all your components which are higher than FlatList into FlatList header prop. This is right approach to have no conflict between ScrollView and FlatList scrolling.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 06 '17 at 16:38

Yury Kulikov

131
8

Issue will arise once you try to call scroll methods, since `HeaderComponent` will have unpredictable height. hence `getItemLayout ` will not be accurate. – Ceddy Muhoza Mar 06 '18 at 08:48

score 1 · Answer 2 · answered Aug 22 '17 at 19:55

Try to use onScroll props in your ScrollView component. We can use it to detect end of the scrolled screen.

const isReachedEnd = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 10;

  return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
};

const renderEventGuests = () => {
  return (
    <EventGuests />
  );
};

render() {
  return (
    <ScrollView
      onScroll={({nativeEvent}) => {
        if (this.isReachedEnd(nativeEvent)) {
          this.renderEventGuests();
        }
      }}
      scrollEventThrottle={400} 
    >
      <View style={{ flex:1 }}>
        <Image>
          <View>  
            <Text></Text>
            <Text></Text>
          </View>
        </Image>

        <EventInfo />

        <Text></Text>
        <Text></Text>

        <EventHeader />
      </View>
    </ScrollView>
  )
}

Ref: Detect ScrollView has reached the end

Didn't work. But already solved it: the image was breaking everything. Don't know why — thomas12, Aug 23 '17 at 15:34

React Native ScrollView with a FlatList

2 Answers2