[Reanimated] Reading from "_value' only on UI runtime ... Error

[werk1]

hi.

const modal_W1_master = () => {
const translateY = useSharedValue(0);

const pan = Gesture.Pan().onUpdate((event) => {
translateY.value = event.translationY;
console.log(translateY.value);
});

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

return (

<Animated.View style={[styles.modalContainer, modalW1Style]}>

</Animated.View>

);
};

i dont know, what iam missing here ....

the animated style does not work

PLEASE :))

[MatiPl01]

Hey!

Your reproduction code seems incomplete. Could you please provide the entire implementation?
I wonder if you are missing something, like GestureDetector component to detect the pan gesture.

I changed your code a bit locally and implemented it in this way:

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

const ModalW1master = () => {
  const translateY = useSharedValue(0);

  const pan = Gesture.Pan().onUpdate((event) => {
    translateY.value = event.translationY;
    console.log(translateY.value);
  });

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

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.modalContainer, modalW1Style]}>
        <View style={styles.box} />
      </Animated.View>
    </GestureDetector>
  );
};

export default ModalW1master;

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

Everything works fine then:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-24.at.14.11.07.mp4

[werk1]

hi. thank you a lot for your input.

but - in that special case i hat to wrap the thing with the GestureHandlerRootHOC

had the Modal component from react native build under the hood

:)

[MatiPl01]

Hey!

Thanks for your response.
So the problem is resolved and I can close the discussion, right?

[MatiPl01]

Because there is no more activity in this discussion and it seems to be already resolved, I am closing the discussion.

Feel free to re-open it if you have more questions.