Flip card animation example is broken in iOS with Expo 52

[david-bermejo]

Description

As the title says, flip card animation example present in your page is broken in iOS with Expo 52. I am using it in one of my projects and the same happens.

The provided Snack project is the one present in your page as an example. When flipped, the back card face is visible on top during the animation, and that should not happen. This bug was not present in Expo 51 or previous versions. Other platforms are not affected.

Steps to reproduce

1. Open snack project
2. Make sure platform option is iOS and Expo version is 52.0.0
3. Click on Launch Snack

Snack or a link to a repository

https://snack.expo.dev/@bermejus/flip-card-%7C-react-native-reanimated?platform=ios

Reanimated version

3.16.1

React Native version

0.76.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

Fabric (New Architecture)

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[kristof-kovacs]

I am also experiencing this after Expo SDK 52 upgrade

[patrycjakalinska]

Hi @david-bermejo ! It looks like on newer releases backfaceVisibility works slightly different. Setting backfaceVisibility: 'hidden' on both cards should fix this issue:

      // ...
      
      <FlipCard
        isFlipped={isFlipped}
        cardStyle={styles.flipCard}
        FlippedContent={<FlippedContent />}
        RegularContent={<RegularContent />}
      />
      
      // ...
      
      const styles = StyleSheet.create({
         flipCard: {
          width: 170,
          height: 200,
          backfaceVisibility: 'hidden'
  },
});

[kristof-kovacs]

Hi @patrycjakalinska I tried that on both the cards and that has not fixed it. However in my implementation the cards are two separate modals with equal dimensions that I am flipping between. Their animated styles are below, as you can see the backfaceVisibility has always been 'hidden', and that used to work but no longer does

     const frontAnimatedStyle = useAnimatedStyle(() => {
        const rotateValue = interpolate(rotate.value, [0, 1], [0, 180]);
        return {
            transform: [
                { rotateY: `${rotateValue}deg` },
                { perspective: 1000 },
            ],
            backfaceVisibility: 'hidden',
            pointerEvents: rotate.value < 0.5 ? 'auto' : 'none',
        };
    }, [rotate]);

    const backAnimatedStyle = useAnimatedStyle(() => {
        const rotateValue = interpolate(rotate.value, [0, 1], [-180, 0]);
        return {
            transform: [
                { rotateY: `${rotateValue}deg` },
                { perspective: 1000 },
            ],
            backfaceVisibility: 'hidden',
            pointerEvents: rotate.value >= 0.5 ? 'auto' : 'none',
        };
    }, [rotate]);

[patrycjakalinska]

Hi @kristof-kovacs, could you provide a full snack or some code source, so I can look into that?

[kristof-kovacs]

Really appreciate you taking the time to look into it @patrycjakalinska. The most productive thing for me to show you here is the rendering logic of the modals. Both modals that make up the card, as well as the screen in which they are rendered are massive files so not too comfortable sharing them in full here.

Here is the style, as well as the function that flips the card:

const frontAnimatedStyle = useAnimatedStyle(() => {
        const rotateValue = interpolate(rotate.value, [0, 1], [0, 180]);
        return {
            transform: [
                { rotateY: `${rotateValue}deg` },
                { perspective: 1000 },
            ],
            backfaceVisibility: 'hidden',
            pointerEvents: rotate.value < 0.5 ? 'auto' : 'none',
        };
    }, [rotate]);

    const backAnimatedStyle = useAnimatedStyle(() => {
        const rotateValue = interpolate(rotate.value, [0, 1], [-180, 0]);
        return {
            transform: [
                { rotateY: `${rotateValue}deg` },
                { perspective: 1000 },
            ],
            backfaceVisibility: 'hidden',
            pointerEvents: rotate.value >= 0.5 ? 'auto' : 'none',
        };
    }, [rotate]);

    const triggerFlip = () => {
        rotate.value = withTiming(rotate.value === 0 ? 1 : 0, { duration: 500 });
    };

and here is the rendering of the two different card views with the frontFlipCard and backFlipCard

<Modal
                animationType="slide"
                transparent={true}
                visible={isModalVisible}
                onRequestClose={() => {
                    setIsModalVisible(!isModalVisible);
                }}
            >
                <BlurView style={styles.fullScreen} intensity={50} tint="dark">
                    <View style={styles.animationContainer}>
                        <Animated.View style={[styles.frontFlipCard, frontAnimatedStyle]}>
                            <FinishedBooksFrontModal
                                book={book}
                                userDetails={currentUser.userDetails}
                                setIsModalVisible={setIsModalVisible}
                                triggerFlip={triggerFlip}
                                startDate={startDate}
                                setStartDate={setStartDate}
                                endDate={endDate}
                                setEndDate={setEndDate}
                                reviewText={reviewText}
                                setReviewText={setReviewText}
                                isSilent={isSilent}
                                setIsSilent={setIsSilent}
                                isAudio={isAudio}
                                setIsAudio={setIsAudio}
                                isAudioDisabled={isAudioDisabled}
                                isSpoiler={isSpoiler}
                                setIsSpoiler={setIsSpoiler}
                            />
                        </Animated.View>
                        <Animated.View style={[styles.backFlipCard, backAnimatedStyle]}>
                            <FinishedBooksBackModal
                                book={book}
                                triggerFlip={triggerFlip}
                                reviewText={reviewText}
                                setReviewText={setReviewText}
                                isSpoiler={isSpoiler}
                                setIsSpoiler={setIsSpoiler}
                            />
                        </Animated.View>
                    </View>
                </BlurView>
            </Modal>

and finally, the relevant styles

animationContainer: {
        position: 'relative',
        width: '80%',
        height: '80%',
    },
    frontFlipCard: {
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        backfaceVisibility: 'hidden'
    },
    backFlipCard: {
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        backfaceVisibility: 'hidden',
        position: 'absolute',
        backfaceVisibility: 'hidden'
    },

[david-bermejo]

Hi @david-bermejo ! It looks like on newer releases backfaceVisibility works slightly different. Setting backfaceVisibility: 'hidden' on both cards should fix this issue:

      // ...

      

      <FlipCard

        isFlipped={isFlipped}

        cardStyle={styles.flipCard}

        FlippedContent={<FlippedContent />}

        RegularContent={<RegularContent />}

      />

      

      // ...

      

      const styles = StyleSheet.create({

         flipCard: {

          width: 170,

          height: 200,

          backfaceVisibility: 'hidden'

  },

});

Wow it really solved my problem, thank you for your time!