While using FlipCard with flat list it animates all the rendered images on click of any one image.

can you update npm package ?

REF:
facebook/react-native#5931
facebook/react-native#2103

Hi!
I’d like to start with side A sometimes, and sometimes with side B. If I understand right, I can do it with flip? I’ve tried it but it does seem to have any affect.

Am I missing something?

If you look at this gif , you can see that the animation in contained within the dimension of the parent.

But on iOS there's no problem.

I would say it's a perspective problem, but there are none on my card. Only some friction

Hi!

My FlipCard has an animated style prop which animates margins and height in order to make it grow when flipped. When upgrading from my current version (3.4.1) to the latest version, I get a React Native error which complains about these animated values, stating something similar to: "marginHorizontal is not an animateable value". This is what the declaration looks like:

<FlipCard
friction={10}
perspective={1000}
flipHorizontal={true}
flipVertical={false}
flip={this.state.isFlipped}
clickable={false}
style={cardWrapper(this.state.horGrowAnim, this.state.botGrowAnim)}
onFlipped={(isFlipped)=> this.onFlip(isFlipped)}>

Thanks for any help/advice.

Thank you for grate component, but i have a problem.
When many (2 times and more) times tap on card - flip doesn't respond, no flip animations and doesn't change state. And its only on device (Nexus 4, iPhone 5), on simulator all work fine. And it stuck on back side.

I copied and run an example from this project have found next bug: the back side of the card is blured.

Does anybody know the problem? I'm trying to figure out it...

Platform: IOS
react-native v 47.1
react-native-flip-card v 3.5.1

