[Style] Support backface-visibility style property on views.

For 3d animations with perspective, it is important to have backface-visibility.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility

cc @vjeux @sahrens

[vnil]

I’m using Animated.Views and I’ve been playing with the idea of animating the opacity as well. It seems to work ok for my use case, and the only thing Im doing is this:

this.backOpacity = this.animatedValue.interpolate({ inputRange: [89, 90], outputRange: [0, 1] })

and then use this for the animation

const backAnimatedStyle = { opacity: this.backOpacity,...}

The Animated.Value in my case goes from 0-180 (symbolising degrees). When I flip them back I go from 180 to 0, so thats why this solution is enough for my case.

So if your situation is similar to mine, maybe this will help for now.

[abdennour]

Thanks @vnil . I will expand your solution : You explained the backOpacity, still now frontOpacity … And it will be :

    this.frontOpacity = this.animatedValue.interpolate({
      inputRange: [89, 90],
      outputRange: [1, 0]
    });

    this.backOpacity = this.animatedValue.interpolate({
      inputRange: [89, 90],
      outputRange: [0, 1]
    });

Then: style={opacity: this.frontOpacity} goes with Card Face, and style={opacity: this.backOpacity} goes with Card Back.