How do you Flip the screen like a coin transition in react native?

Question

I am trying to make the screen flip like a coin when button pressed on it. What I have done up-till now is I have successfully flipped two small screens, but it comes to a bit large screen the code is not working. Like here in my code two simple buttons are working fine, but when I call view from other big screen, the view doesn't show up. I think it is because the view that will is flipped becomes invisible but remains on its place and other view can't be placed on that space, so when it comes to larger screen the whole thing doesn't show up. I am new to RN. Help.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated
} from 'react-native';
var screenWidth = require('Dimensions').get('window').width;
export default class animatedbasic extends Component {
  componentWillMount() {
    this.animatedValue = new Animated.Value(0);
    this.value = 0;
    this.animatedValue.addListener(({ value }) => {
      this.value = value;
    })
    this.frontInterpolate = this.animatedValue.interpolate({
      inputRange: [0, 180],
      outputRange: ['0deg', '180deg'],
    })
    this.backInterpolate = this.animatedValue.interpolate({
      inputRange: [0, 180],
      outputRange: ['180deg', '360deg']
    })
    this.frontOpacity = this.animatedValue.interpolate({
      inputRange: [89, 90],
      outputRange: [1, 0]
    })
    this.backOpacity = this.animatedValue.interpolate({
      inputRange: [89, 90],
      outputRange: [0, 1]
    })
  }

  flipCard() {
    if (this.value >= 90) {
      Animated.spring(this.animatedValue,{
        toValue: 0,
        friction: 8,
        tension: 10
      }).start();
    } else {
      Animated.spring(this.animatedValue,{
        toValue: 180,
        friction: 8,
        tension: 10
      }).start();
    }

  }

  render() {
    const frontAnimatedStyle = {
      transform: [
        { rotateY: this.frontInterpolate }
      ]
    }
    const backAnimatedStyle = {
      transform: [
        { rotateY: this.backInterpolate }
      ]
    }

    return (
      <View style={{ flex:1, justifyContent:'center', alignItems:'center'}} >
        <View >
          <Animated.View style={[styles.flipCard, frontAnimatedStyle, {opacity: this.frontOpacity}]}>

          </Animated.View>
          <Animated.View style={[styles.flipCard, styles.flipCardBack, backAnimatedStyle, {opacity: this.backOpacity}]}>
          <View>
             <TouchableOpacity onPress={() => this.flipCard()} style={{ width:(screenWidth/2), height:70, backgroundColor:'black'}}>
 <Text style={{color:'white', fontSize:22, fontWeight:'bold'}}>  I am on Back</Text>
                </TouchableOpacity>
             </View>
          </Animated.View>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({

  flipCard: {

    backfaceVisibility: 'hidden',
  },
  flipCardBack: {

    top: 0,
  },

});

I have also tried react-native-card-flip

Flipping.js

  render() {
        return (
          <CardFlip style={styles.cardContainer} ref={(card) => this.card 
            =card}>
          <FronEnd />
          <Backend />
        </CardFlip> }

FronEnd.js

 render()
    {
        return (
            <View>
                 <CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
            ....................................................
   <TouchableOpacity onPress={() => this.card.flip()}
</TouchableOpacity >
               </CardFlip>
            </View>
        );
    }
}

Backend.js

 render()
    {
        return (
            <View>
                <CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
            .......................
<TouchableOpacity onPress={() => this.card.flip()}
</TouchableOpacity >
               </CardFlip>
            </View>
        );
    }

so you wanted nested card flipping ? – Firdous nath Feb 21 '19 at 12:39 — Firdous nath, Feb 21 '19 at 12:39
where are you using flipping.js component ? – Firdous nath Feb 21 '19 at 13:07 — Firdous nath, Feb 21 '19 at 13:07
In a navigator. First Screen. – Mohsin Feb 21 '19 at 13:19 — Mohsin, Feb 21 '19 at 13:19

score 0 · Answer 1 · answered Feb 21 '19 at 11:30

You can use a npm module for this :

Installation :

npm install --save react-native-card-flip

Usage :

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


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

See Output

Npm module : Github

I am facing issues with the `height of the card which is static in styles` so how can we make dynamic? — Sagar, Jan 07 '20 at 10:08

How do you Flip the screen like a coin transition in react native?

1 Answers1