react-native-skottie: The app crashes when using multiple skottie components.

Using one Skottie component works fine, but as soon as I add another one the app immediately crashes. Removing the second component does not solve the problem. The application works after uninstalling and reinstalling.

react-native-skottie: 2.1.0

About this issue

  • Original URL
  • State: closed
  • Created 5 months ago
  • Comments: 22 (6 by maintainers)

Most upvoted comments

Revert to 2.0.4 works for me

Also having the same issue with skottie@2.1.0 on iOS and react-native@0.71.8

it’s seems related to onAnimationFinish ios implementation: Patching / commenting the following code avoid our app to crash:

--- a/node_modules/react-native-skottie/cpp/RNSkSkottieView.h
+++ b/node_modules/react-native-skottie/cpp/RNSkSkottieView.h
@@ -251,14 +251,14 @@ public:
         // The prop.second can be an object with a onAnimationFinish function
         auto options = prop.second.getAsObject();
         auto runtime = getPlatformContext()->getJsRuntime();
-        auto function = options->getProperty(*runtime, "onAnimationFinish");
+        /*auto function = options->getProperty(*runtime, "onAnimationFinish");
         if (!function.isUndefined()) {
           auto onAnimationFinish = options->getPropertyAsFunction(*runtime, "onAnimationFinish");
           // Use a shared pointer to manage the lifecycle of the JSI function
           onAnimationFinishPtr = std::make_shared<jsi::Function>(std::move(onAnimationFinish));
         } else {
             onAnimationFinishPtr = nullptr;
-        }
+        }*/
 
         std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->setStartTime(RNSkTime::GetSecs());
         setDrawingMode(RNSkDrawingMode::Continuous);

Experiencing a crash as well - just using a single Skottie component.

Expo: 50.0.2 Skottie: 2.1.0 Skia: 0.1.237

crash-log.txt

Screenshot 2024-01-30 at 09 25 47
const animationSource =
    colorScheme === 'light'
      ? require('../../assets/splash_dark.json')
      : require('../../assets/splash_light.json');

  return (
    <Skottie
      resizeMode='cover'
      loop={false}
      autoPlay
      source={animationSource}
      onAnimationFinish={() => {
        setHasPlayedAnimation(true);
      }}
    />
  );

Ive’ created the repro in a public repo: https://github.com/ansh/skottie-bug-repro @hannojg

Look at app/index.tsx

I’ve also sent it to you on Discord

Please check it out whenever you have some time. It is a big error for my app.