react native reanimated 2 Sending data from ui pan gesture detector to react native javascript is not working

Question

Made joystick with pan detector using reanimated2 and gesture handler. where user can move the position of joystick, it moves the position well on android phone. But unable to get the position of joystick in react native, where i will send it to iot device. Note value is not getting update in useEffect.

How can i get pos value in react native code?.

Here is the code

import React, {FC, useEffect} from 'react';
import {StyleSheet, View} from 'react-native';
import {Gesture, GestureDetector} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const BALL_SIZE = 60;
const JOY_SIZE = 300;

const Joystick: FC = () => {
const pos = useSharedValue({x: 0, y: 0});

const animStyle = useAnimatedStyle(() => {
   return {
     transform: [
      {
         translateX: pos.value.x,
      },
      {
         translateY: pos.value.y,
      },
    ],
  };
}, [pos]);

const gesture = Gesture.Pan()
  .onUpdate(e => {
    if (Math.abs(e.translationX) > Math.abs(e.translationY)) {
      let x = e.translationX;
      if (x > 0 && x > JOY_SIZE / 2 - BALL_SIZE / 2) {
        x = JOY_SIZE / 2 - BALL_SIZE / 2;
      }
      if (x < 0 && x < -(JOY_SIZE / 2 - BALL_SIZE / 2)) {
        x = -(JOY_SIZE / 2 - BALL_SIZE / 2);
      }
      pos.value = {x, y: 0};
    } else {
      let y = e.translationY;
      if (y > 0 && y > JOY_SIZE / 2 - BALL_SIZE / 2) {
        y = JOY_SIZE / 2 - BALL_SIZE / 2;
      }
      if (y < 0 && y < -(JOY_SIZE / 2 - BALL_SIZE / 2)) {
        y = -(JOY_SIZE / 2 - BALL_SIZE / 2);
      }
      pos.value = {x: 0, y};
    }
  })
  .onEnd(() => {
    pos.value = {x: 0, y: 0};
  });

  // it is not working
  useEffect(() => {
    console.log(pos.value);
  }, [pos]);

  return (
    <View style={styles.circle}>
     <View style={styles.horz_line} />
     <View style={styles.vert_line} />
     <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.ball, animStyle]} />
     </GestureDetector>
   </View>
  );
};
const styles = StyleSheet.create({
  circle: {
    width: JOY_SIZE,
    height: JOY_SIZE,
    borderRadius: JOY_SIZE / 2,
    borderWidth: 3,
    borderColor: 'blue',
    margin: 5,
  },
  horz_line: {
    borderTopWidth: 3,
    borderColor: 'red',
    width: JOY_SIZE - 3,
    height: JOY_SIZE,
    position: 'absolute',
    top: JOY_SIZE / 2,
  },
  vert_line: {
    borderLeftWidth: 3,
    borderColor: 'red',
    width: JOY_SIZE,
    height: JOY_SIZE - 3,
    position: 'absolute',
    left: JOY_SIZE / 2,
  },
  ball: {
    width: BALL_SIZE,
    height: BALL_SIZE,
    borderRadius: BALL_SIZE / 2,
    position: 'absolute',
    left: JOY_SIZE / 2 - BALL_SIZE / 2,
    top: JOY_SIZE / 2 - BALL_SIZE / 2,
    backgroundColor: 'blue',
  },
 });

 export default Joystick;

Answer 1

useEffect does not work on the SharedValue from useSharedValue, instead you probably need to use useAnimatedReaction from react-native-reanimted (link).