Page keep blinking when move to third page

[Rookie91-ReactNative]

Hi,

I'm new in React-Native.
I'm using the FlipY effect on my application.
Everythings running ok on Android version.
But when I tried to run on Ios version, when I navigate to the third page.
The page will keep blinking.

Example: Home Page > Login Page > Verification Page.

If I remove the effect, the page will not be blinking.

May I know how to solve this issue?
Thanks a lot

[karam1ashqar]

I have this issue too

[metahexane]

Experiencing the same issue on an iPhone 6s. The screen straightup flickers. I even see some traces of previous screens.

[CryceTruly]

Hey guys anyone working to fix this?

[darrenyaoyao]

I found the problem can be solved by adding opacity in transitionConfig.

  transitionSpec: {
    duration: 2000,
    easing: Easing.out(Easing.poly(4)),
    timing: Animated.timing,
    useNativeDriver: true
  },
  screenInterpolator: ({ position, scene }) => {
    const { index } = scene;
    const rotateY = position.interpolate({
      inputRange: [index - 1, index],
      outputRange: ["180deg", "0deg"]
    });

    const opacity = position.interpolate({
      inputRange: [index - 1, index, index + 1],
      outputRange: [0, 1, 0]
    });

    return {
      opacity,
      transform: [{ rotateY }],
      backfaceVisibility: "hidden"
    };
  }

[fawazahmed-makeen]

Excellent fix @darrenyaoyao

const flipY = duration => ({
  transitionSpec: {
    duration,
    easing: Easing.out(Easing.poly(4)),
    timing: Animated.timing,
    useNativeDriver: true
  },
  screenInterpolator: ({ position, scene }) => {
    const { index } = scene;
    const rotateY = position.interpolate({
      inputRange: [index - 1, index],
      outputRange: ["180deg", "0deg"]
    });

    const opacity = position.interpolate({
      inputRange: [index - 1, index, index + 1],
      outputRange: [0, 1, 0]
    });

    return {
      opacity,
      transform: [{ rotateY }],
      backfaceVisibility: "hidden"
    };
  }
});