Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

App Crash on Reload with expo reloadAppAsync #2834

Open
pvturchik opened this issue Dec 23, 2024 · 0 comments
Open

App Crash on Reload with expo reloadAppAsync #2834

pvturchik opened this issue Dec 23, 2024 · 0 comments

Comments

@pvturchik
Copy link

pvturchik commented Dec 23, 2024

Description
I used a basic example from the documentation to draw a line using the Points component. The app crashes upon attempting to reload using the reloadAppAsync() function from expo. I have not tested other examples. Note that the application may not crash on the first attempt; sometimes, it requires multiple reloads to reproduce the issue. The crash occurs both in Expo Go and in the release build (tested on iOS)

In my real project, where I render many elements using the skia library, the crash happens consistently on every reload attempt.

In the video, you can see the app flickering — this happens when I press the "Reload app" text. On one of the reloads, the app crashes.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-12-23.at.19.16.48.mp4

Steps to reproduce

  1. Create a new Expo project - npx create-expo-app@latest (my version is 52.0.20)
  2. Install the @shopify/react-native-skia dependency - npx expo install @shopify/react-native-skia (expo installs 1.5.0 version in my project)
  3. Use the following code in your component
import { reloadAppAsync } from 'expo';
import { Pressable, Text, View } from "react-native";
import { Canvas, Points, vec } from "@shopify/react-native-skia";

const points = [
  vec(128, 0),
  vec(168, 80),
  vec(256, 93),
  vec(192, 155),
  vec(207, 244),
  vec(128, 202),
  vec(49, 244),
  vec(64, 155),
  vec(0, 93),
  vec(88, 80),
  vec(128, 0),
];

export default function Chart() {
  function reload() {
    reloadAppAsync();
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#D0D0D0' }}>
      <Canvas style={{ height: 500 }}>
        <Points
          points={points}
          mode="polygon"
          color="lightblue"
          style="stroke"
          strokeWidth={4}
        />
      </Canvas>
      <Pressable onPress={reload}>
        <Text style={{ fontSize: 24 }}>
          Reload app
        </Text>
      </Pressable>
    </View>
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant