BackfaceVisibility: hidden workaround for android in react native

user_5890903 0
Viewed 4017

I have a flashcard app I created in React Native. It's currently in the app store for iOS and I'm currently working on the Android version. (Flash Crash)

In the app the user can swipe up or down to flip a flash card. The problem is that it uses BackfaceVisibility: 'hidden' and Android doesn't seem to support it. Is there an effective solution to work around this?

The only one I can think of is to change the opacity of the Animated.View to 0 when a card is flipped at and over 90 degrees. I will probably do it this way, but I wanted to see if a better programmer had other possible solutions. I'd like to know what my options are for the future if not for now.

react-native
1 Answers

There is a solution to use opacity to control the display of the back surface to get a quick 'flippable' card on android here: https://github.com/facebook/react-native/issues/1973#issuecomment-262059217

Animate the back surface's opacity

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

then use this for the animation

style=[otherStyles, { opacity: this.backOpacity,...}]

backfacevisibility should be supported for android in a react-native stable version soon. https://github.com/facebook/react-native/pull/15970

user_36870170
Related