Multiple components share frontRotation and backRotation

[louuysison]

When flipping a component, the values of frontRotation and backRotation are shared between all SwipeFlip components causing multiple rotations when trying to swipe other SwipeFlip components.

[aprct]

Hey, I can't seem to recreate this issue. Can you post a snippet of your code?

[louuysison]

Dashboard.js

...
render() {
  ...
  <ScrollView>
    <View style={styles.scrollView}>
      {blogs.map(blog => <Card blog={blog} key={Math.random()} />)}
    </View>
  </ScrollView>
  ...
}
...

Card.js

...
const Card = ({ blog }) => (
  <View style={styles.card}>
    <SwipeFlip
      style={{ flex: 1 }}
      front={<FrontView blog={blog} />}
      back={<BackView text={blog.info} />}
      onFlipped={val => {
        console.log(`Flipped:${val}`);
      }}
      flipEasing={Easing.out(Easing.ease)}
      flipDuration={1000}
      perspective={1000}
    />
  </View>
);

export default Card;

[aprct]

Hm... Still can't recreate it using this structure in RN 0.39. I know I'm a bit behind... If you want to submit a pull request I'd be happy to review it and merge. Maybe think about moving the out-of-component vars into state?

[louuysison]

I already have an update. I'll probably do a pull request tomorrow.

[k30r88]

Hi @louuysison I encountered same issues, Do you have solution to this ?