0

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?

Simon
  • 6,025
  • 7
  • 46
  • 98

1 Answers1

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
ALFmachine
  • 639
  • 7
  • 12