useAnimatedSensor | TypeError: Cannot assign to read-only property 'sensor' fixed.

[talut]

TypeError: Cannot assign to read-only property 'sensor'

Summary

This pull request aims to resolve the issue related to the TypeError: Cannot assign to read-only property 'sensor'. When attempting to modify a read-only property. In this case, the issue arises from reassigning ref.current.sensor within the useRef hook.

While the object returned by useRef is mutable, modifying a read-only property within this object, as done with ref.current.sensor, leads to the error in question.

In the current implementation, ref.current.sensor is initially set with the function initializeSensor(sensorType, config) and is later reassigned in the useEffect hook. It is this reassignment that triggers the error.

To fix this issue, I suggest a code restructuring to avoid the direct reassignment of the sensor property. Instead, we can create a new object for ref.current each time an update is needed. This approach sidesteps the limitations of the read-only property while retaining the intended functionality.

Test plan

yarn add react-native-reanimated

import { SensorType, useAnimatedSensor } from 'react-native-reanimated';
import { View, Button, StyleSheet } from 'react-native';

const SensorTest = () => {
  const [state, setState] = React.useState(0);
  /*
   * Issue:  TypeError: Cannot assign to read-only property 'sensor'
   *
   * Why: This issuse happening while we setting custom userConfig
   * Example: { interval: 10 }
   */
  const animatedSensor = useAnimatedSensor(SensorType.GYROSCOPE, {
    interval: 10,
  });

 useDerivedValue(() => {
    const x = animatedSensor.sensor.value.x;
    const y = animatedSensor.sensor.value.y;

    console.log('x', x);
    console.log('y', y);
  }, [animatedSensor.sensor.value.x, animatedSensor.sensor.value.y]);

  return (
    <View style={styles.container}>
      <Button title="Re-render" onPress={() => setState(state + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[tjzel]

Hi @talut, thanks for submitting the PR!

I cannot recreate the issue you are trying to fix however. When I'm trying to use the code snippet you posted on the main branch I'm not getting any errors. Am I missing something?

[tjzel]

Oh I see, I found #5538 and it happens on re-render. I updated your snippet accordingly.

[tjzel]

What concerns me here is the fact that with these changes we are no longer returning a stable reference. This is potentially a breaking change.

Maybe we should instead re-work the mechanism due to which this object is getting frozen in the first place, I'll make a PoC of this.

cc @piaskowyk

[tjzel]

I opened an alternate pull request to this one. We have to think which one do we want to apply here.

Keep in mind that the problem arises only because return value of useAnimatedSensor is not accessed granularly enough by you (it's not your fault however, since we haven't put any information about it in general). If you instead did:

  const { sensor } = useAnimatedSensor(SensorType.GYROSCOPE, {
    interval: 10,
  });

 useDerivedValue(() => {
    const x = sensor.value.x;
    const y = sensor.value.y;

    console.log('x', x);
    console.log('y', y);
  }); // No need to specify dependencies when Reanimated Babel plugin isn't disabled.

Then everything would be fine.

[talut]

Hey @tjzel thanks for the updates.

You're right my solution returns an unstable reference.

I opened an alternate pull request to this one. We have to think which one do we want to apply here.

Keep in mind that the problem arises only because return value of useAnimatedSensor is not accessed granularly enough by you (it's not your fault however, since we haven't put any information about it in general). If you instead did:

  const { sensor } = useAnimatedSensor(SensorType.GYROSCOPE, {
    interval: 10,
  });

 useDerivedValue(() => {
    const x = sensor.value.x;
    const y = sensor.value.y;

    console.log('x', x);
    console.log('y', y);
  }); // No need to specify dependencies when Reanimated Babel plugin isn't disabled.

Then everything would be fine.

I'll try this one.

Thanks.

[tjzel]

Hi @talut, after a debate we decided to actually use a solution very similar to yours, but with added memoization in #5646. I hope you don't mind it, since you were kind-of first here.