react-native-card-flip icon indicating copy to clipboard operation
react-native-card-flip copied to clipboard

[Android] Example app - card turns halfway then flips back

Open f6m6 opened this issue 6 years ago • 4 comments

Hi there :)

The card turns halfway, switches sides (correctly) but then instead of continuing to flip left to right, it flips back right to left.

So you end up in the correct state but the animation isn't a full flip.

It's like going halfway to turning the card over and then it magically changing what's on its front face, and then turning back - it breaks the illusion of a "card" existing and isn't the desired behaviour I think.

React Native 0.57

It works fine on iOS though

f6m6 avatar Nov 30 '18 16:11 f6m6

I modified the code:

if (Platform.OS === 'ios') {
        // cardB Y-rotation
        bYRotation = rotation.y.interpolate({
          inputRange: [0, 50, 100, 150],
          outputRange: ['0deg', '180deg', '0deg', '-180deg'],
          extrapolate: 'clamp'
        })
      } else {
        // cardB Y-rotation
        bYRotation = rotation.y.interpolate({
          inputRange: [0, 50, 100, 150],
          outputRange: ['0deg', '-180deg', '0deg', '180deg'],
          extrapolate: 'clamp'
        })
      }

weifengzz avatar Dec 25 '18 08:12 weifengzz

The above code fixed the issue for me.

jonaird avatar Jan 17 '19 22:01 jonaird

This is still an issue, certainly on android I don't know about ios.

rotation on 'x' axis works perfectly buy 'y' rotation is getting half way and then flipping back. I have the latest version but it still happens.

Update: I meant to say this works for 'y' and not for 'x', my mistake.

mikejsdev avatar Apr 04 '20 11:04 mikejsdev

@mikejsdev you can use my fork for this fix https://github.com/ARazaAnjum/react-native-card-flip

ARazaAnjum avatar Sep 28 '20 08:09 ARazaAnjum