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

[Nodonisko]

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",
  },
});

[Nodonisko]

Hi @wcandillon, I would like to try to fix this one myself, but I am not sure where should I look first. Can give me small hint where to begin?

[tamacroft]

same, anyone know how to fix?

[Nodonisko]

@tamacroft I was not able to figure out fix for Skia itself but here is workaround that you can use. Use this hook in you components:

import { useEffect, useState } from 'react';
import { AppState } from 'react-native';

/**
 * It's necessary because Skia Android bug when Icon components are used in Modal component.
 * After app is suspended to background and then resumed, icons are not rendered.
 * This is a workaround for this issue.
 * @see https://github.com/Shopify/react-native-skia/issues/2135
 */
export const useRerenderOnAppStateChange = () => {
    const [_, setRerender] = useState(0);

    useEffect(() => {
        const handleChange = () => {
            setRerender(prev => prev + 1);
        };
        const subscription = AppState.addEventListener('change', handleChange);

        return () => subscription.remove();
    }, []);
};

And then you skia component:

const MyCanvas = () => {
   useRerenderOnAppStateChange();

   return <Canvas>.....</Canvas>
}

[fdrault]

Hello,

Is this issue specific to a particular device or Android version? I’m experiencing the same problem, but it doesn't happen on all my devices.

The Skia Canvas disappear just as it does in your video, but only on my Huawei P30 running Android 10.

[Dokome]

Hello,

Is this issue specific to a particular device or Android version? I’m experiencing the same problem, but it doesn't happen on all my devices.

The Skia Canvas disappear just as it does in your video, but only on my Huawei P30 running Android 10.

Hello, Have you solved this problem? I meet the save issue at my Honor 90Pro base on Android 12

[fdrault]

Hello, Is this issue specific to a particular device or Android version? I’m experiencing the same problem, but it doesn't happen on all my devices. The Skia Canvas disappear just as it does in your video, but only on my Huawei P30 running Android 10.

Hello, Have you solved this problem? I meet the save issue at my Honor 90Pro base on Android 12

Sadly, no. I don't have time at all to investigate, but it seems to be manufacturer specific. Honor and Huawei are pretty similar