react native - 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!

Answer 1

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()