Shopify / Shopify/react-native-skia
[android] Canvas disappear in Modal when app is resumed from background
Nobody has claimed this yet.
- 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
- Open Modal with Skia Canvas
- Switch to different app
- 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
- 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 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