iOS: Fabric RN 0.76 & reanimated 3.16.1, animation strange artifacts with border radius

Description

When using the reanimated library in old architecture the animation animates smoothly.

After we upgraded to Fabric however, spottted weird artifacts, one of them had to do with border radius. To debug we disabled the withTiming and set the value straight to 1 or 0 to exclude any interference and we cleared the body so we're left with just the animation.

const toggleRadioSize = () => {
  expanded.value = expanded.value > 0 ? 0 : 1;
};

const style = useAnimatedStyle(() => {
  const h = interpolate(expanded.value, [0, 1], [40, 80]);
  console.log(expanded.value);
  return {
    height: h,
    borderTopRightRadius: 5, 
    borderTopLeftRadius: 5,
    backgroundColor: 'red',
  };
}, []);

Left is OLD architecture, right is NEW arch (Fabric)

https://github.com/user-attachments/assets/174e8375-f8cd-4a3c-a9b2-7709cd48837f

Relevant packages in Package json:
  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.76.0",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-reanimated": "^3.16.1"
  },

Steps to reproduce

How to reproduce:

Create new app with my specified dependencies and copy paste the following App.tsx.
Uncomment the borderRadius and re-comment the border radius in between tests and reload the app.

App.tsx example:

function App(): React.JSX.Element {
  const expanded = useSharedValue(0);
  const toggle = () => {
    expanded.value = expanded.value > 0 ? 0 : 1;
  };

  const style = useAnimatedStyle(() => {
    const h = interpolate(expanded.value, [0, 1], [40, 80]);
    return {
      height: h,
      backgroundColor: 'red',
      borderTopRightRadius: 5,
      borderTopLeftRadius: 5,
      width: '100%',
    };
  }, []);
  return (
    <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
      <Animated.View style={[style]}>
        <TouchableOpacity onPress={() => toggle()}>
          <Text style={{ color: 'white' }}>Test</Text>
        </TouchableOpacity>
      </Animated.View>
    </View>
  );
}

export default App;

Snack or a link to a repository

https://github.com/IndySpaan/reanimated-radius-bug

Reanimated version

3.16.1

React Native version

0.76.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

iPhone 15 emulator

Acknowledgements

Yes

software-mansion / react-native-reanimated