How to implement swipeable in react native gesture handler

Question

I want to implement a swipe to delete feature on flatlist data. I can get the swipe to work, but it only registers after the touch input is lifted. When I start dragging, the card does not initially drag, but it swipes after I lift the input. How can I make it so it starts dragging when I start moving the card?

Current Code:

export default class AppleStyleSwipeableRow extends Component {
  private renderRightAction = (x: number, dragX) => {
    const trans = dragX.interpolate({
      inputRange: [0, 1],
      outputRange: [x, 0],
      extrapolate: "clamp",
    });
    const pressHandler = () => {
      this.close();
      Alert.alert("hi");
    };

    return (
      <Animated.View
        style={{
          flex: 1,
          borderRadius: 15,
          height: 120,
          transform: [{ translateX: trans }],
        }}
      >
        <RectButton
          style={[
            styles.rightAction,
            { backgroundColor: "transparent", height: 50 },
          ]}
          onPress={pressHandler}
        >
          <SquircleView
            style={StyleSheet.absoluteFill}
            squircleParams={{
              cornerSmoothing: 0.6,
              cornerRadius: 15,
              fillColor: "#FF3B30",
            }}
          >
            <Image
              style={{
                width: 17.37 * 1.5,
                height: 19.66 * 1.5,
                justifyContent: "center",
                alignSelf: "center",
                top: 40,
                right: 3.5,
              }}
              source={require("../../assets/trash.fill.png")}
            ></Image>
          </SquircleView>
        </RectButton>
      </Animated.View>
    );
  };

  private renderRightActions = (
    progress: Animated.AnimatedInterpolation,
    _dragAnimatedValue: Animated.AnimatedInterpolation
  ) => (
    <View
      style={{
        width: 90,
        flexDirection: I18nManager.isRTL ? "row-reverse" : "row",
      }}
    >
      {this.renderRightAction(90, progress)}
    </View>
  );

  private swipeableRow?: Swipeable;

  private updateRef = (ref: Swipeable) => {
    this.swipeableRow = ref;
  };
  private close = () => {
    this.swipeableRow?.close();
  };
  render() {
    const { children } = this.props;
    return (
      <Swipeable
        containerStyle={{ borderRadius: 15 }}
        childrenContainerStyle={{ backgroundColor: "white", borderRadius: 15 }}
        ref={this.updateRef}
        friction={3}
        enableTrackpadTwoFingerGesture
        rightThreshold={40}
        renderRightActions={this.renderRightActions}
      >
        {children}
      </Swipeable>
    );
  }
}

const styles = StyleSheet.create({
  actionText: {
    color: "white",
    fontSize: 16,
    backgroundColor: "transparent",
    padding: 10,
  },
  rightAction: {
    alignItems: "center",
    flex: 1,
    justifyContent: "center",
    left: 10,
  },
});

ScreenA.tsx

const RenderItem = ({ item }) => {
    return (
      <View style={{ height: 120, width: W_WIDTH * 0.9, zIndex: -100 }}>
        <Image
          source={require("../../assets/pin.png")}
          style={{
            position: "absolute",
            width: 40,
            height: 40,
          }}
        />
        <Text
          style={{
            fontSize: 22,
            paddingRight: 16,
            color: "black",
            fontFamily: "Medium",
            left: 45,
            top: 6,
          }}
        >
          Foo
        </Text>
      </View>
    );
  };

const ScreenA = () => {

    const SwipeableRow = ({ item }) => {
    return (
      <RectButton
        style={{
          width: W_WIDTH * 0.9,
          height: 120,
          alignItems: "center",
          backgroundColor: "#f3f2f8",
          borderRadius: 10,
          marginHorizontal: 20,
          marginTop: 20,
        }}
        onPress={() =>
          navigation.navigate("ScreenB")
        }
      >
        <AppleStyleSwipeableRow>
          <RenderItem item={item} />
        </AppleStyleSwipeableRow>
      </RectButton>
    );
  };

  return (
      <StatusBar style={colorScheme == "dark" ? "light" : "dark"} />
      <ScrollView
        style={[
          styles.container,
          {
            backgroundColor: colorScheme == "dark" ? "black" : "white",
          },
        ]}
        contentInsetAdjustmentBehavior="automatic"
        keyboardDismissMode="on-drag"
      >

                  <FlatList
                    data={bookmarks}
                    keyExtractor={(item) => item.country}
                    renderItem={({ item }) => <SwipeableRow item={item} />}
                    // renderItem={renderItem}
                    showsVerticalScrollIndicator={false}
                  />
      </ScrollView>
  );
};
}

Answer 1

Does your RectButton have an onPressIn prop? That's what you'll need to use - if it doesn't have it, switch it out for a Pressable or other component with this prop.