Untitled

const MailItem = () => {
  const _renderLeftActions = (progress: Animated.AnimatedInterpolation) => {
    const trans = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [-64, 0],
    });

    return (
      <View style={{ width: 64, flexDirection: "row", marginRight: 10 }}>
        <Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
          <RectButton
            onPress={ref.current?.close}
            style={{
              backgroundColor: "lightblue",
              alignItems: "center",
              flex: 1,
              justifyContent: "center",
            }}
          >
            <EnvelopeIcon color={"white"} />
          </RectButton>
        </Animated.View>
      </View>
    );
  };

  const _renderRightActions = (progress: Animated.AnimatedInterpolation) => {
    const trans = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [64, 0],
    });

    return (
      <View style={{ width: 64, flexDirection: "row", marginLeft: 10 }}>
        <Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
          <RectButton
            onPress={ref.current?.close}
            style={{
              backgroundColor: "red",
              alignItems: "center",
              flex: 1,
              justifyContent: "center",
            }}
          >
            <TrashIcon color={"white"} />
          </RectButton>
        </Animated.View>
      </View>
    );
  };

  const ref = createRef<Swipeable>();

  return (
    <Swipeable
      ref={ref}
      renderLeftActions={_renderLeftActions}
      renderRightActions={_renderRightActions}
      rightThreshold={40}
      friction={2}
    >
      <View style={{ marginVertical: 10 }}>
        <Text style={{ fontWeight: "700", marginBottom: 5, fontSize: 16 }}>
          Jira Gitlab (jira)
        </Text>
        <Text lineBreakMode="tail" numberOfLines={1}>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. lorum
        </Text>
      </View>
    </Swipeable>
  );
};