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

[chirag04]

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

[sahrens]

Can you PR it?

[chirag04]

I can def try this one. :D

Adding rotateX, rotateY, rotateZ first.

[chirag04]

done.

[syaau]

The backface-visibility: hidden does't work in Android.

[card-b]

Same here, backface-visibility: hidden has no effect on Android. It's definitely defined in ViewStylePropTypes.js, it just isn't doing anything.

[evollu]

any update?

[vnil]

Not working on Android for me either. Any working workaround at the moment?

[chirag04]

backface visibility is not supported on android. There was a PR for this: https://github.com/facebook/react-native/pull/6695. Feel free to send a new one based off of that PR.

[vnil]

Unfortunately I don't know Java, but thanks for the information and the link to the PR!

[zaoky]

Any working workaround for this ?

[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.

[romanenko]

Thanks, @vnil! Your workaround works amazingly well! It should become canonical, until backfaceVisibility is implemented in Android.

[elribonazo]

I got the same issue and the workarround is excelent... Thanks!!

[charpeni]

A PR for backface-visibility is here #15970!

[abdennour]

Great! @charpeni . but PR is failed by CI . Try to fix conflicts!

[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.

[Gringox]

Thanks @vnil works perfectly

[aaronksaunders]

@vnil @Gringox - does anyone have a complete example? I am trying to integrate this with multiple sequenced animations and i cannot get it all to work, thanks in advance