React Native

flat list scrolling inside scroll view in react-native

Posted On
Posted By Neha Dwivedi

flatlist scrolling inside scrollview react-native: if flat list not scrolling within scroll view, then we do this…

  • set the state first

this.state = {

   enableScrollViewScroll: true,

}

  • then define the function

//set state of scroll view

onEnableScroll= (value) => {

this.setState({

enableScrollViewScroll: value,

});

};

  • define the render method

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

<View style={{ height: 300 }}></View>

</ScrollView>

</SafeAreaView>

);}}

  • show image function definition

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>}/> )}

and if any other issue then please comment

Happy Coding Guyz

Related Post

leave a Comment

Latest Post

What's Arround

Companies Preferences on Artificial Intelligence (AI) Jobs position and other Skillsets

Read More
Posted On
React Native

flat list scrolling inside scroll view in react-native

Read More
Posted On
React Native

How to get SH1 key in react-native

Read More
Posted On
React Native

Possible issues in google login using firebase

Read More
Posted On
React Native

Sign-in with google in react-native

Read More
Posted On