Reanimated warning regarding `value` render during component render.

[akuul]

Describe the bug Since React Native Reanimated v3.16.0 changed it's logger, I'm getting

[Reanimated] Reading from `value` during component render. Please ensure that you do not access the value` property or use `get` method of a shared value while React is rendering a component.

when using KeyboardAwareView component. Currently there are few packages having this problem with open issues like @gorhom/react-native-bottom-sheet or react-native-pager-view.

This seems to be related to KeyboardAvoidingView/hooks.ts where it uses context to get reanimated value from useKeyboardContext() hook.

Very quick playaround with the snippet below fixes the warning, but this doesn't look like ideal solution.

  const heightWhenOpened = useSharedValue(0);
  const height = useSharedValue(0);
  const progress = useSharedValue(0);
  const isClosed = useSharedValue(true);

  useEffect(() => {
    heightWhenOpened.value = -reanimated.height.value;
    height.value = -reanimated.height.value;
    progress.value = reanimated.progress.value;
    isClosed.value = reanimated.progress.value === 0;
  }, []);

Code snippet

function App() {
  return (
    <KeyboardProvider>
      <KeyboardAvoidingView></KeyboardAvoidingView>
    </KeyboardProvider>
  );
}

export default App;

Expected behavior React Native Reanimated should not throw an error

Screenshots

Smartphone (please complete the following information):

• RN version: 0.75.4
• RN architecture: Old
• JS engine: Hermes
• Library version: 1.14.2

Additional context This issue does not appear with KeyboardAwareScrollView.