FlatList inside ScrollView not scrolling

Question

I have a requirement where profile data will be on the top and the feed will come after that. While scrolling the feed, the profile part also should scroll. Means the whole page needs to scroll.

So I have implemented FlatList inside ScrollView.

<ScrollView
        contentContainerStyle={{ flex: 1 }}>
        <FlatList
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          data={this.state.feed}
          keyExtractor={(item, index) => item.id}
          refreshControl={this.refreshControl()}
          renderItem={({ item, index }) => this.renderItem(item, index)}
          numColumns={2}
          ListFooterComponent={this.renderFooter.bind(this)}
          onEndReachedThreshold={0.4}
          onEndReached={this.handleLoadMore.bind(this)} />
</ScrollView>

But I'm not able to scroll the page.

If I remove the contentContainerStyle={{ flex: 1 }}, then handleLoadMore function calling itself continuously.

Thanks for any suggestions!

Waleed Nasir · Answer 1 · 2021-01-05T14:04:05.000

0

try this

  <ScrollView
    contentContainerStyle={{flexGrow:1}}
        scrollEventThrottle={200}
        directionalLockEnabled={true}
    >
 <FlatList
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          data={this.state.feed}
          keyExtractor={(item, index) => item.id}
          refreshControl={()=>this.refreshControl()}
          renderItem={({ item, index }) => this.renderItem(item, index)}
          numColumns={2}
          ListFooterComponent={(e)=>this.renderFooter.bind(e)}
          onEndReachedThreshold={0.4}
          onEndReached={(e)=>this.handleLoadMore.bind(e)} />



use Callback like this. //

()=>this.yourFUNC()

or

this.yourFUNC()

edited Jan 05 '21 at 14:04

answered Jan 05 '21 at 13:55

Waleed Nasir

579
5
9

In this case, scrolling enabled. But handleLoadMore() has been called continuously. Because of the absence of flex: 1 – Dhevendhiran M Jan 05 '21 at 14:00
With arrow function and bind(), the handleLoadMore() has not been called even once. without bind, it has called multiple times. – Dhevendhiran M Jan 05 '21 at 14:13
you can try to Call alert() in those functions and try – Waleed Nasir Jan 05 '21 at 14:55
Hey, thanks!. But the same behavior will happen If we add an alert also. The alert will come multiple times. – Dhevendhiran M Jan 05 '21 at 15:07
okay Can you add your file and JSON data, i will let you know whats the problem here – Waleed Nasir Jan 05 '21 at 15:32

FlatList inside ScrollView not scrolling

1 Answers1