lhandel / react-native-card-flip Goto Github PK

Would love to have the option to flip the other way. Anyone know how I would go about doing this with the code?

Hello,

Is it possible to publish to npm a version of this package with the latest commits/merges ?
The last npm version is now a year old.

Thanks !

Hello,

First of all - thanks for the great library which allows to have some nice animation without actually understanding how the animations work :)

I have an issue, though. In the examples provided, the height of the card is always set explicitly. Is it possible to have it dynamic? When I try that, the child container renders with the height 0.

Here is the snack where everything works fine (switch to iOS):
https://snack.expo.io/S1GXtV5zS

Here is the snack where I remove height from the card (switch to iOS):
https://snack.expo.io/BkSrK4qMB (you don't see anything)

In my app I don't know the height of the card upfront and can not calculate it based on the screen dimensions.

This also can be a reason for this issue: #3, however no reproduceble example was provided there.

Would appreciate any help or suggestions.

Regards,

I want to use the card flip in my components did mount method to set the initial state of the cards.
The problem is that the animation is too slow.
I found out that it was because of this in CardFlip.js

this.state ={
      duration: 5000,
      side: 0,
      sides: [],
      progress: new Animated.Value(0),
      rotation: new Animated.ValueXY({x: 50, y: 50}),
      zoom: new Animated.Value(0),
      rotateOrientation: '',
      flipDirection: 'y'
    }

The default duration is set to 5000 and wasn't respecting the duration I was setting in the CardFlip property.
I had to manually change it to 1000 but it would be better if this could be fixed in the official code.

This only happens if I use card.flip() in the componentDidMount of my component. In any other case it works as expected

This is the perfect lib for my use case in a production app, where my card(s) have dual animation - the same card can jiggle, as well as flip depending on based on a condition/state.

Unfortunately, after implementing CardFlip I realised that jiggle (and tip as well) only work well on the front face of the card. If we apply jiggle/tip to the back of the card, it jitters heavily (and on web, simply fails to execute the animation).

To repro, try this:

import React from 'react';
import {
  TouchableOpacity,
  StyleSheet,
  View,
  Text,
} from 'react-native';

import CardFlip from 'react-native-card-flip';

const App = (props) => {
  return (
    <View style={styles.container}>
      <CardFlip style={styles.cardContainer} ref={card => (this.card = card)}>
        <TouchableOpacity
          activeOpacity={1}
          style={[styles.card, styles.card1]}
          onPress={() => this.card.flip()}>
          <Text style={styles.label}>AB</Text>
        </TouchableOpacity>
        <TouchableOpacity
          activeOpacity={1}
          style={[styles.card, styles.card2]}
          onPress={() => this.card.jiggle()}>
          <Text style={styles.label}>CD</Text>
        </TouchableOpacity>
      </CardFlip>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  cardContainer: {
    width: 320,
    height: 470,
  },
  card: {
    width: 320,
    height: 470,
    backgroundColor: '#FE474C',
    borderRadius: 5,
    shadowColor: 'rgba(0,0,0,0.5)',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
  },
  card1: {
    backgroundColor: '#FE474C',
  },
  card2: {
    backgroundColor: '#FEB12C',
  },
  label: {
    lineHeight: 470,
    textAlign: 'center',
    fontSize: 55,
    fontFamily: 'System',
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});

export default App;

Any suggestions ?

The title sort of says it all. When using React Native 0.46.0, the card flip animation will start and then the card will disappear until the animation is completed and the card is flipped. If anyone has a work around or a fix, that would be much appreciated.

We're using this awesome library in our project - our user love it!

We want to upgrade to Expo 49 but are stuck - would you consider upgrading to the latest versions of react & react-native and publishing to NPM again? You're only dependencies... ;-D

When I do npm i in my project, I get:

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0-beta.5" from [email protected]
npm ERR! node_modules/react-native-card-flip
npm ERR!   react-native-card-flip@"1.0.7" from the root project

In android touchs in butons not working, the screen stops response.

The cart itself works but we can't see the text?

          <TouchableOpacity onPress={() => this.card.flip()} style={styles.card}>
            <Text style={styles.text}>ADDDDDDDDDDDDDDDB</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.card.flip()} style={styles.card}>
            <Text style={styles.text}>CDDDDDDDDDDDDDDDD</Text>
          </TouchableOpacity>
        </CardFlip>

