React style not correctly applied when removing reanimated style

[freeboub]

Description

When you have an Animated.View which use a react style and reanimated style, If you remove the reanimated style, the react style is not correctly reapplied.

Steps to reproduce

make an animation on view. and remove the reanimated style.
Once the reanimated style is removed, we expect that the regular style is applied:

        style={[
          { width: 1, height: 80, backgroundColor: "black", margin: 30 },
          visible ? style : undefined,
        ]}

Here I animated width, once visible goes to false I expect the width to be 1. But correctly the behavior inconsistent.
I made a sample with width, but we also see this issue on opacity or color for a text.
Of course there are easy workaround which can be implemented, but it is painful to identify and correct...

Adtionnal informations:

• Seen with or without newArchitecture
• Seen on ios and android (tested only on emulators)

even if ios have the same issue, I think on android with an uggly glitch when we remove the style, I don't see that on ios ...

Full code to reproduce the issue:

  const width = useSharedValue(10);

  const config = {
    duration: 1000,
    easing: Easing.linear,
  };
  useEffect(() => {
    width.value = withRepeat(withTiming(350, config), 10000)
  }, [])

  const style = useAnimatedStyle(() => {
    return {
      width: width.value,
    };
  });

  const [visible, setStyleVisible] = useState(false)

  console.log('is visible', visible)
  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
      }}
    >
      <Animated.View
        style={[
          { width: 1, height: 80, backgroundColor: "black", margin: 30 },
          visible ? style : undefined,
        ]}
      />
      <Button
        title="toggle"
        onPress={() => {
          console.log('toggle')
          setStyleVisible(v => !v)
        }}
      />
    </View>
  );

Snack or a link to a repository

https://github.com/freeboub/bug-reanimated-style

Reanimated version

3.16.1

React Native version

expo 51.0.38 (react-native 0.74.5) also reproduced on 0.76.1

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[freeboub]

I didn't test on ios when I open the issue, can you please add the "Plaform: ios" tag ?