Added getAnimatableRef function

[behenate]

Summary

Added an option for a component to specify which other component should be animated when createAnimatedComponent is executed on it by adding getAnimatableRef function (we might want to think of a better name).

This is useful for some 3rd party libraries which want to add support for animating their component, but it's wrapped inside of another component which is inaccessible to the user.

Test plan

Included a simple example screen where inner Rect component is animated when createAnimatedComponent is executed on the component containing it.

Simulator.Screen.Recording.-.Old.Orientation.-.2023-06-05.at.16.41.04.mp4

[tomekzaw]

Works like a charm. Thanks for the PR! 👏

Tested on iOS with the following example:

App.tsx

import { StyleSheet, View } from 'react-native';

import React, { useEffect } from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

class MyClassComponent extends React.Component {
  innerRef: View | null = null;

  getAnimatableRef() {
    return this.innerRef;
  }

  render() {
    return (
      <View style={styles.outer}>
        <View
          ref={(component) => {
            this.innerRef = component;
          }}
          style={styles.inner}
        />
      </View>
    );
  }
}

const AnimatedMyClassComponent =
  Animated.createAnimatedComponent(MyClassComponent);

export default function App() {
  const sv = useSharedValue(0);

  useEffect(() => {
    sv.value = 0;
    sv.value = withRepeat(withTiming(1), -1, true);
  }, [sv]);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      width: sv.value * 200,
    };
  });

  return (
    <View style={styles.container}>
      <AnimatedMyClassComponent style={animatedStyle} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  outer: {
    backgroundColor: 'black',
    width: 200,
    height: 200,
  },
  inner: {
    backgroundColor: 'cyan',
    width: 100,
    height: 100,
  },
});

[tomekzaw]

Suggested change

	stroke={'black'}
	stroke="black"

[tomekzaw]

Doesn't work on web though 😢

edit: It also didn't work before so it's not a regression.

edit 2: Fixed with the following patch in js-reanimated/index.ts:

+import { findNodeHandle } from 'react-native';
+import { Component } from 'react';

 interface JSReanimatedComponent {
   // ...
+  getAnimatableRef?: () => Component;
 }

-    const component = viewRef._component;
+    const ref = viewRef._component.getAnimatableRef
+        ? viewRef._component.getAnimatableRef()
+        : viewRef._component;
+    const component = findNodeHandle(ref);

I think it's okay to merge this PR now so it will be included in 3.3.0.