my style

  container: {
    flex: 1,
  },
  cardContainer: {
    width: 150,
    height: 150,
    backgroundColor: '#f00',
    padding: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  card: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white',
  },
})

Back of card with flipDirection="x" shows mirrored and upside down.

Example:

In npm audit, i have noticed node-fetch version in this library has security vulnarablities. Can you please upgrade to version 3.1.1 or 2.6.7?

Flipping from the right instead of the left need help with that

A warning is displayed when this component is used. componentWillReceiveProps has been deprecated

"Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder."

Hi,

In your Examples directory, the source code listed there contains the header, a license from Facebook, which includes their Patent Provision clause, but no other indication where the code originates from. Can you clarify from which projects this code comes from?

Thanks

This is what happens when you flip the card during a tip() animation

Hello,

as I am using Typescript for developing, I had to type this module so it is usable with linting.
Maybe it is helpful for others, here is the code:
`

declare module "react-native-card-flip" {
import { StyleProp, ViewStyle } from "react-native";

interface Card {
    /**
     * Flips the card
     */
    flip: () => void;

    /**
     * Flips the card
     * @default { direction: 'left', progress: 0.05, duration: 150 }
     */
    tip: (direction: 'y'|'x', progress: number, duration: number) => void;

    /**
     * Jiggles the card
     * @default { count: 2, duration: 200, progress: 0.05 }
     */
    jiggle: (count: number, duration: number, progress: number) => void;
}
interface Props {
    /**
     * container style	
     * @default {}
     */
    style?: StyleProp<ViewStyle>;

    /**
     * flip duration
     * @default 1000
     */
    duration?: number;

    /**
     * zoom level on flip
     * @default 0.09
     */
    flipZoom?: number;

    /**
     * the rotation axis. 'x' or 'y'
     * @default 'y'
     */
    flipDirection?: 'y'|'x';

    /**
     * @default 800
     */
    perspective?: number;

    ref?: (card: Card) => void;
    children?: any;
    /**
     * function to be called when a card is fliped. it receives the card-sides index
     */
    onFlip?: () => void;
    /**
     * function to be called when the flip-animation starts. it receives the card-sides index
     */
    onFlipStart?: () => void;
    /**
     * function to be called when the flip-animation ends. it receives the card-sides index
     */
    onFlipEnd?: () => void;
}
export default function CardFlip(props: Props): JSX.Element;

}

`

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

I need this npm module in a project and just tried it before using by copying the code provided in the example, my App.js is simple and looks like this: `import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import CardFlip from 'react-native-card-flip';

export default class App extends React.Component {
render() {
return (

<CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
<TouchableOpacity style={styles.card} onPress={() => this.card.flip()} >AB
<TouchableOpacity style={styles.card} onPress={() => this.card.flip()} >CD


);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
`

But on simulator it gives the following error:
ReferenceError: bYRotation is not defined

and it marks the following lines:
` });
262 | } else {
263 | // cardB Y-rotation

264 | bYRotation = rotation.y.interpolate({
| ^ 265 | inputRange: [0, 50, 100, 150],
266 | outputRange: ["0deg", "-180deg", "0deg", "180deg"],
267 | extrapolate: "clamp"`

I am guessing it's some issues with the this module.

i am havng a flat list in which i had take 8 cards on which flip animation is performing. but it is only working on 5 cards on adding another card it is showing "toValue" error without any description.

While I try to install package, it gives this error:

`

• npm ERR! code ERESOLVE
• npm ERR! ERESOLVE unable to resolve dependency tree
• npm ERR!
• npm ERR! While resolving: undefined@undefined
• npm ERR! Found: [email protected]
• npm ERR! node_modules/react-native
• npm ERR! react-native@"~0.63.4" from the root project
• npm ERR!
• npm ERR! Could not resolve dependency:
• npm ERR! peer react-native@"^0.49.1" from [email protected]
• npm ERR! node_modules/react-native-card-flip
• npm ERR! react-native-card-flip@"*" from the root project
• npm ERR!
• npm ERR! Fix the upstream dependency conflict, or retry
• npm ERR! this command with --force, or --legacy-peer-deps
• npm ERR! to accept an incorrect (and potentially broken) dependency resolution
  .`