From 2426f32095af417f1cfc1789479c3d2ee7c72e18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wojciech=20Dr=C3=B3=C5=BCd=C5=BC?=
 <31368152+behenate@users.noreply.github.com>
Date: Wed, 7 Jun 2023 19:50:48 +0200
Subject: [PATCH] Added getAnimatableRef function (#4533)

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


https://github.com/software-mansion/react-native-reanimated/assets/31368152/96d2cd19-a4f9-48ac-bd23-f50746dc7e0b
---
 app/src/examples/AnimatableRefExample.tsx | 82 +++++++++++++++++++++++
 app/src/examples/index.ts                 |  6 ++
 src/createAnimatedComponent.tsx           | 10 ++-
 3 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 app/src/examples/AnimatableRefExample.tsx

diff --git a/app/src/examples/AnimatableRefExample.tsx b/app/src/examples/AnimatableRefExample.tsx
new file mode 100644
index 00000000000..0d9b20b385f
--- /dev/null
+++ b/app/src/examples/AnimatableRefExample.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, Button } from 'react-native';
+
+import { Rect, Svg } from 'react-native-svg';
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+type SwitchProps = {
+  y?: number;
+};
+
+class Switch extends React.Component<SwitchProps> {
+  rectRef: Rect | null = null;
+
+  // When an animated version of the Switch is created we want to animate the inner Rect instead of the outer Svg component.
+  getAnimatableRef() {
+    return this.rectRef;
+  }
+
+  render() {
+    return (
+      <Svg height="310" width="70">
+        <Rect
+          x="5"
+          y="5"
+          width="60"
+          height="300"
+          fill="none"
+          stroke={'black'}
+          strokeWidth={10}
+        />
+        <Rect
+          x="10"
+          y={this.props.y}
+          width="50"
+          height="40"
+          fill="red"
+          ref={(component) => {
+            this.rectRef = component;
+          }}
+        />
+      </Svg>
+    );
+  }
+}
+
+const AnimatedSwitch = Animated.createAnimatedComponent(Switch);
+export default function AnimatableRefExample() {
+  const [isUp, setIsUp] = useState(true);
+  const sv = useSharedValue(0);
+
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      y: sv.value + 10,
+    };
+  });
+
+  return (
+    <View style={styles.container}>
+      <AnimatedSwitch animatedProps={animatedProps} />
+      <Button
+        onPress={() => {
+          sv.value = withSpring(isUp ? 250 : 0, { damping: 18 });
+          setIsUp(!isUp);
+        }}
+        title={`Go ${isUp ? 'down' : 'up'}`}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 200,
+  },
+});
diff --git a/app/src/examples/index.ts b/app/src/examples/index.ts
index 8f04fa2047f..a228deac30c 100644
--- a/app/src/examples/index.ts
+++ b/app/src/examples/index.ts
@@ -1,4 +1,5 @@
 import AboutExample from './AboutExample';
+import AnimatableRefExample from './AnimatableRefExample';
 import AnimatedKeyboardExample from './AnimatedKeyboardExample';
 import AnimatedListExample from './LayoutAnimations/AnimatedList';
 import AnimatedSensorExample from './AnimatedSensorExample';
@@ -154,6 +155,11 @@ export const EXAMPLES: Record<string, Example> = {
 
   // Basic examples
 
+  AnimatableRefExample: {
+    icon: '⏬',
+    title: 'Animate inner component',
+    screen: AnimatableRefExample,
+  },
   AnimatedTextInputExample: {
     icon: '🎰',
     title: 'Counter',
diff --git a/src/createAnimatedComponent.tsx b/src/createAnimatedComponent.tsx
index 8ff580f6fba..4106706255e 100644
--- a/src/createAnimatedComponent.tsx
+++ b/src/createAnimatedComponent.tsx
@@ -232,6 +232,7 @@ type Options<P> = {
 interface ComponentRef extends Component {
   setNativeProps?: (props: Record<string, unknown>) => void;
   getScrollableNode?: () => ComponentRef;
+  getAnimatableRef?: () => ComponentRef;
 }
 
 export interface InitialComponentProps extends Record<string, unknown> {
@@ -392,14 +393,19 @@ export default function createAnimatedComponent(
       let viewName: string | null;
       let shadowNodeWrapper: ShadowNodeWrapper | null = null;
       let viewConfig;
+      // Component can specify ref which should be animated when animated version of the component is created.
+      // Otherwise, we animate the component itself.
+      const component = this._component?.getAnimatableRef
+        ? this._component.getAnimatableRef()
+        : this;
       if (Platform.OS === 'web') {
-        viewTag = findNodeHandle(this);
+        viewTag = findNodeHandle(component);
         viewName = null;
         shadowNodeWrapper = null;
         viewConfig = null;
       } else {
         // hostInstance can be null for a component that doesn't render anything (render function returns null). Example: svg Stop: https://github.com/react-native-svg/react-native-svg/blob/develop/src/elements/Stop.tsx
-        const hostInstance = RNRenderer.findHostInstance_DEPRECATED(this);
+        const hostInstance = RNRenderer.findHostInstance_DEPRECATED(component);
         if (!hostInstance) {
           throw new Error(
             'Cannot find host instance for this component. Maybe it renders nothing?'