I am just wondering if it is possible to add a swipe up and down feature to a horizontal animated flatlist item? At the moment it just scrolls through left and right with a nice bit of animation but does not have any real functionality.
I can only seem to fine information on swipe right or left but this obviously would not work being a horizontal list.
Ideally it would be possible to swipe the center item up or down to execute an action. I am not asking anyone to do this, just is it possible and how would I implement it. The code for the animated flatlist I am using is :-
<Animated.FlatList
showsHorizontalScrollIndicator={false}
data={movies}
keyExtractor={(item) => item.key}
horizontal
bounces={false}
decelerationRate={0.2}
contentContainerStyle={{ alignItems: 'center' }}
snapToInterval={ITEM_SIZE}
snapToAlignment="start"
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { x: scrollX } } }],
{ useNativeDriver: true }
)}
scrollEventThrottle={16}
renderItem={({ item, index }) => {
if (!item.poster) {
return <View style={{ width: EMPTY_ITEM_SIZE }} />;
}
const inputRange = [
(index - 2) * ITEM_SIZE,
(index - 1) * ITEM_SIZE,
index * ITEM_SIZE,
];
const translateY = scrollX.interpolate({
inputRange,
outputRange: [100, 50, 100],
});
return (
<View style={{ width: ITEM_SIZE }}>
<Animated.View
style={{
marginHorizontal: SPACING,
padding: SPACING * 1,
alignItems: 'center',
transform: [{ translateY }],
backgroundColor: 'white',
borderRadius: 34,
marginTop: 100,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
}}>
<Image
source={{ uri: item.poster }}
style={styles.posterImage}
/>
<Text style={{ fontSize: 24 }} numberOfLines={1}>
{item.title}
</Text>
<Text style={{ fontSize: 12 }} numberOfLines={3}>
{item.location}, {item.age}
</Text>
<Rating rating={item.rating} />
</Animated.View>
</View>
);
}}
/>
I can provide more code if required, many thanks.