CODEWITHSUNDEEP
react-native
Funk Soul Ninja
Funk Soul Ninja

Reputation: 2193

BackfaceVisibility: hidden workaround for android in react native

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

Answers (1)

brookemitchell
brookemitchell

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

Related Questions