Create a Flip Card Animation with React Native

Share this video with your friends

Send Tweet

In this lesson we'll learn to use backfaceVisibility style property and rotateX to create a vertical flip animation, and rotateY to create a horizontal flip animation.

Chetan Kantharia
Chetan Kantharia
~ 7 years ago

My question is off-the topic. I just want to know what plugin are you using which reformats the arrow symbol

Rajat S
Rajat S
~ 7 years ago

Hi! For those who are testing it on Android, please note that backfaceVisibility doesn't work!

The only way to tackle this issue is to write the following in your componentWillMount() this.backOpacity = this.animatedValue.interpolate({ inputRange: [89, 90], outputRange: [0,1] } );

Then in your backAnimatedStyle, add this property: opacity: this.backOpacity,

Arno Lenin
Arno Lenin
~ 6 years ago

@chetan - User Fira Code font in the editor - it automatically formats fat arrow