Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
f6m6 opened this issue Nov 30, 2018 · 4 comments
Open

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

f6m6 opened this issue Nov 30, 2018 · 4 comments

Comments

@f6m6
Copy link

f6m6 commented Nov 30, 2018

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 f6m6 changed the title Doesn't work on some platforms - nesting an issue? [Android] Example app - card turns halfway then flips back Dec 5, 2018
@weifengzz
Copy link

weifengzz commented Dec 25, 2018

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'
        })
      }

@jonaird
Copy link

jonaird commented Jan 17, 2019

The above code fixed the issue for me.

@mikejsdev
Copy link

mikejsdev commented Apr 4, 2020

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.

@ARazaAnjum
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants