From 545df703decd84c18d3e2f1a311ca53bbdf668f3 Mon Sep 17 00:00:00 2001
From: Krzysztof Piaskowy <krzychu2956@gmail.com>
Date: Fri, 12 Mar 2021 16:35:32 +0100
Subject: [PATCH] Set missing viewRef for animatedProps (#1819)

## Description

Fixes: https://github.com/software-mansion/react-native-reanimated/issues/1808

If someone uses `animatedProps` instead of `style`, we didn't set `viewRef` and without properly setting `viewRef` we weren't able to update any web component property.

## Test code and steps to reproduce
<details>
<summary>code</summary>

```js
import * as React from "react";
import { StyleSheet, View, Button } from "react-native";
import Animated, {
  useAnimatedProps,
  useSharedValue,
} from "react-native-reanimated";

Animated.addWhitelistedNativeProps({
  pointerEvents: true,
});
Animated.addWhitelistedUIProps({
  pointerEvents: true,
});

export default function App() {
  const pointerEvents = useSharedValue("auto");

  const bottomProps = useAnimatedProps(() => ({
    pointerEvents: pointerEvents.value,
  }));

  const toggle = () => {
    if (pointerEvents.value === "none") {
      pointerEvents.value = "auto";
    } else {
      pointerEvents.value = "none";
    }
    console.log("pointer events:", pointerEvents.value);
  };

  return (
    <View style={styles.container}>
      <View style={styles.half}>
        <Button color="black" title="Toggle Pointer Events" onPress={toggle} />
      </View>
      <Animated.View
        style={[styles.half, styles.bottom]}
        animatedProps={bottomProps}
      >
        <Button
          color="black"
          title="Press me?"
          onPress={() => alert("has pointer events!")}
        />
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  half: {
    flex: 1,
    backgroundColor: "hotpink",
    justifyContent: "center",
    alignItems: "center",
  },
  bottom: {
    backgroundColor: "green",
  },
});
```

</details>

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
---
 src/createAnimatedComponent.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/createAnimatedComponent.js b/src/createAnimatedComponent.js
index 67f68c66aad..ecfb8302ceb 100644
--- a/src/createAnimatedComponent.js
+++ b/src/createAnimatedComponent.js
@@ -396,6 +396,9 @@ export default function createAnimatedComponent(Component) {
         } else if (key === 'animatedProps') {
           Object.keys(value.initial).forEach((key) => {
             props[key] = value.initial[key];
+            if (value.viewRef.current === null) {
+              value.viewRef.current = this;
+            }
           });
         } else if (value instanceof AnimatedEvent) {
           // we cannot filter out event listeners completely as some components