[Reanimated] Reading from value during component render... caused by AnimatedText.tsx

[evansendra]

relevant dependencies:

"expo": "^52.0.0"
"react-native": "0.76.3"
"react-native-wagmi-charts": "^2.6.0"
"react-native-reanimated": "~3.16.1"

Using a <LineChart.DatetimeText /> with some basic styling and DateTimeFormatOptions, the following error appears:

console.js:123 [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.

If you don't want to see this message, you can disable the strict mode. Refer to:
https://docs.swmansion.com/react-native-reanimated/docs/debugging/logger-configuration for more details.

After a little digging, it looks to be caused by the direct read of .value at src/components/AnimatedText.tsx:54:

return (
  <AnimatedTextInput
    underlineColorAndroid="transparent"
    editable={false}
    ref={Platform.select({ web: inputRef })}
  --->  value={text.value}
    style={[styles.text, style]}
    animatedProps={animatedProps}
  />
);

I'm not sure if the explicit pass of the value prop is needed as it's already being passed via animatedProps.