search

margelo / react-native-skottie

▶️ Efficient lottie animations using Skia's Skottie module
https://margelo.io
MIT License
848 stars 22 forks source link

The app crashes when using multiple skottie components. #24

Closed nurikjohn closed 4 months ago

nurikjohn commented 7 months ago

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

relaxxpls commented 7 months ago

Single skottie component causes crashes aswell for me in dev mode on iOS v2.1.0

hannojg commented 7 months ago

Can you please provide any stack traces of the crashes? (The native ones from Xcode would help as well)

gunnartorfis commented 7 months ago

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);
      }}
    />
  );
hannojg commented 7 months ago

@gunnartorfis The logs you posted actually contain no traces of a crash 😅 Are you able to share a reproduction repository with the problem isolated?

hannojg commented 7 months ago

Does it happen only on iOS or android as well?

gunnartorfis commented 7 months ago

@gunnartorfis The logs you posted actually contain no traces of a crash 😅 Are you able to share a reproduction repository with the problem isolated?

Did you notice the attached .txt file? Haven't tried Android yet 😢

nurikjohn commented 7 months ago

Tested on iOS only, crash log is similar to that provided by @gunnartorfis.

kimak commented 7 months ago

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);
Karrthik-Arya commented 7 months ago

With @kimak 's patch the app no longer crashes but animation is also not loading

hannojg commented 7 months ago

Hey guys, all I need to fix this is a repository containing a reproduction. If anyone experiencing this issue could provide that, iid greatly appreciate that and can start looking into a fix 😊

Karrthik-Arya commented 7 months ago

https://github.com/Karrthik-Arya/test-rn-skottie Here its not working even for a single skottie component

relaxxpls commented 7 months ago

@hannojg Any chance you got to try the above example out!?

r0b0t3d commented 7 months ago

Revert to 2.0.4 works for me

kaoDev commented 6 months ago

I think the original issue title is not fitting anymore, but the reports about the onFinishAnimation callback are matching for me. The stack trace of the crash includes the line

auto function = options->getProperty(*runtime, "onAnimationFinish"); from https://github.com/margelo/react-native-skottie/blob/a41c5d0e1ec4d7ea74213ac08ceb2f90bf1424b5/package/cpp/RNSkSkottieView.h#L253

Here is the full stack trace from xcode when it crashed for me

Thread 1 Queue : com.apple.main-thread (serial)
#0  0x0000000102bd1d60 in facebook::react::(anonymous namespace)::ReentrancyCheck::before() at /redacted/node_modules/react-native/ReactCommon/hermes/executor/HermesExecutorFactory.cpp:103
#1  0x0000000102bd1c00 in facebook::jsi::detail::BeforeCaller<facebook::react::(anonymous namespace)::ReentrancyCheck, void>::before(facebook::react::(anonymous namespace)::ReentrancyCheck&) at /redacted/apps/mobile-app/ios/Pods/Headers/Public/hermes-engine/jsi/decorator.h:461
#2  0x0000000102bd1bd8 in facebook::jsi::WithRuntimeDecorator<facebook::react::(anonymous namespace)::ReentrancyCheck, facebook::jsi::Runtime, facebook::jsi::Runtime>::Around::Around(facebook::react::(anonymous namespace)::ReentrancyCheck&) at /redacted/apps/mobile-app/ios/Pods/Headers/Public/hermes-engine/jsi/decorator.h:793
#3  0x0000000102bd1b70 in facebook::jsi::WithRuntimeDecorator<facebook::react::(anonymous namespace)::ReentrancyCheck, facebook::jsi::Runtime, facebook::jsi::Runtime>::Around::Around(facebook::react::(anonymous namespace)::ReentrancyCheck&) at /redacted/apps/mobile-app/ios/Pods/Headers/Public/hermes-engine/jsi/decorator.h:792
#4  0x0000000102bcdda8 in facebook::jsi::WithRuntimeDecorator<facebook::react::(anonymous namespace)::ReentrancyCheck, facebook::jsi::Runtime, facebook::jsi::Runtime>::createStringFromAscii(char const*, unsigned long) at /redacted/apps/mobile-app/ios/Pods/Headers/Public/hermes-engine/jsi/decorator.h:617
#5  0x000000010224daa8 in facebook::jsi::String::createFromAscii(facebook::jsi::Runtime&, char const*, unsigned long) at /redacted/apps/mobile-app/ios/Pods/Headers/Public/hermes-engine/jsi/jsi.h:601
#6  0x000000010224d89c in facebook::jsi::String::createFromAscii(facebook::jsi::Runtime&, char const*) at /redacted/apps/mobile-app/ios/Pods/Headers/Public/hermes-engine/jsi/jsi.h:607
#7  0x00000001023154d0 in facebook::jsi::Object::getProperty(facebook::jsi::Runtime&, char const*) const at /redacted/apps/mobile-app/ios/Pods/Headers/Public/hermes-engine/jsi/jsi-inl.h:88
#8  0x00000001041b53c8 in RNSkia::RNSkSkottieView::setJsiProperties(std::__1::unordered_map<std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>>, RNJsi::JsiValueWrapper, std::__1::hash<std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>>>, std::__1::equal_to<std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>>>, std::__1::allocator<std::__1::pair<std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>> const, RNJsi::JsiValueWrapper>>>&) at /redacted/node_modules/react-native-skottie/cpp/RNSkSkottieView.h:254
#9  0x0000000103f83158 in RNSkia::RNSkJsiViewApi::setSkiaView(unsigned long, std::__1::shared_ptr<RNSkia::RNSkView>) at /redacted/node_modules/@shopify/react-native-skia/cpp/rnskia/RNSkJsiViewApi.h:254
#10 0x0000000103f83038 in RNSkia::RNSkManager::setSkiaView(unsigned long, std::__1::shared_ptr<RNSkia::RNSkView>) at /redacted/node_modules/@shopify/react-native-skia/cpp/rnskia/RNSkManager.cpp:66
#11 0x00000001041a487c in -[SkiaUIView willMoveToSuperview:] at /redacted/node_modules/@shopify/react-native-skia/ios/RNSkia-iOS/SkiaUIView.mm:87
#12 0x00000001858016e0 in -[UIView(Internal) _addSubview:positioned:relativeTo:] ()
#13 0x0000000102a419e0 in -[UIView(React) didUpdateReactSubviews] at /redacted/node_modules/react-native/React/Views/UIView+React.m:175
#14 0x0000000102a31268 in -[RCTView didUpdateReactSubviews] at /redacted/node_modules/react-native/React/Views/RCTView.m:572
#15 0x0000000102a20c2c in __48-[RCTUIManager _dispatchChildrenDidChangeEvents]_block_invoke at /redacted/node_modules/react-native/React/Modules/RCTUIManager.m:1275
#16 0x0000000102a201dc in __44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke at /redacted/node_modules/react-native/React/Modules/RCTUIManager.m:1199
#17 0x0000000102a204a0 in __44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.207 at /redacted/node_modules/react-native/React/Modules/RCTUIManager.m:1219
#18 0x0000000102a27a78 in __RCTExecuteOnMainQueue_block_invoke at /redacted/node_modules/react-native/React/Base/RCTUtils.m:265
#19 0x000000010ad880f0 in _dispatch_call_block_and_release ()
#20 0x000000010ad8993c in _dispatch_client_callout ()
#21 0x000000010ad995e4 in _dispatch_main_queue_drain ()
#22 0x000000010ad99108 in _dispatch_main_queue_callback_4CF ()
#23 0x00000001803f1a30 in __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ ()
#24 0x00000001803ec148 in __CFRunLoopRun ()
#25 0x00000001803eb5a4 in CFRunLoopRunSpecific ()
#26 0x000000018e9fbae4 in GSEventRunModal ()
#27 0x00000001852f02e4 in -[UIApplication _run] ()
#28 0x00000001852f3f5c in UIApplicationMain ()
#29 0x00000001021183cc in main at /redacted/main.m:8
#30 0x0000000109841544 in start_sim ()
#31 0x0000000109a160e0 in start ()

as a kind of workaround it is possible to use a progress value, animate it with a linear timing and then trigger the finish callback as a reaction when it reaches 1

const progress = useSharedValue(0);
useEffect(() => {
  progress.value = withTiming(1, { duration: 1000 });
}, [progress]);
useAnimatedReaction(
  () => progress.value,
  (value) => {
    if (value === 1) {
      runOnJS(onAnimationFinish)();
    }
  },
  [progress],
);
mirik999 commented 5 months ago

In my case the app crashes immediately ( expo-dev app )

"react-native-skottie": "^2.1.0", "@shopify/react-native-skia": "^0.1.230",

ovsiannykov commented 5 months ago

@hannojg What about fixes?

ansh commented 5 months ago

I'm facing this issue as well. The only way to fix it is not to use this library. On the same version as @mirik999

ansh commented 5 months ago

@hannojg How can I email you? I can send a private repo and a repro.

hannojg commented 5 months ago

Best is probably to find me on our discord community server! My name there matches my GitHub handle :)

And then you can send me a friend request + DM

ansh commented 4 months ago

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.

hannojg commented 4 months ago

Both issues:

should be fixed now in: https://github.com/margelo/react-native-skottie/releases/tag/v2.1.2

Cheers 🍻

ansh commented 4 months ago

Thank you so much @hannojg :)

That was a very fast fix. Appreciate it a lot.

thunder6230 commented 4 months ago

i am still having the issue on 2.1.4 "@shopify/react-native-skia": "1.2.3", "react-native-skottie": "^2.1.4",

alextbogdanov commented 4 months ago

It's hopeless...

ansh commented 4 months ago

Y’all need to give a repro instead of just complaining

On Fri, May 17 2024 at 22:47, Alexander Bogdanov < @.*** > wrote:

It's hopeless...

— Reply to this email directly, view it on GitHub ( https://github.com/margelo/react-native-skottie/issues/24#issuecomment-2118652483 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AB6T25MQO665CQJ4C4XERD3ZC3TOHAVCNFSM6AAAAABCOJQDRGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJYGY2TENBYGM ). You are receiving this because you commented. Message ID: <margelo/react-native-skottie/issues/24/2118652483 @ github. com>