SVG Disappears Outside SafeAreaView on Tab Switch in react-native-skia

[chuducandev]

Description

Description

I encountered an issue with the react-native-skia library where an SVG image rendered outside a SafeAreaView disappears after switching tabs in a createBottomTabNavigator. The SVG inside SafeAreaView renders consistently across tab switches, but the one outside disappears when returning to the first tab.

Additional Context

The issue might relate to how react-native-skia handles component re-renders outside of SafeAreaView on tab switch. Setting detachInactiveScreens={false} on the navigator did not resolve this.

Workaround Attempts

Wrapping both Canvas components inside a SafeAreaView resolved the issue, but ideally, both should render correctly regardless of their placement.

Thank you for looking into this! Please let me know if you need further information or if there are potential workarounds for this issue.

Version

1.5.0

Steps to reproduce

Steps

1. Clone the code below into a new project with the following dependencies and configuration.
2. Initially, both SVGs display correctly on the first tab.
3. Switch to the second tab; both SVGs also display correctly.
4. Switch back to the first tab, where only the SVG inside the SafeAreaView is visible.

Expected Behavior

Both SVGs should render consistently when switching between tabs, regardless of their placement in SafeAreaView.

Actual Behavior

The SVG outside the SafeAreaView disappears when switching back to the first tab.

Snack, code example, screenshot, or link to a repository

Environment

"@shopify/react-native-skia": "1.5.0",
"react-native": "0.76.0",
"@react-navigation/bottom-tabs": "6.6.1",
"@react-navigation/native": "6.1.18",
"react-native-safe-area-context": "4.13.1",

Code to Reproduce

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { Canvas, Group, ImageSVG, useSVG } from '@shopify/react-native-skia';
import React from 'react';
import 'react-native-gesture-handler';
import { View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

const Screen = () => {
  const svg = useSVG(require('@simpled-ai-kits/assets/svg/logo.svg'));

  return (
    <View>
      <SafeAreaView>
        <Canvas style={{ width: 32, height: 32 }}>
          <Group transform={[
            { translateX: 0 },
            { translateY: 0 },
            { scaleX: 0.16 },
            { scaleY: 0.16 },
          ]}>
            <ImageSVG svg={svg} x={0} y={0} width={32} height={32} />
          </Group>
        </Canvas>
      </SafeAreaView>
      <Canvas style={{ width: 32, height: 32 }}>
        <Group transform={[
          { translateX: 0 },
          { translateY: 0 },
          { scaleX: 0.16 },
          { scaleY: 0.16 },
        ]}>
          <ImageSVG svg={svg} x={0} y={0} width={32} height={32} />
        </Group>
      </Canvas>
    </View>
  );
};

const Tab = createBottomTabNavigator();

export const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="lesson.learningPath"
          component={Screen}
          options={{
            headerShown: false,
          }}
        />
        <Tab.Screen
          name="scenario.overview"
          component={Screen}
          options={{
            headerShown: false,
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

Recording Video

https://github.com/user-attachments/assets/864af123-2dfb-41a3-872d-7ab284207d78

[wcandillon]

Thank you for reporting this Anderson, I don't understand the issue. Could help me to try to get a sense of what is happening? Is is related to ImageSVG only or any Skia Canvas will disappear? if you have a RN view with the canvas, will the view be visible as well?

I hope you can help me get a sense of what might be happening.

[chuducandev]

I believe this bug is related to the ImageSVG component. When I set the backgroundColor: red style on the Canvas component, I noticed that it persisted even after switching back to the tab. Additionally, removing the wrapped Group component did not resolve the issue.

const Screen = () => {
  const svg = useSVG(require('@simpled-ai-kits/assets/svg/logo.svg'));

  return (
    <View>
      <SafeAreaView>
        <Canvas style={{ width: 32, height: 32, backgroundColor: 'red' }}>
          <Group transform={[
            { translateX: 0 },
            { translateY: 0 },
            { scaleX: 0.16 },
            { scaleY: 0.16 },
          ]}>
            <ImageSVG svg={svg} x={0} y={0} width={32} height={32} />
          </Group>
        </Canvas>
      </SafeAreaView>
      <Canvas style={{ width: 32, height: 32, backgroundColor: 'red' }}>
        <Group transform={[
          { translateX: 0 },
          { translateY: 0 },
          { scaleX: 0.16 },
          { scaleY: 0.16 },
        ]}>
          <ImageSVG svg={svg} x={0} y={0} width={32} height={32} />
        </Group>
      </Canvas>
    </View>
  );
};

[wcandillon]

@chuducandev I tried the example but couldn't reproduce the issue. Maybe if you do a small repository where we can reproduce the issue?

[chuducandev]

@wcandillon Thanks for looking into this! I’ve created a small repository to help reproduce the issue. You can find it here: GitHub Repo - MissingSVGAfterSwitching. Please let me know if you need any further details or have additional questions.