Today I Learned

오늘 한일✅

• swipe to delete를 만들었다.

문제점✅

• 원래 하고싶은 디자인의 있었는데 그 부분은 따라해보다가 계속 오류도 나서 시간 관계상 다른 디자인의 swipe 삭제로 변경했다.

해결✅

• Swipeable을 install을 해서 오른쪽에서 왼쪽으로 밀면 delete 박스가 나오는 디자인이다.

1. renderRightActions에 rightSwipe 함수를 따로 만들었다.
   여기서는 파이어베이스를 사용하요 uid가 리뷰유저와 같으면 rightSwipe 함수를 작동하게 하고 아니면 ''을 줘서 움직이지 못하게 만들었다.

<Swipeable renderRightActions={uid === review.userId ? rightSwipe : ""}>
      <TouchableOpacity key={review.id} onPress={() => handEditing(review.id)}>
        <ReviewWrapper
          style={{
            borderBottomWidth: 1,
            borderBottomColor: "#D9D9D9",
            padding: 20,
            paddingLeft: 30,
          }}
        >
          <ReviewId>{review.nickname}</ReviewId>
          <ReviewContent>{review.contents}</ReviewContent>
        </ReviewWrapper>
      </TouchableOpacity>

2. rigthSwipe 함수를 만들어서 드래그시 delete가 나오도록 코드를 작성했다.
   (유튜브를 참고했다)

 // 슬라이드 삭제 구현 코드
  const rightSwipe = (progress, dragX) => {
    const scale = dragX.interpolate({
      inputRange: [0, 100],
      outputRange: [1, 0],
      extrapolate: "clamp",
    });
    return (
      <TouchableOpacity
        onPress={() => deleteReview(review.id)}
        activeOpacity={0.6}
      >
        <DeletBox
          style={{ borderBottomWidth: 1, borderBottomColor: "#D9D9D9" }}
        >
          <Animated.Text
            style={{ color: "white", transform: [{ scale: scale }] }}
          >
            Delete
          </Animated.Text>
        </DeletBox>
      </TouchableOpacity>
    );
  };