I'm trying to create vertical flatlist with swipe to delete functionality. So every item of my flatlist additionaly handles by PanGestureHandler My problem is when I try to scroll my flatlist scroll doesn't work because of the conflict between scroll view animation and the pan gesture animation. I have tried to use simultaneousHandlers but it doesn't help.
I also tried to use FlatList from react-native-gesture-handler and from react-native result is the same.
<View style={styles.container}>
<Header data={{headerText: 'Contacts', leftIcon: 'arrow-left', line: true}}/>
<FlatList
ref={scrollRef}
data={contacts}
renderItem={({item}) => <Item simultaneousHandlers={scrollRef} {...{item}} />}
bounces={false}
showsVerticalScrollIndicator={false}
style={{paddingLeft: wp('5%'), paddingTop: hp('2%')}}>
</FlatList>
<TouchableOpacity style={styles.touchableOpacity} onPress={() => navigation.navigate('AddContact')}>
<View>
<Text style={styles.textButton}> Add Contact </Text>
</View>
</TouchableOpacity>
</View>
Item:
<Animated.View style={[rTaskContainerStyle]}>
<Animated.View style={[styles.iconContainer, rIconContainerStyle]}>
<Icon name={'trash-2'} size={25} color={'red'} />
</Animated.View>
<View>
<PanGestureHandler {...simultaneousHandlers} onGestureEvent={panGestureHandler}>
<Animated.View style={[rStyle,{backgroundColor: '#FFFFFF'}]}>
<Text style={{color: '#09101D', fontFamily: 'SourceSansPro_600SemiBold', fontSize: 18}}>
{info.fullName}
</Text>
<Text style={{color: '#545D69', fontFamily: 'SourceSansPro_400Regular'}}>
{info.publicKey}
</Text>
</Animated.View>
</PanGestureHandler>
</View>
</Animated.View>
You should add offset for pan-gesture. Your PanGestureHanler should be
<PanGestureHandler
failOffsetY={[-5, 5]}
activeOffsetX={[-5, 5]}
onGestureEvent={gestureHandler}
>
It may help you.
Related
So whenever i try put any images in flatlist or data.map to display the images its not working , it works fine with emulator but when i make build it doesnt show images
'the code is :
{this.state.symptoms_second.map((row, index) => (
<View>
<TouchableOpacity
activeOpacity={1}
onPress={() => this.symptoms_doctor_list(row.id)}>
<View style={styles.home_style26}>
<Image
style={styles.home_style27}
source={{uri: img_url + row.service_image}}
/>
</View>
</TouchableOpacity>
{/* </Card> */}
<Text style={styles.home_style28}>{row.service_name}</Text>
</View>
))}
flatlist code
<FlatList
horizontal={true}
data={this.state.symptoms_first}
showsHorizontalScrollIndicator={false}
renderItem={({item, index}) => (
<View>
<TouchableOpacity
activeOpacity={1}
style={{margin: 2}}
onPress={() =>
this.symptoms_doctor_list(item.name)
}>
<View style={styles.home_style20}>
<Image
style={styles.home_style21}
source={{uri: item.image}}
/>
</View>
</TouchableOpacity>
<Text style={styles.home_style22}>{item.name}</Text>
</View>
)}
keyExtractor={item => item.id}
/>
it does load the api content of text but not images and images do have style property for height and width... also images are not loading in general case when the image is passed through uri
as the title states, I am attempting to implement a modal in such way that it only takes up some part of the screen so as to allow the user to be able to interact with some of the background components. For reference I am using the react-native-modal library. The current screen looks like this:
I would like to be able to interact with the icons in the header (both are already wrapped in Touchable components so already clickable). However when the Modal is visible I am unable to interact with those.
My implementation is as such:
<Modal
isVisible={showModal}
style={styles.modalContainer}
customBackdrop={<CustomBackdrop />}
onBackdropPress={() => setShowModal(false)}
animationIn="fadeInDown"
animationOut="fadeOutUp"
>
<View style={styles.container}>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>A</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>B</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>C</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>D</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.itemContainer,
{ borderBottomLeftRadius: 16, borderBottomRightRadius: 16 },
]}
>
<Text style={styles.label}>E</Text>
</TouchableOpacity>
</View>
</Modal>
And my custom background looks like this:
<View
style={{
marginTop: hp("50%"),
flex: 1,
}}
>
<TouchableWithoutFeedback onPress={() => setShowModal(false)}>
<View
style={{ backgroundColor: "#000", height: hp("50%"), width: wp("100%") }}
/>
</TouchableWithoutFeedback>
</View>
My Horizontal FlatList doesn't scroll in Modals. You can find my FlatList and RenderItem codes below:
<FlatList
data={this.props.selectedGroupData.groupMembersList}
renderItem={this.ilgiliKisiler}
keyExtractor={item => item.uid}
nestedScrollEnabled={true}
horizontal={true}
removeClippedSubviews={true}
/>
</View>
and renderItem function:
ilgiliKisiler = ({ item }) => {
console.log("on Related Users item => ", item);
return (
<TouchableOpacity style={{flex: 1}}>
<View style={{ flexDirection: "row" }}>
<View style={styles.relatedUsersContainer}>
<View style={{ alignItems: "center" }}>
<Image
source={
item.avatar
? { uri: item.avatar }
: require("../../assets/images/defaultAvatar.png")
}
style={styles.relatedUsersImage}
/>
</View>
<View style={{ flexDirection: "column" }}>
<Text style={styles.relatedUsersText} numberOfLines={2}>
{item.name}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
};
Before this post, i found some solutions like style={{flex: 1}}. When i try to this solutions, my renderItem doesn't appear.
Use propagateSwipe props for smooth scrolling in <Modal>
<Modal propagateSwipe>...</Modal>
for more detail react-native-modal issue #236
Sorry for posting this as an answer, but I can't comment because of my low reputation. I'll remove this answer if it doesn't work for you.
Have you tried using contentContainerStyle on your FlatList like so:
contentContainerStyle={{ flexGrow: 1 }}
You can read more about contentContainerStyle at this link: https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle
Wrap the Flatlist inside a scrollview. It should work.
<Scrollview>
<Flatlist />
</Scrollview>
render() {
return (
<View style ={styles.container}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'09%',backgroundColor: '#009AFF'}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25,margin:10}} source={require('../assets/clinic/left-arrow.png')} />
</TouchableWithoutFeedback>
<View>
<Text style={{fontSize: 21,fontWeight: 'bold', color: "white",paddingRight:25}}>Dummy</Text>
</View>
<View>
</View>
</View>
{/*for main content*/}
<ScrollView style={{width:'100%',height:'90%'}} contentContainerStyle={{ flexGrow: 1 }} nestedScrollEnabled={true}>
<View>
<View style = {{width:'100%',height:'45%',backgroundColor: '#009AFF',justifyContent:'center',alignItems: 'center'}}>
<Text style={{fontSize: 18,fontWeight: 'bold', color: "white",paddingRight:25}}>John Alison</Text>
</View>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
)
}
Above code i have implemented in react native for learning purposes.But in above code ScrollView does not works,means it does not scrolls,why? i have tried many possible ways like setting flex and flexGrow equal to 1,enabling nested scrolling but it does not works.What is wrong with my code
WebView scroll is not working in Android. I have searched a lot and seen a lot of other places, no one was able to help.
This is how I defined the component
<WebView
automaticallyAdjustContentInsets={false}
source={{uri: this.props.url}}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
startInLoadingState={true}
scalesPageToFit={isAndroid ? false : true}
/>
This seems a react native bug (which is out there forever), but there should be a workaround.
-- UPDATE --
I figured out that this is not the WebView problem and it's happening because I have it in a Modal and TouchableWithoutFeedback is needed to hide the modal and of course not hide when they touch inside the modal.
TouchableWithoutFeedback steals the press event and does not the scroll work.
<Modal
animationType='fade'
onRequestClose={() => { }}
transparent
visible={visible} //its either true or false, if its ture it will be displayed if false, it will hide
>
<TouchableWithoutFeedback onPress={onDecline} >
<View style={containerStyle}>
<Ionicons name="md-close" size={24} color={colors.primary} style={closeIconStyle} />
<TouchableWithoutFeedback onPress={() => { }} >
<View style={popupStyle}>
<View style={styles.textContainer}>
<Text style={textStyle}>
{this.props.title}
</Text>
</View>
<View style={[cardSectionStyle, {
marginTop: 5
}]}>
<View style={{ height: SCREEN_HEIGHT - 300, width: SCREEN_WIDTH - 80 }}>
<WebView
source={{ uri: this.props.url }}
style={contentStyle}
automaticallyAdjustContentInsets={false}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
startInLoadingState={true}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
Adding "nestedScrollEnabled" property in WebView worked for me
You can add style={flex: 1} in the <Webview /> tag.
If it's still not working, just try this:
<WebView
source={{uri: this.props.url }}
style={{marginTop: 20, flex: 1}}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
/>