🐛 Doesn't come back animatedly after dropping the card

[Skipperlla]

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

[thinktapper]

Not related the issue but just curious, @Skipperlla how'd you get what looks like multiple images for the cards in your screen recording?

[Skipperlla]

@thinktapper https://snack.expo.dev/@thepunisher/tinder-image-carousel, You can see it here, there is a little digging after a certain picture I guess it may be because of the size of the photo

[thinktapper]

Cool thanks for sharing!

[PiotrWszolek]

HI, I spent a few minutes looking for the cause and I managed to find it. I'm not sure if it doesn't brake something else but it doesn't look like. I will crate a PR with the fix.

[PiotrWszolek]

https://github.com/webraptor/react-native-deck-swiper/pull/92/files

[webraptor]

Now published under 2.0.12