Hi,
I'm using this component to make like a deck with cards and on the first render, it render both face one over the other. The problem I have is that the face up of the card is an Image, until it renders it, we can see the bottom face. Not for a long time, but it's like a flash (bottom card is white on a black background, so it's quite visible)

Shouldn't the component render only 1 of both child at the time and halfway throw the animation it render the second child. It would create the illusion of having 2 side, but only one is rendered?

Thanks

Is it has a way to hide/show instead re-render the component always when I flip it?
I have a figure on both side of card, then in low-end phones it take a few seconds to re-render the card, specially images.

Uses componentWillReceiveProps which is deprecated (https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops) though there should be no problem just replacing it with componentDidUpdate - thoughts?

I am using this React Native component in my project. My need is to set value of clickable prop to false once flipend of the same card. Is this functionality this component provides or not.

I am not able to use this library for some reason.
npm i --save react-native-flip-card get stuck at loadRequestedDeps: sill install loadAllDepsIntoIdealTree.
I am able to install other libraries just fine.

I'm seeing the backside of my flip-cards showing a mirror image as identified here. But this seems to have surfaced with RN 0.42.0 as noted in the PR below. If I undo this PR, the backside renders correctly.

facebook/react-native#11992

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-flip-card/lib/FlipCard.js b/node_modules/react-native-flip-card/lib/FlipCard.js
index c496da7..991dc21 100644
--- a/node_modules/react-native-flip-card/lib/FlipCard.js
+++ b/node_modules/react-native-flip-card/lib/FlipCard.js
@@ -8,9 +8,13 @@ import {
   TouchableOpacity,
   Animated,
   Platform,
-  ViewPropTypes
+  
 } from "react-native";
 
+import { 
+  ViewPropTypes
+} from 'deprecated-react-native-prop-types';
+
 import S from './Style.js'
 
 export default class FlipCard extends Component {

This issue body was partially generated by patch-package.

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the FlipCard component.

Any solution please..

Hi there,

Do you know why the content within the card flashes (hides then reappears instantly) after the transform animation starts (and also right before the animation ends)?

High quality webm - https://gfycat.com/SplendidCompetentEnglishpointer

Low quality gif:

Not at all an issue. Rather a message to anyone that has wanted to use this when using TypeScript.

DefinitelyTyped/DefinitelyTyped#30166

Hello,

Thanks for this library its really helpful, however when I flip the card, it re-flips automatically, is there a way to stop it from re-flipping? And only manually flip?

I'm still new to react native but shouldn't TouchableOpacity have the style flex: 1?
https://github.com/moschan/react-native-flip-card/blob/master/lib/FlipCard.js#L164

My cards are not showing right now (Unless I set clickable={false}) or I apply alignItems: 'center' to the container, like in the example)

Hello,

When I'm using your module I got reverse Back side like this: http://puu.sh/teurK/62d7f2dd04.png

Any idea ?

Thanks !

Hello, help me please with the function onFlipStart, i don't understand the scenario when it could be implemented, because it seems it's not possible to call setState in it. (because of endless loop).
I'm trying to hide the content of the card when the flip starts because my two sides have different heights.

Hey!

First, thanks for this awesome component!

I have a small question: I’d like, when the button is tapped, to issue a request. While the request is on the fly, I’d like the button to keep flipping; if the request was successfully -> flip to the other side; else, stay in the original side.

Do you have an idea how can I achieve this?

Thanks!

It was okay until RN0.49, but after I upgraded app to RN0.50 or RN0.51 friction doesn't work.

I used to set friction 36 to make flip animation slower, but it doesn't work and flips so fast after i upgraded app.

Any solutions? Anyone who experience the same thing as mine?

when you put this in a hidden element like accordion there's an error in rendering issue, the card is not showing

I have the below code:

<FlipCard
flip={false}
friction={20}
perspective={1000}
flipHorizontal={false}
flipVertical={true}
clickable={true}

handleCT = (v) => this.setState({ value: v })

So when I click a button inside and do a setState({ }); the card flips back to original position (flips back and shows content of ) rather than retaining current positions.

Please help me solve this bug

I'm using this library for my personal project. It's working great, but there's no option to persist state when flipping, isn't it?

Love the component!

Currently the card flips to the right, then flips back to the left.

It would be extremely useful for my project (and many others, I'm sure) if we could specify which direction to flip based on which direction the user swiped.

I already have the swipe detection working and now all we need is the card flip direction implemented.

Thanks!

My version is "react-native-flip-card": "^3.3.6"
<View style={{flex:1}}> <FlipCard> <View> <Text>The Face</Text> </View> {/* Back Side */} <View> <Text>The Back</Text> </View> </FlipCard> </View>

In the previous version, everything worked, what is the problem?

When I set the perspective to 0 it works as expected on iOS but Android doesn't seem to change. It seems to be on a really high value.

  "dependencies": {
    "react": "15.3.1",
    "react-native": "0.32.0",
    "react-native-drawer": "^2.3.0",
    "react-native-flip-card": "^3.3.1",
    "react-native-router-flux": "^3.35.0",
    "react-native-sound": "^0.8.3",
    "react-native-swiper": "^1.4.11",
    "realm": "^0.14.3"
  }

class Cards extends Component {
  render() {
    return (
      <FlipCard
        style={styles.card}
        friction={18}
        perspective={0}>
        <View>
        </View>
        <View>
          <Text style={styles.text}>
            {this.props.text}
          </Text>
        </View>
      </FlipCard>
    );
  }
}

const styles = StyleSheet.create({
  card: {
    flex: 1,
    backgroundColor: '#EBEBEB',
    padding: 20,
    borderRadius: 5,
    borderWidth: 0,
  text: {
    color: 'black',
    fontSize: 18
  },
});

I've got this warning: Warning: Failed prop type: FlipCard: prop type 'style' is invalid; it must be a function, usually from React.PropTypes.
RN: 0.40.0

Hello!

I just sent a test build to a colleague who discovered that the backside of the cards does not render on the Huawei Honor 8. I did some research and apparently there is a problem with transform scales having a negative value on new Huawei devices. (or something similar, i'm a newbie so I might of course be wrong). Is this fixed in 3.5.0? I'm currently on 3.4.1, but can't upgrade due to another error which I posted an issue about earlier today.

thanks!

You are declaring the style prop twice and it's broken this component on android and every component that uses it.

I have this issue on Android that when I flip the card, the text stays and gets flipped, then like a second later it switches to the backside. This issue happens just by running the demo code. For iPhone, it flips correctly showing the right content. does anyone else have this issue?

Getting the below error at random times.

Here are the steps to reproduce the error.

➜ demo-flip-card react-native --version
react-native-cli: 0.2.0
react-native: n/a - not inside a React Native project directory

➜ react-native init DemoFlipCard
This will walk you through creating a new React Native project in /Users/alan/Sandbox/demo-flip-card/DemoFlipCard
Installing react-native package from npm...
Setting up new React Native app in /Users/alan/Sandbox/demo-flip-card/DemoFlipCard
[email protected] /Users/alan/Sandbox/demo-flip-card/DemoFlipCard
└── [email protected]

To run your app on iOS:
cd /Users/alan/Sandbox/demo-flip-card/DemoFlipCard
react-native run-ios

• or -
  Open /Users/alan/Sandbox/demo-flip-card/DemoFlipCard/ios/DemoFlipCard.xcodeproj in Xcode
  Hit the Run button
  To run your app on Android:
  Have an Android emulator running (quickest way to get started), or a device connected
  cd /Users/alan/Sandbox/demo-flip-card/DemoFlipCard
  react-native run-android

➜ DemoFlipCard npm i --save react-native-flip-card
[email protected] /Users/alan/Sandbox/demo-flip-card/DemoFlipCard
└── [email protected]
➜ DemoFlipCard npm --version
3.8.3
➜ DemoFlipCard node --version
v5.10.1

*** Edit/Added index.io.js
import FlipCard from 'react-native-flip-card'

*** Update Render /w Simple example on Git

<FlipCard>
  {/* Face Side */}
  <View style={styles.face}>
    <Text>The Face</Text>
  </View>
  {/* Back Side */}
  <View style={styles.back}>
    <Text>The Back</Text>
  </View>
</FlipCard>

From IOS Simulator ( react-native run-ios )

Error in simulator: Super expression must either be null or a function, not undefined

From chrome javascript console.

ExceptionsManager.js:61Super expression must either be null or a function, not undefinedhandleException @ ExceptionsManager.js:61
ExceptionsManager.js:61Module AppRegistry is not a registered callable module.handleException @ ExceptionsManager.js:61
ExceptionsManager.js:76Unhandled JS Exception: Super expression must either be null or a function, not undefinedreactConsoleError @ ExceptionsManager.js:76
ExceptionsManager.js:76Unhandled JS Exception: Module AppRegistry is not a registered callable module.reactConsoleError @ ExceptionsManager.js:76

I've noticed when I have alignHeight set to true some front faces load then hide and I see the back face backwards (like the front is invisible). If I click, then the face shows, but I have to click them all every time.

If I remove alignHeight, then it works as expected.

Any help is appreciated as I have a photo on front and bio on back (varying heights).

Hi,
Thank you for the component.
I'm building an articles app.
I'm intending to use this component as a share context menu, means when the user long-presses the card, it would flip to sharing stuff (whatsapp, fb, gmail, etc.)

I figured out how to change the behavior on LongPress, but my problem is that I want to preserve the card height on LongPress so the user would not see any 'jumps' in the layout that would get him out of context.

Of course, the card height depends on the elements inside.

Is there any possibility to preserve the card height on flip, after the card content has been rendered?
Thanks.

If i flip the card will be error Invariant Violation: Transform with key of "perspective" cannot be zero: {"perspective":0}, that's bug ?

And ideas on how to create a component to switch between a collection of data like in the app Flipboard using this component?

Thanks for putting this component together!

If you can even show me where to add this prop I'll be happy to send a pull request. Thanks

If you npm install react-native-flip-card, you get an extra directory, node_modules/react-native-flip-card/example/ios/build, which weighs 150MB. It looks like an artifact of having run npm publish in a non-clean working directory. It'd be good to publish a new release to npm without the unintentional baggage.

is there a way to do it?

What I want to do is click a button and flip several cards. But there is no animation if I update property - flip, however card is flipped.

Thanks for building this repo!

If I add style to my <FlipCard> element and use the clickable FlipCard, styles like width: '100%' won't be passed to the FlipCard element as expected because TouchableOpacity is wrapping the FlipCard element without any style attribute:

    <TouchableOpacity
      testID={this.props.testID}
      activeOpacity={1}
      onPress={() => { this._toggleCard(); }}
    >
      <Animated.View
        {...this.props}
        style={[
          S.flipCard,
          {
            transform,
            opacity,
          },
          this.props.style
        ]}
      >
        {render_side}
      </Animated.View>
    </TouchableOpacity>

My use case is that I want my FlipCard element to span 100% of a surrounding View that has flex:1 set.

I'd be happy to submit a PR if there's a suitable solution. One option that would work from my perspective is to simply add a touchableFlipCardContainer style prop to the FlipCard element. That adds a little complexity so it would be great to hear if there's a better alternative!

I am using this React Native component in my project. My need is to set value of clickable prop to false once flipend of the same card. Is this functionality this component provides or not.

When I use Flipcard on IOS, animation looks good but on Android, i can't see anything about animation or Back view :(

i just tested on LG and Samsung Grand Prime, and Moto G, clickable is not working!