How to achieve dual joystick control of objects

[LKjoey]

I'm a beginner in rn and this is my first time using this library. I want to implement dual joystick control. The left and right joysticks do not affect each other and can be controlled simultaneously. I asked the AI but couldn't find a feasible solution, Does anyone know how to achieve this? Here is the code .
----- index.tsx
import React, { useCallback, useRef } from "react";
import { StyleSheet, View, Dimensions } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { useSharedValue } from "react-native-reanimated";
import { Joystick } from "@/components/game/Joystick";

const { width, height } = Dimensions.get("window");

export default function GameScreen() {
const leftJoystickX = useSharedValue(0);
const leftJoystickY = useSharedValue(0);
const rightJoystickX = useSharedValue(0);
const rightJoystickY = useSharedValue(0);

const lastLeftValues = useRef({ x: 0, y: 0 });
const lastRightValues = useRef({ x: 0, y: 0 });

// Left_joystick
const handleLeftJoystickMove = useCallback((x: number, y: number) => {
const hasChanged =
Math.abs(x - lastLeftValues.current.x) > 0.001 ||
Math.abs(y - lastLeftValues.current.y) > 0.001;

if (hasChanged) {
  console.log("Left_joystick:", { 
    x: x.toFixed(3), 
    y: y.toFixed(3),
    magnitude: Math.sqrt(x * x + y * y).toFixed(3)
  });
  lastLeftValues.current = { x, y };
}

leftJoystickX.value = x;
leftJoystickY.value = y;

}, []);

// Right_joystick
const handleRightJoystickMove = useCallback((x: number, y: number) => {
const hasChanged =
Math.abs(x - lastRightValues.current.x) > 0.001 ||
Math.abs(y - lastRightValues.current.y) > 0.001;

if (hasChanged) {
  console.log("Right_joystick:", { 
    x: x.toFixed(3), 
    y: y.toFixed(3),
    magnitude: Math.sqrt(x * x + y * y).toFixed(3)
  });
  lastRightValues.current = { x, y };
}

rightJoystickX.value = x;
rightJoystickY.value = y;

}, []);

return (

  <View style={styles.rightControls}>
    <Joystick
      onMove={handleRightJoystickMove}
      size={160}
      stickSize={60}
      baseColor="rgba(100, 100, 100, 0.3)"
      stickColor="rgba(50, 50, 50, 0.7)"
    />
  </View>
</GestureHandlerRootView>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#E8F5E9",
},
controls: {
position: "absolute",
bottom: 400,
left: 20,
},
rightControls: {
position: "absolute",
bottom: 400,
right: 20,
},
});

----- Joystick.tsx

import React from "react";
import { StyleSheet, View } from "react-native";

import { Gesture, GestureDetector } from "react-native-gesture-handler";

import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";

import { scheduleOnRN } from "react-native-worklets";

interface JoystickProps {
onMove?: (x: number, y: number) => void;
size?: number;
stickSize?: number;
baseColor?: string;
stickColor?: string;
}

export const Joystick: React.FC = ({
onMove,
size = 150,
stickSize = 60,
baseColor = "rgba(0, 0, 0, 0.3)",
stickColor = "rgba(0, 0, 0, 0.6)",
}) => {

const translateX = useSharedValue(0);
const translateY = useSharedValue(0);

const maxDistance = (size - stickSize) / 2;

const reportMove = (x: number, y: number) => {
"worklet";
if (onMove) {
const normalizedX = x / maxDistance;
const normalizedY = y / maxDistance;
scheduleOnRN(onMove, normalizedX, normalizedY);
}
};

const panGesture = Gesture.Pan()
.onUpdate((event) => {

  const distance = Math.sqrt(event.translationX ** 2 + event.translationY ** 2);


  if (distance <= maxDistance) {

    translateX.value = event.translationX;
    translateY.value = event.translationY;
  } else {


    const angle = Math.atan2(event.translationY, event.translationX);

    translateX.value = Math.cos(angle) * maxDistance;         // X = cos(θ) * r
    translateY.value = Math.sin(angle) * maxDistance;         // Y = sin(θ) * r
  }

  reportMove(translateX.value, translateY.value);
})
.onEnd(() => {
  translateX.value = withSpring(0, { 
    damping: 15,        
    stiffness: 150      
  });
  translateY.value = withSpring(0, { 
    damping: 15, 
    stiffness: 150 
  });

  reportMove(0, 0);
});

const animatedStyle = useAnimatedStyle(() => ({
transform: [
{ translateX: translateX.value },
{ translateY: translateY.value }
],
}));

return (

<View
  style={[
    styles.base,
    {
      width: size,                  
      height: size,                 
      borderRadius: size / 2,       
      backgroundColor: baseColor,  
    },
  ]}
>
  <GestureDetector gesture={panGesture}>
    <Animated.View
      style={[
        styles.stick,
        {
          width: stickSize,                 
          height: stickSize,               
          borderRadius: stickSize / 2,     
          backgroundColor: stickColor,     
        },
        animatedStyle,       
      ]}
    />
  </GestureDetector>
</View>

);
};

const styles = StyleSheet.create({
base: {
justifyContent: "center",
alignItems: "center",
},
stick: {
position: "absolute",
},
});