Best way to change state based on SharedValue?

[NickMandylas]

Hello,

In most instances there isn't really a need to change state, but I've found an instance where I'm needing to.
I have an animation that changes the background colour the main view from black to white. As a result, I need to change the statusBar colour will need to change from white to black (the opposite of the view colour).

Is the best proposed way just to use runOnJS() in useDerivedValue()?
For example (very simple version):

const x = useSharedValue(0);
const [barStyle, setBarStyle] = useState<string>("light-content");

useDerivedValue(() => {
  if (x.value > 50) {
    runOnJS(setBarStyle)("dark-content")
  } else {
    runOnJS(setBarStyle)("light-content")
  }
}) 

[Noitidart]

I think useAnimatedReaction is the way to go. But I am not sure myself.

[devethan]

I think useAnimatedReaction is the way to go. But I am not sure myself.

The useAnimatedReaction is only applicable to worklet functions, so you can't pass in a function to update the React state. I think runOnJS would be your best bet.