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

React Native

How to setup crashlytics in react native

Read More
Posted On
React Native

How to create/generate ipa file in react native iOS

Read More
Posted On
React Native

How to Set Splash Screen and AppIcon in react native iOS

Read More
Posted On
React Native

Getting Started with React Native First App With Little Information(Course for beginners, start with basics)

Read More
Posted On
React Native

How To Integrating Firebase with iOS in React Native

Read More
Posted On