SIGN IN SIGN UP
facebook / react-native UNCLAIMED

A framework for building native applications using React

0 0 0 C++

Fix iOS shadow recycling bug causing duplicate shadows (#54204) (#54484)

Summary:
Fix iOS shadow recycling bug causing duplicate shadows (https://github.com/facebook/react-native/issues/54204)

- Add comprehensive visual layer cleanup in prepareForRecycle method
- Clean up _boxShadowLayers, _backgroundColorLayer, _borderLayer, _outlineLayer, _filterLayer
- Prevents cross-component contamination of visual effects during component recycling
- Fixes duplicate shadow issue when navigating to the same screen multiple times

Resolves: https://github.com/facebook/react-native/issues/54204

This PR fixes a critical iOS-specific bug where duplicate shadows appear on random views when navigating to the same screen multiple times. The issue occurs because the `prepareForRecycle` method in `RCTViewComponentView` was not properly cleaning up visual layers during component recycling, causing shadow layers and other visual effects to persist and contaminate recycled components.

The root cause was that visual layers (`_boxShadowLayers`, `_backgroundColorLayer`, `_borderLayer`, etc.) were not being removed from their superlayers or nullified during component recycling, leading to cross-component contamination of visual effects.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[IOS] [FIXED] - Fix duplicate shadow bug during component recycling by cleaning up visual layers in prepareForRecycle

Pull Request resolved: https://github.com/facebook/react-native/pull/54484

Test Plan:
1. **Existing Tests**: All existing React Native tests pass with this change
   ```bash
   yarn test --testPathPattern="View" --passWithNoTests --maxWorkers=2
   # Result: 9 test suites passed, 99 tests passed
Issue Reproduction: The fix addresses the specific scenario described in https://github.com/facebook/react-native/issues/54204:

Navigate to a screen with shadow styles

Navigate back

Navigate to the same screen again

Before: Duplicate overlapping shadows appear

After: Only correct shadows are displayed

Memory Safety: The fix properly removes layers from superlayers and nullifies references to prevent memory leaks

Comprehensive Coverage: The fix addresses not just box shadows but all visual layers to prevent similar issues with borders, outlines, filters, and background images

The implementation follows the same cleanup pattern used in the invalidateLayer method, ensuring consistency with existing codebase patterns.
```

Reviewed By: jorge-cab

Differential Revision: D86769588

Pulled By: joevilches

fbshipit-source-id: bdeda5e10ddc7e23b139f3a953b5634b06766a1e
A
Atharv Soni committed
7dcedf1def880163ab7ca07b2575a8153029a925
Parent: ca077c6
Committed by meta-codesync[bot] <215208954+meta-codesync[bot]@users.noreply.github.com> on 11/11/2025, 11:13:16 PM