webraptor / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
134 stars 83 forks source link

animateCardOpacity Sometimes makes the card stay partially transparent #52

Open haveamission opened 3 years ago

haveamission commented 3 years ago

When I have animateCardOpacity set, I sometimes see this:

Screen Shot 2021-04-14 at 12 08 10 AM

And then after I swipe that card, I see something like this for the next card:

Screen Shot 2021-04-14 at 12 08 17 AM

I feel I have a fairly standard implementation of Swiper:

<Swiper
            style={{
              justifyContent: "flex-start",
              alignItems: "center",
              alignSelf: "center",
              flex: 1,
            }}
            backgroundColor={"#ecf0f1"}
            ref={this.swiper}
            onSwiped={(cardIndex) => this.onSwiped("general", cardIndex)}
            onSwipedLeft={(cardIndex) => this.onSwiped("left", cardIndex)}
            onSwipedRight={(cardIndex) => this.onSwiped("right", cardIndex)}
            cards={this.state.chars}
            cardIndex={this.state.cardIndex}
            cardVerticalMargin={20}
            disableTopSwipe={true}
            disableBottomSwipe={true}
            renderCard={this.renderCard}
            onSwipedAll={this.onSwipedAllCards}
            stackSize={3}
            stackSeparation={15}
            constainerStyle={{ height: 0 }}
            style={{ height: 0 }}
            cardStyle={{ height: 0 }}
            useViewOverflow={false}
            childrenOnTop={true}
            //allSwipedCheck={true}
            overlayLabels={{
              left: {
                element: <TriangleCornerTopRight />,
                style: {
                  label: {
                    backgroundColor: "black",
                    borderColor: "black",
                    color: "white",
                    borderWidth: 1,
                  },
                  wrapper: {
                    //flexDirection: 'column',
                    alignItems: "center",
                    justifyContent: "center",
                    marginTop: 30,
                    marginLeft: 145,
                  },
                },
              },
              right: {
                element: <TriangleCornerTopLeft />,
                style: {
                  label: {
                    backgroundColor: "black",
                    borderColor: "black",
                    color: "white",
                    borderWidth: 1,
                  },
                  wrapper: {
                    //flexDirection: 'column',
                    alignItems: "center",
                    justifyContent: "center",
                    marginTop: 30,
                    marginLeft: -145,
                  },
                },
              },
            }}
            animateOverlayLabelsOpacity
            animateCardOpacity
            swipeBackCard
          ></Swiper>

When I disable this property, no issues, the card stays completely opaque. That's an acceptable fix for me for now, but it would be nice to have working opacity animations.