react-native-reanimated useDerivedValue does not modify the dom

Question

I have the simplest example possible with useDerivedValue:

A SharedValue that is modified when scrolling.

A derived boolean value based on this scroll position

const isShown = useDerivedValue(() => {
  console.log('y', currentPositionY.value);
  return currentPositionY.value > 40;
}, [currentPositionY]);

The y is logged and modified as it should.

A component that should display a different text based on this boolean:

const TestC = ({ isShown }: { isShown: SharedValue<boolean> }) => {
  console.log('isS', isShown.value);

  if (isShown.value) {
    return <Text>shown</Text>;
  } else {
    return <Text>not shown</Text>;
  }
};

But the TestC component is not updated following the derived value.

What am I missing?

Answer 1

Albeit a little old I think this blog does a good job of breaking down the native thread vs. the js runtime. I bring this up because understanding this bridge and how we need to consider accessing these native runtime values in our JSX components will make this issue a little more obvious.

Here are some things you can try to solve this:

• animated props - could make your example work as is
• animated styles - this approach would be good if you wanted to effect styles explicitly
• worklets - big guns approach and larger learning curve