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>````