fix(android,animated-sensor): Fix HMR for Animated Sensor

[Nodonisko]

Summary

While playing with useAnimatedSensor(SensorType.GYROSCOPE) I was really annoyed that every time my app hot reloaded I got error like this: Cannot assign to read-only property 'sensor' or Cannot assign to read-only property 'unregister'.

There seems to be some issue that properties inside "ref.current" becomes read-only so I added code that will replace whole ref.current instead of replacing properties one by one at begging of useEffect. This seems to solve the issue.

Also it seems that this is Android only issue. I did not encounter that on iOS.

Here are screenshots of errors https://photos.google.com/share/AF1QipM1cQFJI67AGuTyth9CY3EGM6Ipy80Jp_uSivmoHf2dTU3aRDaXSLk2TliVKO2hNg?key=bVVNWE1SRHBrcFBreW5HZFpyWGlOcGxkelVKSW9n

Test plan

There is simple code that will throw errors on Android on every hot reload without fix from this PR. You can change that console.log before useFrameCallback to trigger HMR.

import {
  SensorType,
  useAnimatedSensor,
  useFrameCallback,
} from "react-native-reanimated";

export default function App() {
  const deviceRollSensor = useAnimatedSensor(SensorType.ROTATION);
  const deviceGyroSensor = useAnimatedSensor(SensorType.GYROSCOPE);

  console.log("blah4");
  useFrameCallback((frameInfo) => {
    const deviceRoll = deviceRollSensor.sensor.value.roll;
    const deviceGyro = deviceGyroSensor.sensor.value.y;

    console.log("deviceRoll: ", deviceRoll);
    console.log("deviceGyro: ", deviceGyro);
  });

  return null;
}

[tjzel]

Hi @Nodonisko, thanks for your contribution! There was a debate about how exactly we should fix useAnimatedSensor and eventually I wanted to do it as you did, but you were faster 😄. I took the liberty of adding better memoization handling on Reanimated side.