How can I fix the visible glitch in this flip animation – reproducible example included!

[nickpagee]

(reproducible example linked below and here)

Hi all
What’s up from 🇨🇦 – it’s everyone's fave social photo-sharing game built on Expo here, PhotoDare.ca

We have this flipping animation that was fine until Expo 50/51, where it started glitching:

fine.expo.49.glitchy.expo.51.mp4

That code used was this library (https://github.com/lhandel/react-native-card-flip), it worked PERFECTLY until Expo 50 - see video before and after. Spent a long time trying to fix it but can't.

We need expo51 to fix the android notifications bugs, so I tried using the Reanimated website's Flip Card Example and built this but i can't seem to find a way to not have the white flash in between them when fetching photos from device:

Example.FlipCard.App.iOS.Android.mov

it should flip a sequence of photos so it appears to be continuously flipping:

1. Flip 1, Side A: image 1
2. Flip 1, Side B: Image 2
3. Flip 2, Side A: Image 2 (makes it appear seamless)
4. Flip 2, Side B: Image 3
5. Flip 3, Side A: Image 3
6. Flip 3 Side B: Image 4
7. …and so on until the array is finished

I came really close but I can’t seem to fix this white flash that happens in between FlipCard renders.

REPRODUCIBLE EXAMPLE LINK: https://github.com/nickpagee/FlipCardTest

I included code in it that tests different ways of loading photos, without much success:

• tried upgrading to @latest for both Reanimated (3.14.0) and Expo (51.0.21) and it doesn’t help.
• tried compressing locally fetched assets down to 100kb each, made no difference! I was shocked at this.
• when loading image remotely and with ‘require’, they WILL sometimes work smoothly, but obviously we need these to load locally from the photo library
• tried ensuring preloading and double-buffering, but neither made any difference
• tried Expo Image vs Image, no difference

Weirdly, sometimes it works great when I used the require or http method of fetching photos (example in the demo app):

Simulator.Screen.Recording.-.iPhone.15.-.2024-07-28.at.10.28.29.mp4

So I know this animation CAN work like we need it to, but I've spent over a week trying things and can't make a breakthrough when using images loaded locally

If you want to see what it SHOULD look like running smoothly in Expo49, you can get the PhotoDare app on iOS or Android at photodare.ca – we can’t upgrade to 51 till we can fix this.

anyone have experience or opinions on how I can achieve this flipping effect smoothly?

THANKS! 🙌

[MatiPl01]

Hey!

Thanks for reporting the issue. Seem to be a bit tricky and I was not able to find the valid solution. I spent a while and the easiest way to get it working right is rendering the previous card with the current one and changing the opacity of the previous one to 0. The problem is caused by the re-render and it looks like the delay stems from the loading time of the image. When I replaced images to plain views with just a background color, there is no flickering, so I assume this is not related to reanimated.

This is my workaround I came up with which seems to remove flickering. There is one caveat, in this solution, you have to render 2 times more components.

const FlipCard2024 = ({ images }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleFlipEnd = index => {
    if (index < images.length - 2) {
      setActiveIndex(index + 1); // Activate next flip
    }
  };

  return (
    <View style={styles.container}>
      {images.slice(0, -1).map((_, index) => (
        <FlipCard
          key={index}
          index={index}
          activeIndex={activeIndex}
          frontImage={images[index]}
          backImage={images[index + 1]}
          onFlipEnd={() => handleFlipEnd(index)}
        />
      ))}
    </View>
  );
};

const FlipCard = ({ frontImage, backImage, activeIndex, index, onFlipEnd }) => {
  const animatedValue = useSharedValue(0);

  const frontAnimatedStyle = useAnimatedStyle(() => ({
    transform: [{ rotateY: `${animatedValue.value}deg` }],
    opacity: animatedValue.value % 360 <= 90 ? 1 : 0,
  }));

  const backAnimatedStyle = useAnimatedStyle(() => ({
    transform: [{ rotateY: `${180 + animatedValue.value}deg` }],
    opacity: animatedValue.value % 360 > 90 ? 1 : 0,
  }));

  useEffect(() => {
    if (activeIndex === index) {
      animatedValue.value = withTiming(180, { duration: 1500 }, () => {
        runOnJS(onFlipEnd)();
      });
    }
  }, [activeIndex, index]);

  return activeIndex === index || activeIndex === index - 1 ? (
    <View style={[styles.cardContainer, { opacity: activeIndex === index ? 1 : 0 }]}>
      <Animated.View style={[styles.card, frontAnimatedStyle]}>
        <Image source={{ uri: frontImage }} style={styles.image} />
      </Animated.View>
      <Animated.View style={[styles.card, backAnimatedStyle, { position: 'absolute' }]}>
        <Image source={{ uri: backImage }} style={styles.image} />
      </Animated.View>
    </View>
  ) : null;
};

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-29.at.17.27.16.mp4

[nickpagee]

Wow, thank you SO MUCH @MatiPl01 – i can't thank you enough for taking a little time to consider this issue.

I've just finished work and testing your code, and it does help a little to do this way. Like you said, it still isn't quite right, and I've noticed sometimes the images switch a little jarringly or out of sync but it's a greatly appreciated step in the right direction.

I did test compressing them down to only like a few Kb (really really bad quality) but even that wasn't enough to get rid of the flash

🤔 I wonder if maybe I should try to get rid of the re-renders altogether by creating a single flipcard that flips 6 times or something, almost like it has 6 sides, where i'd pass a single card all the images and it only renders once. Maybe this makes no sense, I can't really think how this would work.

If I can't make any progress I'll come back here and mark your above as the answer

Thank you again, hope to see you on Photodare sometime, it's great for learning about what life is like in other places, if you join il'l send you a photodare!

[nickpagee]

Thanks @MatiPl01 ! i'm still working through it – the reason it's taking this long is because we're developing a native photo-loading module to support the specific needs of our app.

I'm almost at the point now where I can see if I can implement this FlipGrid to replace our flipgrid, but I need to first complete the native module implementation because it may bring assets back in a specific format that the flipgrid doesn't like

our existing flipgrid code is quite complex and it's going to take me a while to figure out how to get a fresh solution implemented into the app logic

Thanks so much for your help and patience, I have this on my list to reply.

Thanks again

[MatiPl01]

Thanks for your reply. Let me know, once your new implementation is ready, if it works fine.

[nickpagee]

hey @MatiPl01 – been working on getting this improved and implemented, we can mark this resolved! We can't thank you enough!

you can check it out on PhotoDare on iOS and Android (these are the canadian links you might have to search your local country app store for photodare:)
https://apps.apple.com/ca/app/photodare/id6479333804

iOS: https://apps.apple.com/ca/app/photodare/id6479333804

Android: https://play.google.com/store/apps/details?id=ca.photodare.photodare&hl=en_US

or you can get it at https://photodare.ca

here's a video showing the animation Android and iOS

testing.animation.mov

[MatiPl01]

Hey @nickpagee!

It looks really stunning. Good to know that you managed to implement this.

[nickpagee]

Thanks again, you're the best - if you ever sign up lemme know i'll send you one!