Shopify / Shopify/react-native-skia
Canvas flickers when parent view zIndex changes to 0 [Android]
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8.6k
- Forks
- 647
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 35
Description
Description
This is an issue I've stumbled on which is currently causing a lot of flickering in our games, and I've finally managed to isolate it to a simple example.
When a view receives zIndex 0, it will cause any canvas that's inside that view (even deeply nested) to flicker/redraw. It does not matter if the component that contains the canvas is memoized and doesn't re-render, so it seems it's happening entirely on the native side.
In our games this bug appears on any zIndex change in a parent, not only with zIndex: 0, but in an isolated example I've only managed to reproduce it with 0.
https://github.com/user-attachments/assets/15187f3c-971b-4f6f-9d09-46572085bebe
React Native Skia Version
2.4.21 but it happens in 2.2 as well. Only affects Android. Am pretty sure the issue started after upgrading to the new arch (Expo SDK 53).
React Native Version
0.81.5 but it happens in more recent versions as well
Using New Architecture
- Enabled
Steps to Reproduce
See repository
Snack, Code Example, Screenshot, or Link to Repository
https://github.com/AdamGerthel/react-native-skia-flicker-issue
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository and reproduce the flicker on Android with the new architecture enabled, focusing on parent zIndex changes around nested canvases. Trace the React Native Skia native rendering path involved in zIndex updates; done means canvases no longer flicker or redraw visibly when the parent zIndex changes, including the isolated zIndex: 0 case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native, typescript
- Domain
- computer-graphics, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100