alexbrillant / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
1.57k stars 464 forks source link

🐛 Doesn't come back animatedly after dropping the card #389

Closed Skipperlla closed 1 year ago

Skipperlla commented 2 years ago

https://user-images.githubusercontent.com/68515357/200949775-df96997e-b93b-4c6c-89ad-dbf70129d294.mp4

Problem

After swiping the card left or right and letting go, the animation doesn't come back, how do I fix this?

My code

 <View
        style={{
          flex: 1,
          paddingHorizontal: 20,
        }}>
        <Swiper
          ref={swiperRef}
          onSwiped={() => onSwiped('general')}
          onSwipedLeft={() => onSwiped('left')}
          onSwipedRight={() => onSwiped('right')}
          onSwipedTop={() => onSwiped('top')}
          onSwipedBottom={() => onSwiped('bottom')}
          onTapCard={swipeLeft}
          cards={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
          cardIndex={0}
          cardVerticalMargin={80}
          renderCard={() => {
            return <UserCard wrapperPadding={wrapperPadding} />;
          }}
          onSwipedAll={onSwipedAllCards}
          stackSize={3}
          stackSeparation={15}
          overlayLabels={{
            bottom: {
              title: 'BLEAH',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1,
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                },
              },
            },
            left: {
              title: 'NOPE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1,
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'flex-end',
                  justifyContent: 'flex-start',
                  marginTop: 30,
                  marginLeft: -30,
                },
              },
            },
            right: {
              title: 'LIKE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1,
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'flex-start',
                  justifyContent: 'flex-start',
                  marginTop: 30,
                  marginLeft: 30,
                },
              },
            },
            top: {
              title: 'SUPER LIKE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1,
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                },
              },
            },
          }}
          animateOverlayLabelsOpacity
          animateCardOpacity
          swipeBackCard
        />
      </View>

The solution i want

Animated freezes when returning after dropping card 🐛 Doesn't come back animatedly after dropping the card