iOS: a recycled EaseView loses overflow: 'hidden' and borderRadius #72

Description

On iOS (new architecture), an EaseView that is unmounted and later mounted again can lose its overflow: 'hidden' and borderRadius. The reused view no longer clips its children and has square corners. In our app this showed up after some navigation as a background image spilling out of rounded buttons and switches.

Cause: prepareForRecycle resets layer properties that RCTViewComponentView owns (masksToBounds, cornerRadius, backgroundColor, borders, shadow, opacity and transform). RCTViewComponentView keeps _props across recycling and only applies a style value again when it changes. So when the recycled view is mounted with the same style, overflow: 'hidden' and borderRadius look unchanged to React Native and are never set on the layer again.

Expected: the remounted view clips its children with rounded corners, like the first mount.

Steps to reproduce

1. Render an EaseView with overflow: 'hidden' and borderRadius, and a child larger than it (for example a 300x300 view inside a 160x64 pill).
2. Unmount it.
3. Mount it again with the same props.
4. The child is no longer clipped and the corners are square.

const [shown, setShown] = useState(true);

{shown && (
  <EaseView
    animate={{ opacity: 1 }}
    transition={{ type: 'timing', duration: 200 }}
    style={{ width: 160, height: 64, borderRadius: 32, overflow: 'hidden' }}
  >
    <View style={{ width: 300, height: 300, backgroundColor: 'red' }} />
  </EaseView>
)}
<Pressable onPress={() => setShown((s) => !s)}>
  <Text>Toggle</Text>
</Pressable>

Snack or a link to a repository

The snippet above is the whole repro. The same repro as an example screen, with the fix: https://github.com/el-lsan/react-native-ease/tree/fix/ios-recycle-keeps-clipping/example/app/issues (a pull request follows).

react-native-ease version

0.9.0

React Native version

0.88.1

Platforms

iOS

Architecture

New Architecture (Fabric)

Build type

Release (also seen in debug)

Device

iOS simulator and a real device

Device model

iPhone SE (2nd generation) simulator, iOS 27.0; iPhone 15 Pro Max, iOS 27.0.1

Acknowledgements

Yes, I searched for similar issues. The closest is #54 (a loop surviving on a recycled view), a different symptom in the same recycling path.