3D flip Animation in react native

Question

I am researching on how to develop smooth flip transition of 3D Tiles. I have shared the sample UI for mobile app.UI.UX Tile Design

Till now I leanred following methods to do so, but before proceeding I wanted to have better and efficeint suggestions from the professionals;

1. Use color shades (dark and light )for 3d effect illusion and then perform animation according. But while fliping few frames will miss some information.
2. Use ThreeJs library to achieve 3d tile and then add rotation effect.

I am still in research phase, may find another efficient solution not compromising frames and performance.

I appreciate your time and consideration. Thanks in advance 💐

Answer 1

• First you need to import the necessary libraries & create a functional component for the 3D Tile:

  import React, {useRef} from 'react';
  import {View, StyleSheet, Animated} from 'react-native';
  
  const FlipTile = ({children}) => {
   const flipAnim = useRef(new Animated.Value(0)).current;
  
   const flip = () => {
    Animated.timing(flipAnim, {
     toValue: 1,
     duration: 500,
     useNativeDriver: true,
    }).start();
   };
  
   const rotateInterpolate = flipAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '180deg'],
   });
  
   const animatedStyle = {
    transform: [
     {rotateY: rotateInterpolate},
    ],
  };
  
  return (
   <View style={styles.container}>
     <Animated.View style={[styles.flipCard, animatedStyle]}>
       <View style={styles.flipCardInner}>
         <View style={styles.flipCardFront}>
           {children[0]}
         </View>
         <View style={styles.flipCardBack}>
           {children[1]}
         </View>
       </View>
     </Animated.View>
     <TouchableOpacity style={styles.flipButton} onPress={flip}>
       <Text style={styles.flipText}>Flip</Text>
     </TouchableOpacity>
    </View>
   );
  };
  

• use this component, simply import it and pass the children as an array containing the front and back faces of the tile.

  <FlipTile>
  {[
    <View style={styles.tileFront}>
      {/* Your front face content here */}
    </View>,
    <View style={styles.tileBack}>
      {/* Your back face content here */}
    </View>,
  ]}
  </FlipTile>