Is it possible to add a swipe up and down to a animated flatlist item in react native

Viewed 224

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.

1 Answers
Related