Why flat list doesn’t scroll:

Here we are discuss about the topic  “Flatlist scrolling inside scroll view in react-native”, issue is that the parent component is the only one registering the scroll event other component are doesn’t registering for scroll event that’s why it happend, solution of this problem is to contextually decide which component should actually be handling that event based on the location of the press.

I’m a big fan of React Native, because it is very easy to implement complicated concepts and designs, in below example i am going to explain you in detail how to create a very simple flat list scrolling.

Resolve the issue of not scrolling flatlist within scrollview you need to follow these steps.

Step 1:

Firstly we need to define a variable and set the state of that variable.

this.state = {   
 enableScrollViewScroll: true,
}

Step 2:

Provide the definition of enable scroll view.

//Set state of scroll view
onEnableScroll= (value) => {
    this.setState({
    enableScrollViewScroll: value,
    });
}

Step3:

Here we are design the view for scrolling the list, scrollEnabled is a scrolling props of ScrollView, so here we manage everything using scrollEnabled, check the below render part.

render() {
 return (
  <SafeAreaView style={styles.container}>
  <ScrollView scrollEnabled={this.state.enableScrollViewScroll}>

  <View style={{ alignItems: 'center' }}></View>
  <View style={{ height: 60, borderWidth: 0, backgroundColor: 
   "#37c4be",flexDirection: "row", alignItems: "center" }}>

  <TouchableOpacity onPress={() => this.backToScreen()} style={{ 
  marginLeft:8 }}>
  <Image source={{ uri: "back_icon" }} style={{width:20,height:20}} />
  </TouchableOpacity>

  <View style={{ flex: 0.5 }}></View>
  <Text style={{ color: "#fff", fontSize:(deviceWidth>=600)? 21: 18, 
  fontFamily: "AvenirLTStd-Black" }}>Edit Profile</Text>
  <View style={{ flex: 0.5 }}></View>

  <TouchableOpacity style={{ marginRight: 5 }} onPress={() => 
  this.updateProfileDetails()}>
  <Text style={{ fontSize:(deviceWidth>=600)? 17: 12, fontFamily: 
  "AvenirLTStd-Book", color: "#fff" }}>Save</Text>
   </TouchableOpacity></View>{this.showImages()}
  </ScrollView></SafeAreaView>
);}}

Step 4:

Now we are going to provide the definition of showIimages() function, here you can show your image or you can remove your image as well.

showImages() {
 return (
  <FlatList data={uploadimagess} extraData={this.state.refresh} 
  keyExtractor={(item, index) => index} 
  onTouchStart={() => { this.onEnableScroll( false ); }}
  onMomentumScrollEnd={() => { this.onEnableScroll( true );}}
  renderItem={({ item, index }) => <View style={{flex:0.5, flexDirection: 
  "row", marginTop: 15, marginRight: 10 }}>
  <TouchableOpacity key={index} onPress={() => 
  this.changeMainImage(item.uri)} style={{ marginLeft: 8 }}>
  <Image source={{ uri: item.uri }} style={{ height: 40, width: 40 }} /> 
  </TouchableOpacity>
  <TouchableOpacity onPress={() => this.removeImage(item.picture_id, 
  index)}><Image source={require('../../images/red_cross_image.jpg')} style= 
  {{ height: 15, width: 15, marginTop: 1 }} resizeMode="contain" /> 
  </TouchableOpacity>
 </View>}/> )}
)}

So the topic  “Flatlist scrolling inside scroll view in react-native” is completed here, you can find my next lesson here.

And you can find my post on medium as well click here please follow me on medium as well.

And if you have any other issue or query then please comment.

Happy Coding Guyz