Want to create a flip card, but it won't flip

Viewed 64

I'm trying to create a Flip card, a simple one, but when I press to flip it won't, got the example from https://www.youtube.com/watch?v=ghLuM0ANOk4.

When I click the Flip button nothing happens, not even an error message

Here is the code

const [isFlipped, setIsFlipped] = useState(false);
  const animate = useRef(new Animated.Value(0));
  const frontRef = useRef();
  const backRef = useRef();

  const doAFlip = () => {
    Animated.timing(animate.current, {
      duration: 300,
      toValue: isFlipped ? 0 : 180,
      useNativeDriver: true,
    }).start(() => {
      
      setIsFlipped(!isFlipped);
    });
  };

  const interpolateFront = animate.current.interpolate({
    inputRange: [0, 180],
    outputRange: ['0deg', '180deg'],
  });

  const interpolateBack = animate.current.interpolate({
    inputRange: [0, 180],
    outputRange: [ '180deg', '360deg'],
  });

  const rotateFront = {
    transform: [
      {
        rotateY: interpolateFront,
      },
    ],
  };

  const rotateBack = {
    transform: [
      {
        rotateY: interpolateBack,
      },
    ],
  };

and here

<View>
        <Animated.View style={[rotateFront], {backfaceVisibility: 'hidden'}}>
          <View style={{backgroundColor: 'green', height: 60, width: 60}}/>

        </Animated.View>
        <Animated.View style={[rotateBack], {backfaceVisibility: 'hidden', position: 'absolute', top: 0}}>
        <View style={{backgroundColor: 'blue', height: 60, width: 60}}/>
          
        </Animated.View>
        <Button title='Flip' onPress={doAFlip}>Flip</Button>
      </View>````
0 Answers
Related