Skip to content

Commit

Permalink
Set missing viewRef for animatedProps (#1819)
Browse files Browse the repository at this point in the history
## Description

Fixes: #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
  • Loading branch information
piaskowyk authored Mar 12, 2021
1 parent 60877cd commit 545df70
Showing 1 changed file with 3 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/createAnimatedComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 545df70

Please sign in to comment.