Make animated component's event tag properly update

[szydlovsky]

Summary

Turns out (thanks to @j-piasecki for noticing) that animated component's event-emitting viewTag can change through re-rendering. The following fix takes care of that.

Test plan

You can go through all ComposedEventHandler examples form Example app, as well as code snippets in #5845 (comment).

Also, this should work perfectly regardless of re-renders:

Code

import React, { useState } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

function Ball(props) {
  const isPressed = useSharedValue(false);
  const offset = useSharedValue({ x: 0, y: 0 });

  const animatedStyles = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: offset.value.x },
        { translateY: offset.value.y },
        { scale: withSpring(isPressed.value ? 1.2 : 1) },
      ],
      backgroundColor: isPressed.value ? 'yellow' : 'blue',
    };
  });

  const gesture = Gesture.Pan()
    .onBegin(() => {
      'worklet';
      isPressed.value = true;
    })
    .onChange((e) => {
      'worklet';
      offset.value = {
        x: e.changeX + offset.value.x,
        y: e.changeY + offset.value.y,
      };
    })
    .onFinalize(() => {
      'worklet';
      isPressed.value = false;
    });

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.ball, animatedStyles]} key={props.counter} />
    </GestureDetector>
  );
}

export default function Example() {
  const [counter, setCounter] = useState(0);

  return (
    <View style={styles.container}>
      <Button title="Remount" onPress={() => setCounter((prev) => prev + 1)} />
      <Ball counter={counter} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  ball: {
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: 'blue',
    alignSelf: 'center',
  },
});

[tjzel]

Nice work, you got the idea, but now we need some polishing to ensure proper maintainability in the future.

[tjzel]

We're almost there!

[tjzel]

😎

[tjzel]

Just check one more thing for me and we gucci. Just make sure to test it thoroughly!

[piaskowyk]

Well done 🫡