React-native-reanimated: unable to use same useAnimatedStyle to multiple views components

[rawatnaresh]

Description

I've created a useAnimatedStyle hook and I'm passing the animated hook style result to the two view components. When I trigger the change only one of the components is getting updated.

Screenshots

Steps To Reproduce

1. Create a useAnimatedStyle hook and pass the same hook to multiple components. trigger the update and you'll see only one of them getting updated.

Expected behavior

Styles of all the components should be updated on using the same style hook

Actual behavior

Style of only one component is getting updated

Snack or minimal code example

I've to create two separate style hook, widthStyle and widthStyle2 to make it work. using widthStyle to the two components does not work

import React from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';
import {View, Button, Text} from 'react-native';

const Test = () => {
  const width = useSharedValue(300);
  const widthStyle = useAnimatedStyle(() => {
    return {
      width: width.value,
    };
  });
  const widthStyle2 = useAnimatedStyle(() => {
    return {
      width: width.value,
    };
  });
  return (
    <View>
      <Animated.View
        style={[{backgroundColor: 'red', height: 100}, widthStyle]}>
        <Text>View 1</Text>
      </Animated.View>
      <Animated.View
        style={[{backgroundColor: 'red', marginTop: 100, height: 100}, widthStyle]}>
        <Text>View 2</Text>
      </Animated.View>
      <Button
        title="Click"
        onPress={() => {
          width.value = Math.random() * 100 + 300;
        }}
      />
    </View>
  );
};

export default Test;

if this is the expected behaviour then how can i use same hook to multiple components?

Package versions

• React: "~16.11.0"
• React Native: "~0.62.2",
• React Native Reanimated: "^2.0.0-alpha.6",

[jakub-gonet]

Duplicate of #920.

Also, nicely prepared issue, thanks for that 🙂