Reputation: 2193
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.
Upvotes: 3
Views: 5211
Reputation: 819
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
Upvotes: 3