Issues with my coinFlip Animation

Questions
, , ,
1

Hey there, i want to write a Coin Flip Animation, using React Native and Expo

i have the
**ThrowCoin.tsx

// ThrowCoin.tsx

import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { Text, View } from "../Themed";
import ThemedButtonInput from "../ThemedButton";
import CoinAnimation from "./CoinAnimation/CoinAnimation";

interface ThrowCoinProps {
  language?: string;
}

const ThrowCoin: React.FC<ThrowCoinProps> = ({ language = "english" }) => {
  const [coinTossResult, setCoinTossResult] = useState<"head" | "num" | null>(null);

  const handleCoinToss = () => {
    const result = Math.random() < 0.5;
    setCoinTossResult(result ? "head" : "num");
  };

  return (
    <View style={styles.container}>
      <Text>{coinTossResult === "head" ? "Kopf" : "Zahl"}</Text>
      <CoinAnimation />
      <ThemedButtonInput onButtonPressed={handleCoinToss}>
        Throw Coin
      </ThemedButtonInput>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    flex: 1,
    borderColor: "#ccc",
    borderRadius: 10,
    borderWidth: 5,
    padding: 20,
  },
  resultText: {
    fontSize: 24,
    marginVertical: 20,
  },
});

export default ThrowCoin;

and the

CoinAnimation.tsx

// CoinAnimation.tsx

import React, { useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import Coin from './Coin';
import { THREE } from 'expo-three';

const CoinAnimation = () => {
    const coinRef = useRef<THREE.Mesh>(null);

    // Animation Funktion
    useFrame(() => {
        if (coinRef.current) {
            // Münze drehen
            coinRef.current.rotation.x += 0.1;
            coinRef.current.rotation.y += 0.1;

            // Auf- und Abbewegung der Münze
            coinRef.current.position.y = Math.sin(coinRef.current.rotation.y) * 0.5; // Für eine einfache Animation
        }
    });

    return (
        <Canvas style={{ height: '300px', width: '300px' }}>
            <ambientLight intensity={0.5} />
            <pointLight position={[10, 10, 10]} />
            <Coin 
                ref={coinRef} // Ref wird hier übergeben
                head_text="Kopf"
                back_text="Zahl"
                face_inner_circle_color="#FFFFFF" // Weißer Innencircle
                face_inner_circle_offset={5} // Größe des Innencircles
                coin_height={2} coin_size={15}             />
        </Canvas>
    );
};

export default CoinAnimation;

and the actual

Coin.tsx

// Coin.tsx

import React from 'react';
import { Text } from '@react-three/drei';
import { THREE } from 'expo-three';

interface CoinData {
    head_text?: string;
    back_text?: string;
    coin_height?: number;
    coin_size?: number;
    side_color?: string;
    face_color?: string;
    face_inner_circle_color?: string;
    face_inner_circle_offset?: number;
}

// Verwendung von React.forwardRef um den Ref für die Animation zu übergeben
const Coin = React.forwardRef<THREE.Mesh, CoinData>(({
    head_text = "Kopf",
    back_text = "Zahl",
    coin_height = 3, 
    coin_size = 15,
    side_color = "#FFD700",  // Gold
    face_color = "#FFD700",  // Gold
    face_inner_circle_color = "#FFFFFF", // Innencircle Farbe
    face_inner_circle_offset = 5, // Offset für den Innencircle
}, ref) => {
    return (
        <mesh ref={ref}>
            {/* Äußere Münze */}
            <cylinderBufferGeometry args={[coin_size / 2, coin_size / 2, coin_height, 32]} />
            <meshStandardMaterial color={side_color} />
            
            {/* Kopfseite Text */}
            <Text position={[0, 0, coin_height / 2 + 0.1]} fontSize={0.5} color={face_color}>
                {head_text}
            </Text>
            {/* Zahlseite Text */}
            <Text position={[0, 0, -coin_height / 2 - 0.1]} fontSize={0.5} color={face_color}>
                {back_text}
            </Text>

            {/* Innencircle */}
            <mesh position={[0, 0, 0]}>
                <cylinderBufferGeometry args={[face_inner_circle_offset, face_inner_circle_offset, coin_height, 32]} />
                <meshStandardMaterial color={face_inner_circle_color} />
            </mesh>
        </mesh>
    );
});

export default Coin;

now i cannot find the error.

Could you?