[Bug]: Ghosting with react-native-svg

[LeaderBoard-Jacob]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

After upgrading to the latest React Native, I noticed issues with the bottom sheets used throughout our app, specifically ghost text appearing and not being removed. I was able to isolate this issue to some kind of conflict with react-native-svg. Since react-native-svg is a fairly popular package that hasn’t caused any issues elsewhere, I believe the problem lies within react-native-bottom-sheet.

To test this, I have provided an example Snack demonstrating the issue. The issue is only present on iOS and does not occur on web or Android.

Reproduction steps

• Create a bottom sheet component
• Render children items that contain a react-native-svg component
• Open and close the sheet a few times

---

• I have also created an example repo here:
  • https://github.com/LeaderBoard-Jacob/rn-sheet-bug

Screen.Recording.2024-12-30.at.11.15.18.AM.mov

Reproduction sample

https://snack.expo.dev/6jgtEJUoHvjNdHHe2DVg4?platform=ios

Relevant log output

No response

[Willham12]

i don't think thats a issue with bottom sheet, had a similar issue with reanimated and a expandable view.

[LeaderBoard-Jacob]

i don't think thats a issue with bottom sheet, had a similar issue with reanimated and a expandable view.

I am only able to replicate this issue with react-native-svg when using the bottom sheet. react-native-svg by itself works fine, but I am curious, were you able to resolve the issue with reanimated and the expandable view?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.