Shopify / Shopify/react-native-skia

Canvas flickers when parent view zIndex changes to 0 [Android]

Open
#3,713 12 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.