Shopify / Shopify/react-native-skia

[android] Canvas disappear in Modal when app is resumed from background

Open
#2,135 7 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

If you have Canvas inside of RN Modal component and you suspend app to background and then return to your app, Skia Canvas completely disappear. Seems to be Android issue only.

I found out that I can hotfix this by manually triggering rerender of Canvas when AppState change, but it's not idea and there is still visible blink of Canvas.

Video:

https://github.com/Shopify/react-native-skia/assets/5837757/bb8c7002-d3a7-4b27-96b0-f8162bdb82a5

Version

0.1.233

Steps to reproduce
  1. Open Modal with Skia Canvas
  2. Switch to different app
  3. Switch back to your app => Canvas is gone
Snack, code example, screenshot, or link to a repository
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Modal, View, Button } from "react-native";
import { Canvas, Circle } from "@shopify/react-native-skia";
import React, { useState } from "react";

export default function App() {
  const [isModalVisible, setModalVisible] = useState(false);

  const showModal = () => {
    setModalVisible(true);
  };

  return (
    <View style={styles.container}>
      <Button title="Open Modal" onPress={showModal} />

      <Modal animationType="slide" visible={isModalVisible}>
        <View style={styles.container}>
          <Canvas style={{ flex: 1, width: "100%" }}>
            <Circle r={128} cx={128} cy={128} color="red" />
          </Canvas>
          <Button title="Hide Modal" onPress={() => setModalVisible(false)} />
        </View>
      </Modal>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

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 provided React Native reproduction: open a Modal containing Canvas, background the Android app, and resume it. Inspect the Android and app-resume handling involved in react-native-skia. Done means the Canvas remains visible after resuming without a manual rerender or visible blink.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, react-native
Domain
computer-graphics, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.