Address reanimated API misuse warnings that pop up starting with reanimated 3.16.0

[vhakulinen]

Describe Your Environment

What version of victory-native-xl are you using? 41.8.0

What version of React and React Native are you using? 0.73

What version of Reanimated and React Native Skia are you using? reanimated 3.16.1, skia 1.5.0

Are you using Expo or React Native CLI? cli

What platform are you on? Android

Describe the Problem

Getting following errors when using CartesianChart:

 WARN  [Reanimated] Writing to `value` during component render. Please ensure that you do not access the `value` property or use `set` 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.

Expected behavior:

Shared values not accessed during component render.

Actual behavior:

Shared values are accessed during component render.

Additional Information

Reanimated version 3.16.0 introduced a logger that by default shows warnings about API misuse.

Related issue in react-native-bottom-sheet: gorhom/react-native-bottom-sheet#1983

The warning

[ajhoel43]

Same here, then I revert my reanimated lib into version 3.15.0 and remove some modification in metro.config.js related to reanimated lib and the warning is not there anymore.

I know it is not the solution, but just FYI.

[salememd]

Same issue here, after upgrading to expo 52 victory-native feels buggy

[ThierryVC]

After updating to [email protected],
this still seems to occur when using useChartTransformState on a CartesianChart.

Although the error message went from

[Reanimated] Writing to value during component render. Please ensure that you do not access the value property or use set method of a shared value while React is rendering a component.

to

[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.

[zibs]

Hey @ThierryVC my hunch is that this is actually happening in your own code, and not the library's code anymore. I can reproduce this in the example app where I can see the warning on a few screens where we are technically improperly accessing a shared value in the render, but if I fix that, there is no warning.

Take a look at your own code and https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/#remarks and if you're still having an issue, please share some code.

[ThierryVC]

[email protected] seems to have fixed it. 🙇

Thank you for the feedback. I'm not really using any sharedValue there though.
Removing all the fluff, this ↓ was basically my component & removing transformState={transformState} was shutting the warning.
The new version makes this all a problem of the past though. Thank you 😊

function ReportBarChart({ data }) {
  const { state: transformState } = useChartTransformState()

  return (
    <View style={$container}>
      <CartesianChart
        data={data}
        xKey="month" yKeys={["count"]}
        transformState={transformState}
        domain={{
          y: [0, 15]
        }}
      >
        {({ points, chartBounds }) => (
          <Bar
            points={points.count}
            chartBounds={chartBounds}
            barWidth={14}
          />
        )}
      </CartesianChart>
    </View>
  )
})

const $container: ViewStyle = {
  flexDirection: "row",
  borderRadius: 8,
  backgroundColor: "#FFF",
  flex: 1,
  height: 181
}