react-native-animatable icon indicating copy to clipboard operation
react-native-animatable copied to clipboard

useNativeDriver with Opacity causes Android element to show during Native UI

Open alexborton opened this issue 4 years ago • 2 comments

If i add a useNativeDriver on an animation view with opacity as the transition, the View will show instantly when a native UI is engaged (Android only).

For example, if you trigger Share.share() an element previously "hidden" with Opacity at 0 becomes instantly visible (no transition).

<Animatable.View
      transition="opacity"
      style={{
        ...styles.animated,
        ...(showStatus ? styles.animatedShow : null),
      }}
      /useNativeDriver
      duration={300}
      pointerEvents={!showStatus ? 'none' : null}
    >
    ....
</Animatable.View>

...

const styles = {
  animated: {
    opacity: 0,
  },
  animatedShow: {
    opacity: 1,
  },
}

Removing useNativeDriver from the animating view "fixes" the issue, but you lose the benefit of the native driver.

alexborton avatar Jun 22 '20 14:06 alexborton

Same here! Any update about the issue?

obiwankenoobi avatar Feb 13 '22 12:02 obiwankenoobi

This sounds like a React Native bug to me, would you mind reporting it there?

oblador avatar Feb 13 '22 17:02 oblador