[0.76.3][NewArch][iOS + Android] Calling setValue on Animated.Value within useEffect breaks styling

[BogiKay]

Description

Hey!

While working on react-native-paper new-arch support I noticed weird issue related to assigning styles dynamically. Basically, some styles are not applied if we use Animated.Value. I checked and it's not related to library itself and the issue is reproducible with bare RN app with enabled new architecture.

Looks like calling setValue on instance of Animated.Value like in the code snippet below causes the problem:

function App(): React.JSX.Element {
  const [disabled, setDisabled] = useState(false);
  const {current: elevation} = useRef(useAnimatedValue(0));

  useEffect(() => {
    elevation.setValue(disabled ? 15 : 0);
  }, [elevation, disabled]);

  return (
    <SafeAreaView>
      <View style={styles.buttonContainer}>
        <MyButton
          elevation={elevation}
          label="Click to disable"
          onPress={() => setDisabled(prev => !prev)}
        />
        <MyButton
          label="Button without elevation"
          disabled={disabled}
          onPress={() => {}}
        />
        <MyButton
          elevation={elevation} // if we do not pass elevation, then background update works fine
          label="Button with elevation"
          disabled={disabled}
          onPress={() => {}}
        />
      </View>
    </SafeAreaView>
  );
}

const elevationLevel = [0, 3, 6, 9, 12, 15];
const inputRange = [0, 1, 2, 3, 4, 5];

const MyButton = ({elevation, label, disabled, onPress}: Props) => {
  const style = {
    ...(elevation &&
      Platform.OS === 'android' && {
        elevation: elevation.interpolate({
          inputRange,
          outputRange: elevationLevel,
        }),
      }),
    ...(elevation &&
      Platform.OS === 'ios' && {
        shadowColor: '#000',
        shadowOpacity: elevation.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 0.3],
          extrapolate: 'clamp',
        }),
        shadowOffset: {
          width: 0,
          height: elevation.interpolate({
            inputRange,
            outputRange: [0, 1, 1, 1, 2, 4],
          }),
        },
        shadowRadius: elevation.interpolate({
          inputRange,
          outputRange: [0, 1, 2, 3, 3, 4],
        }),
      }),
  };

  return (
    <Pressable onPress={onPress} disabled={disabled}>
      <Animated.View
        style={[styles.button, disabled && styles.disabledButton, style]}>
        <Text>{label}</Text>
      </Animated.View>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    padding: 30,
    backgroundColor: 'white',
    height: '100%',
  },
  disabledButton: {
    backgroundColor: 'gray',
  },
  button: {
    backgroundColor: 'yellow',
    margin: 16,
    padding: 8,
    borderWidth: 1,
    borderColor: 'blue',
    borderRadius: 10,
  },
});

Steps to reproduce

1. Fetch the provided repository
2. install deps and run the app
3. Click on "click to disable" button
4. observe that new backgroundColor is applied only to the button without elevation based on Animated.Value

React Native Version

0.76.3

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.6.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 198.64 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.2
    path: ~/.nvm/versions/node/v18.20.2/bin/node
  Yarn:
    version: 4.5.0
    path: ~/.nvm/versions/node/v18.20.2/bin/yarn
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v18.20.2/bin/npm
  Watchman:
    version: 2024.10.21.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/bogusz/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "28"
      - "29"
      - "30"
      - "31"
      - "33"
      - "34"
      - "34"
      - "34"
      - "35"
    Build Tools:
      - 29.0.2
      - 29.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 35.0.0
    System Images:
      - android-29 | Google APIs ARM 64 v8a
      - android-31 | Google APIs ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-UpsideDownCakePrivacySandbox | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.3 AI-233.14808.21.2331.11842104
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/bogusz/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.3
    wanted: 0.76.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

### Stacktrace or Logs

```text
-

Reproducer

https://github.com/BogiKay/rn-animated-value-issue

Screenshots and Videos

animated-value-bug.webm