margelo / react-native-skottie Goto Github PK

▶️ Efficient lottie animations using Skia's Skottie module

License: MIT License

CMake 3.95% C++ 30.93% Java 10.19% JavaScript 3.12% Ruby 5.42% Swift 0.08% C 0.14% Objective-C 8.33% Objective-C++ 5.93% TypeScript 28.10% Shell 0.56% Kotlin 3.25%

animations bodymovin lottie react-native rive skia skottie

react-native-skottie's People

Contributors

Stargazers

Watchers

Forkers

jferrettiboke mindkhichdi bilyk-alexander immanewel tomekzaw irontony donald-edinam alierenkara rahulrajsbkk anhunghezo bibek99 laurens-lamberts gabimoncha idrakimuhamad kokeaft jeongshin azzappapp commencement-technology 021dev

react-native-skottie's Issues

Build error with expo sdk 50

I have the following error on the building pipeline of an android dev client:

Skia is included such as skottie@latest
Since there is no other installing requirements i don't know what causes the problem.

Could we use skottie inside rn-skia canvas

I am exploring the use of react-native-skottie in a project. I'm interested in knowing if there's a possibility or future plans to integrate react-native-skottie within a react-native-skia Canvas.

something like this

<Canvas>
  <Skottie/>
  <OtherCanvasChildern/>
</Canvas>

This integration could enable combining Lottie animations with Skia's drawing capabilities, offering enhanced UI possibilities in React Native apps.

Is this a feasible enhancement for future releases?

dotLottie file support on native side

Hi, is there a way to add dotLottie files to ios and android native side? So that we can directly pass the file name?

Missing file `JniSkiaBaseView.h`

I got the error: "JniSkiaBaseView.h file not found" when building android app (Android Studio Iguana). Seem like this file is missing in package/android/cpp/jni/include

EAS Dev client failed

We have an issue when trying to use skottie package, here is logs:


❌  (ios/Pods/Headers/Public/react-native-skia/JsiSkTypeface.h:40:41)

  38 |             ? static_cast<int>(arguments[1].asNumber())
  39 |             : getObject()->textToGlyphs(str.c_str(), str.length(),
> 40 |                                         SkTextEncoding::kUTF8, nullptr, 0);
     |                                         ^ incomplete type 'SkTextEncoding' named in nested name specifier
  41 |     std::vector<SkGlyphID> glyphIDs;
  42 |     glyphIDs.resize(numGlyphIDs);
  43 |     getObject()->textToGlyphs(str.c_str(), str.length(), SkTextEncoding::kUTF8,

❌  (ios/Pods/Headers/Public/react-native-skia/JsiSkTypeface.h:43:58)

  41 |     std::vector<SkGlyphID> glyphIDs;
  42 |     glyphIDs.resize(numGlyphIDs);
> 43 |     getObject()->textToGlyphs(str.c_str(), str.length(), SkTextEncoding::kUTF8,
     |                                                          ^ incomplete type 'SkTextEncoding' named in nested name specifier
  44 |                               static_cast<SkGlyphID *>(glyphIDs.data()),
  45 |                               numGlyphIDs);
  46 |     auto jsiGlyphIDs = jsi::Array(runtime, numGlyphIDs);

❌  (ios/Pods/Headers/Public/react-native-skia/JsiSkFont.h:67:47)

  65 |     auto str = arguments[0].asString(runtime).utf8(runtime);
  66 |     auto numGlyphIDs = getObject()->countText(str.c_str(), str.length(),
> 67 |                                               SkTextEncoding::kUTF8);
     |                                               ^ incomplete type 'SkTextEncoding' named in nested name specifier
  68 |     std::vector<SkGlyphID> glyphs;
  69 |     glyphs.resize(numGlyphIDs);
  70 |     int glyphsSize = static_cast<int>(numGlyphIDs);

❌  (ios/Pods/Headers/Public/react-native-skia/JsiSkFont.h:71:58)

  69 |     glyphs.resize(numGlyphIDs);
  70 |     int glyphsSize = static_cast<int>(numGlyphIDs);
> 71 |     getObject()->textToGlyphs(str.c_str(), str.length(), SkTextEncoding::kUTF8,
     |                                                          ^ incomplete type 'SkTextEncoding' named in nested name specifier
  72 |                               static_cast<SkGlyphID *>(glyphs.data()),
  73 |                               glyphsSize);
  74 |     std::vector<SkScalar> widthPtrs;

❌  (ios/Pods/Headers/Public/react-native-skia/JsiSkFont.h:94:59)

  92 |     if (count > 1) {
  93 |       auto paint = JsiSkPaint::fromValue(runtime, arguments[1]);
> 94 |       getObject()->measureText(str.c_str(), str.length(), SkTextEncoding::kUTF8,
     |                                                           ^ incomplete type 'SkTextEncoding' named in nested name specifier
  95 |                                &bounds, paint.get());
  96 |     } else {
  97 |       getObject()->measureText(str.c_str(), str.length(), SkTextEncoding::kUTF8,

❌  (ios/Pods/Headers/Public/react-native-skia/JsiSkFont.h:97:59)

   95 |                                &bounds, paint.get());
   96 |     } else {
>  97 |       getObject()->measureText(str.c_str(), str.length(), SkTextEncoding::kUTF8,
      |                                                           ^ incomplete type 'SkTextEncoding' named in nested name specifier
   98 |                                &bounds);
   99 |     }
  100 |     return jsi::Object::createFromHostObject(

❌  (ios/Pods/Headers/Public/react-native-skia/JsiSkFont.h:126:38)

  124 |             ? static_cast<int>(arguments[1].asNumber())
  125 |             : getObject()->countText(str.c_str(), str.length(),
> 126 |                                      SkTextEncoding::kUTF8);
      |                                      ^ incomplete type 'SkTextEncoding' named in nested name specifier
  127 |     std::vector<SkGlyphID> glyphIDs;
  128 |     glyphIDs.resize(numGlyphIDs);
  129 |     getObject()->textToGlyphs(str.c_str(), str.length(), SkTextEncoding::kUTF8,

❌  (ios/Pods/Headers/Public/react-native-skia/JsiSkFont.h:129:58)

  127 |     std::vector<SkGlyphID> glyphIDs;
  128 |     glyphIDs.resize(numGlyphIDs);
> 129 |     getObject()->textToGlyphs(str.c_str(), str.length(), SkTextEncoding::kUTF8,
      |                                                          ^ incomplete type 'SkTextEncoding' named in nested name specifier
  130 |                               static_cast<SkGlyphID *>(glyphIDs.data()),
  131 |                               numGlyphIDs);
  132 |     auto jsiGlyphIDs = jsi::Array(runtime, numGlyphIDs);```

onAnimationFinish is not invoked

onAnimationFinish isn't called for my lottie animation on iOS. I have tested without loop (and with aswell).
I am unsure about Android.

iOS app crash when playing a lottie file

My app crash when swapping with Skottie. This lottie load and played fine using lottie-react-native.

The usage:

const Splash = () => {
    const memoStyle = useStyle(
        () => ({
        width: "100%",
        height: deviceHeight,
        }),
        []
    )
    return (
        <Skottie
            source={lottie.splash} // the require are inside a barrel file
            autoPlay
            resizeMode="cover"
            style={memoStyle}
        />
    )
}

The stack trace that probably relevant to the app as below.

0   libsystem_kernel.dylib        	       0x10bef93b0 __pthread_kill + 8
1   libsystem_pthread.dylib       	       0x10bf83124 pthread_kill + 256
2   libsystem_c.dylib             	       0x180160648 __abort + 112
3   libsystem_c.dylib             	       0x1801605d8 abort + 116
4   libsystem_c.dylib             	       0x18015fa24 __assert_rtn + 268
5   my-app-dev          	       0x106e77e98 RNJsi::JsiValueWrapper::getAsBool() + 76 (JsiValueWrapper.h:95)
6   my-app-dev          	       0x106e6eb8c 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>>>&) + 1804 (RNSkSkottieView.h:275)
7   my-app-dev          	       0x106c2cd10 RNSkia::RNSkJsiViewApi::setSkiaView(unsigned long, std::__1::shared_ptr<RNSkia::RNSkView>) + 228 (RNSkJsiViewApi.h:302)
8   my-app-dev          	       0x106c2cbf0 RNSkia::RNSkManager::setSkiaView(unsigned long, std::__1::shared_ptr<RNSkia::RNSkView>) + 132 (RNSkManager.cpp:66)
9   my-app-dev          	       0x106e5dc94 -[SkiaUIView willMoveToSuperview:] + 1024 (SkiaUIView.mm:87)
10  UIKitCore                     	       0x1858016e0 -[UIView(Internal) _addSubview:positioned:relativeTo:] + 448
11  my-app-dev          	       0x106275e6c -[UIView(React) didUpdateReactSubviews] + 252 (UIView+React.m:175)
12  my-app-dev          	       0x106264698 -[RCTView didUpdateReactSubviews] + 100 (RCTView.m:580)
13  my-app-dev          	       0x106253be8 __48-[RCTUIManager _dispatchChildrenDidChangeEvents]_block_invoke + 316 (RCTUIManager.m:1284)
14  my-app-dev          	       0x106253198 __44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke + 288 (RCTUIManager.m:1208)
15  my-app-dev          	       0x10625345c __44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke_2 + 376 (RCTUIManager.m:1228)
16  my-app-dev          	       0x10625ab8c __RCTExecuteOnMainQueue_block_invoke + 40 (RCTUtils.m:265)

It doesn't crash on other lottie sources, so I'm thinking this lottie file had to do with the crash.

For your reference, here is the lottie JSON.
splash.json

update

Spoke too soon, some other lottie file also crashing unfortunately.

Thread 0 Crashed::  Dispatch queue: com.apple.main-thread
0   myapp-dev          	       0x1039c1cac facebook::react::(anonymous namespace)::ReentrancyCheck::before() + 340 (HermesExecutorFactory.cpp:109)
1   myapp-dev          	       0x1039c1b4c facebook::jsi::detail::BeforeCaller<facebook::react::(anonymous namespace)::ReentrancyCheck, void>::before(facebook::react::(anonymous namespace)::ReentrancyCheck&) + 24 (decorator.h:461)
2   myapp-dev          	       0x1039c1b24 facebook::jsi::WithRuntimeDecorator<facebook::react::(anonymous namespace)::ReentrancyCheck, facebook::jsi::Runtime, facebook::jsi::Runtime>::Around::Around(facebook::react::(anonymous namespace)::ReentrancyCheck&) + 44 (decorator.h:793)
3   myapp-dev          	       0x1039c1abc facebook::jsi::WithRuntimeDecorator<facebook::react::(anonymous namespace)::ReentrancyCheck, facebook::jsi::Runtime, facebook::jsi::Runtime>::Around::Around(facebook::react::(anonymous namespace)::ReentrancyCheck&) + 36 (decorator.h:792)
4   myapp-dev          	       0x1039bd648 facebook::jsi::WithRuntimeDecorator<facebook::react::(anonymous namespace)::ReentrancyCheck, facebook::jsi::Runtime, facebook::jsi::Runtime>::createStringFromAscii(char const*, unsigned long) + 52 (decorator.h:617)
5   myapp-dev          	       0x10205ff90 facebook::jsi::String::createFromAscii(facebook::jsi::Runtime&, char const*, unsigned long) + 56 (jsi.h:601)
6   myapp-dev          	       0x10205fd84 facebook::jsi::String::createFromAscii(facebook::jsi::Runtime&, char const*) + 72 (jsi.h:607)
7   myapp-dev          	       0x10234196c facebook::jsi::Object::getProperty(facebook::jsi::Runtime&, char const*) const + 68 (jsi-inl.h:88)
8   myapp-dev          	       0x10398cc78 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>>>&) + 984 (RNSkSkottieView.h:253)
9   myapp-dev          	       0x10374b130 RNSkia::RNSkJsiViewApi::setSkiaView(unsigned long, std::__1::shared_ptr<RNSkia::RNSkView>) + 228 (RNSkJsiViewApi.h:302)
10  myapp-dev          	       0x10374b010 RNSkia::RNSkManager::setSkiaView(unsigned long, std::__1::shared_ptr<RNSkia::RNSkView>) + 132 (RNSkManager.cpp:66)
11  myapp-dev          	       0x10397c0b4 -[SkiaUIView willMoveToSuperview:] + 1024 (SkiaUIView.mm:87)
12  UIKitCore                     	       0x1858016e0 -[UIView(Internal) _addSubview:positioned:relativeTo:] + 448
13  myapp-dev          	       0x102d891ac -[UIView(React) didUpdateReactSubviews] + 252 (UIView+React.m:175)
14  myapp-dev          	       0x102d779d8 -[RCTView didUpdateReactSubviews] + 100 (RCTView.m:580)
15  myapp-dev          	       0x102d66f28 __48-[RCTUIManager _dispatchChildrenDidChangeEvents]_block_invoke + 316 (RCTUIManager.m:1284)
16  myapp-dev          	       0x102d664d8 __44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke + 288 (RCTUIManager.m:1208)
17  myapp-dev          	       0x102d6679c __44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke_2 + 376 (RCTUIManager.m:1228)
18  myapp-dev          	       0x102d6decc __RCTExecuteOnMainQueue_block_invoke + 40 (RCTUtils.m:265)
19  libdispatch.dylib             	       0x18016b4f4 _dispatch_call_block_and_release + 24
20  libdispatch.dylib             	       0x18016cd3c _dispatch_client_callout + 16
21  libdispatch.dylib             	       0x18017bb24 _dispatch_main_queue_drain + 1272
22  libdispatch.dylib             	       0x18017b61c _dispatch_main_queue_callback_4CF + 40
23  CoreFoundation                	       0x1803f1a30 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 12
24  CoreFoundation                	       0x1803ec148 __CFRunLoopRun + 1936
25  CoreFoundation                	       0x1803eb5a4 CFRunLoopRunSpecific + 572
26  GraphicsServices              	       0x18e9fbae4 GSEventRunModal + 160
27  UIKitCore                     	       0x1852f02e4 -[UIApplication _run] + 868
28  UIKitCore                     	       0x1852f3f5c UIApplicationMain + 124
29  myapp-dev          	       0x100ff9df0 main + 96 (main.m:7)
30  dyld_sim                      	       0x1089d9544 start_sim + 20
31  dyld                          	       0x108ae20e0 start + 2360

Missing prop `colorFilters`

Kudos to @hannojg for the release of v1 of react-native-skottie! 🎉

Today, I attempted to migrate our app from lottie-react-native to react-native-skottie and encountered an issue with a missing property. Our application utilizes relatively simple Lottie animations, but we frequently adjust the colors. For example, our animations feature bright colors on a dark background when dark mode is enabled. This functionality is achieved in lottie-react-native through the colorFilters prop. However, I noticed this prop seems to be absent in react-native-skottie. This feature would be essential for us to be able to use this library as a drop-in replacement.

Skottie crashes on release builds on Android, adding proguard rule stops it from building a release apk

The app crashes as soon as you navigate to a page where there is a Skottie component. This was happening on Android. Ios worked fine. Let me know if you need extra logs or anything.

React code:

import cameraPermission from './cameraPermission.json';
...
 <Skottie
  style={styles.animationStyle}
  source={micPermission}
  autoPlay
  loop
  resizeMode="contain"
/>

Sentry report:

Exception in HostFunction: java.lang.NoSuchMethodError: no non-static method "Lcom/skiaskottie/DotLottieReader;.readDotLottie(Ljava/lang/String;)Ljava/lang/String;

LogCat specifically for the release apk:

  
E  FATAL EXCEPTION: mqt_native_modules
Process: com.xxx.xxx, PID: 26091
com.facebook.react.common.JavascriptException: Error: Exception in HostFunction: java.lang.NoSuchMethodError: no non-static method "Lcom/skiaskottie/DotLottieReader;.readDotLottie(Ljava/lang/String;)Ljava/lang/String;", js engine: hermes, stack:
callNativeSyncHook@1:101483
nonPromiseMethodWrapper@1:98493
anonymous@1:2612919
loadModuleImplementation@1:75222
guardedLoadModule@1:74764
metroRequire@1:74386
anonymous@1:2612067
loadModuleImplementation@1:75222
guardedLoadModule@1:74721
metroRequire@1:74386
PermissionsRequired@1:2611442
renderWithHooks@1:364797
beginWork$1@1:406649
performUnitOfWork@1:393234
workLoopSync@1:393094
renderRootSync@1:392975
performSyncWorkOnRoot@1:390366
flushSyncCallbacks@1:354441
batchedUpdatesImpl@1:407047
batchedUpdates@1:347251
_receiveRootNodeIDEvent@1:347536
receiveTouches@1:401729
__callFunction@1:102741
anonymous@1:101046
__guard@1:102002
callFunctionReturnFlushedQueue@1:101004

at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(SourceFile:76)
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.bridge.JavaMethodWrapper.invoke(SourceFile:143)
at com.facebook.react.bridge.JavaModuleWrapper.invoke(SourceFile:22)
at com.facebook.jni.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:942)
at android.os.Handler.dispatchMessage(Handler.java:99)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(SourceFile:1)
at android.os.Looper.loopOnce(Looper.java:211)
at android.os.Looper.loop(Looper.java:300)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(SourceFile:38)
at java.lang.Thread.run(Thread.java:1012)

Add support for embedded images

We are using a lottie animation with embedded images in our onboarding flow, the images are part of the JSON lottie file as base64 strings.

Currently it looks like those base64 elements are ignored, the animation is still playing, but only the vector based parts are visible.

Is support for rasterized elements is planned?

Can not build iOS after installing the package

Platform: iOS
@shopify/react-native-skia: 0.1.231

Build error using rnskia > 1.x.x

Thanks for awesome library, i got crash when use skottie

import LottieAnimationFile from 'assets/lottie/loading.json';
import { Skottie } from 'react-native-skottie';

import React from 'react';

const Loading = () => {
  return (
    <Skottie
      source={LottieAnimationFile}
      style={{ width: 100, height: 100 }}
      autoPlay
      loop
    />
  );
};

export default Loading;

Version

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

IOS build issue

Platform iOS
Cloned main on commit 3850942410b9e9d4fcbfc3ca2a8ad601198ec0f4
and got the error

repo/node_modules/react-native-skottie/cpp/JsiSkSkottie.h:11:10 'modules/skottie/include/Skottie.h' file not found

After Effects Animations disappear at the end

As per title: whenever a JSON animation created from After Effects is played with autoPlay=true and loop=false, the entire animation disappears once completed. This does not happen in lottie-react-native.

What I've tried:

Adding extra frames at the end
dotLottie files (these don't work in rn-skottie as of today)

The animation keeps looping

The animation loops regardless of the "loop" property.
Also tried setting autoPlay to false and playing the animation via imperative API, once started the animation never stops.
I only tested it on iOS, so I don't know what will happen on Android.

react-native-skottie: 2.0.3

`loop` are false by default

I've noticed my lottie are no longer looping. Upon checking in the doc, it mentioned that loop are true by default. But viewing the SkottieViewProps type, it seems that it is false by default. Should it be default to true or false? If it to follow rn-lottie, it should be true.

Support for `startFrame` and `endFrame` arguments in play ref method

The current implementation of the play ref method in react-native-skottie does not support specifying start and end frames, which is a feature in lottie-react-native. This functionality allows for greater control over the animation segments, especially useful in cases where only a part of the animation needs to be played.

iOS build error after upgrading to Expo 51.

I'm in the midst of upgrading my app's Expo SDK to 51. After all that, I'm getting this error when building the app.

Latest skottie and latest skia.

ld: Undefined symbols:
  skottie::Animation::seekFrameTime(double, sksg::InvalidationController*), referenced from:
      skottie::Animation::seek(float, sksg::InvalidationController*) in react_native_skia_skottie[5](react-native-skia-skottie.o)
      RNSkia::RNSkSkottieRenderer::performDraw(std::__1::shared_ptr<RNSkia::RNSkCanvasProvider>) in react_native_skia_skottie[9](SkiaSkottieViewManager.o)
  skottie::Animation::Builder::make(char const*, unsigned long), referenced from:
      RNSkia::JsiSkSkottie::createCtor(std::__1::shared_ptr<RNSkia::RNSkPlatformContext>)::'lambda'(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const in react_native_skia_skottie[5](react-native-skia-skottie.o)
  skottie::Animation::Builder::Builder(unsigned int), referenced from:
      RNSkia::JsiSkSkottie::createCtor(std::__1::shared_ptr<RNSkia::RNSkPlatformContext>)::'lambda'(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const in react_native_skia_skottie[5](react-native-skia-skottie.o)
  skottie::Animation::Builder::~Builder(), referenced from:
      RNSkia::JsiSkSkottie::createCtor(std::__1::shared_ptr<RNSkia::RNSkPlatformContext>)::'lambda'(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const in react_native_skia_skottie[5](react-native-skia-skottie.o)
      RNSkia::JsiSkSkottie::createCtor(std::__1::shared_ptr<RNSkia::RNSkPlatformContext>)::'lambda'(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const in react_native_skia_skottie[5](react-native-skia-skottie.o)
  skottie::Animation::seekFrame(double, sksg::InvalidationController*), referenced from:
      RNSkia::RNSkSkottieRenderer::resetPlayback() in react_native_skia_skottie[9](SkiaSkottieViewManager.o)
      RNSkia::RNSkSkottieRenderer::setSrc(std::__1::shared_ptr<facebook::jsi::HostObject>) in react_native_skia_skottie[9](SkiaSkottieViewManager.o)
  skottie::Animation::~Animation(), referenced from:
      SkNVRefCnt<skottie::Animation>::unref() const in react_native_skia_skottie[5](react-native-skia-skottie.o)
  skottie::Animation::render(SkCanvas*, SkRect const*) const, referenced from:
      RNSkia::JsiSkSkottie::render(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) in react_native_skia_skottie[5](react-native-skia-skottie.o)
      RNSkia::RNSkSkottieRenderer::performDraw(std::__1::shared_ptr<RNSkia::RNSkCanvasProvider>)::'lambda'(SkCanvas*)::operator()(SkCanvas*) const in react_native_skia_skottie[9](SkiaSkottieViewManager.o)

If I removed Skottie, it can build fine.

macos m1 arm64 build error

Alread used pod install

❌  Undefined symbols for architecture arm64
┌─ Symbol: skottie::Animation::seekFrameTime(double, sksg::InvalidationController*)
└─ Referenced from: skottie::Animation::seek(float, sksg::InvalidationController*) in libreact-native-skia-skottie.a[4](react-native-skia-skottie.o)


❌  ld: symbol(s) not found for architecture arm64



❌  clang: error: linker command failed with exit code 1 (use -v to see invocation)

react-native-skottie 2.1.4
@shopify/react-native-skia 1.3.6

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

Build Error while enabling proguard

Process: com.xxx.android, PID: 25405
com.facebook.react.common.JavascriptException: Error: Exception in HostFunction: java.lang.NoSuchMethodError: no non-static method "Lcom/skiaskottie/DotLottieReader;.readDotLottie(Ljava/lang/String;)Ljava/lang/String;", js engine: hermes, stack:
callNativeSyncHook@1:94633
nonPromiseMethodWrapper@1:91639
anonymous@1:1776457
loadModuleImplementation@1:70641
guardedLoadModule@1:70183
metroRequire@1:69805
anonymous@1:1775609
loadModuleImplementation@1:70641
guardedLoadModule@1:70140
metroRequire@1:69805
LoadMore@1:2046900
renderWithHooks@1:363068
beginWork$1@1:404988
performUnitOfWork@1:391547
workLoopSync@1:391407
renderRootSync@1:391288
performSyncWorkOnRoot@1:388680
flushSyncCallbacks@1:352705
batchedUpdatesImpl@1:405387
batchedUpdates@1:345516
_receiveRootNodeIDEvent@1:345801
receiveTouches@1:400068
__callFunction@1:95893
anonymous@1:94195
__guard@1:95153
callFunctionReturnFlushedQueue@1:94153

	at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(Unknown Source:75)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.facebook.react.bridge.JavaMethodWrapper.invoke(Unknown Source:142)
	at com.facebook.react.bridge.JavaModuleWrapper.invoke(Unknown Source:21)
	at com.facebook.jni.NativeRunnable.run(Native Method)
	at android.os.Handler.handleCallback(Handler.java:958)
	at android.os.Handler.dispatchMessage(Handler.java:99)
	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(Unknown Source:0)
	at android.os.Looper.loopOnce(Looper.java:230)
	at android.os.Looper.loop(Looper.java:319)
	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(Unknown Source:37)
	at java.lang.Thread.run(Thread.java:1012)

Im using v2.1.4 with rn v0.73.8

[BUG] Tried to register two views with the same name SkiaPictureView

Hello, I love Skottie. Thanks for introducing amazing lib :)

I found out when I use useFont and skottie together, my app crashed.
I guess there are some issues using them together.

Here is the code below.

import { useFont } from '@shopify/react-native-skia';
import { FC } from 'react';
import { Skottie } from 'react-native-skottie';

export const Example: FC = () => {
  const font = useFont(require('.Hind-Bold.ttf'));
  
  return (
    <Skottie
      source={require('./lottie.json')}
      style={{ width: '100%', height: '100%' }}
      autoPlay
      loop
    />
  );
};

Thanks :)

Minimum react-native version ?

Hey guys, thanks for this awesome library. I wanted to try it out but facing a problem in installing this with various errors on iOS and Android.

Upon googling, most of the errors seems to be hinting towards the fact that I am on [email protected] and this library probably requires a higher minimum version.

Is that correct?

Please add support to speed and duration properties

Please make Skottie to respect speed/duration properties so it actually effects actual animation speed.

Scottie does not display animation if there is a base64 resource in the animation file

If the source object has an image value in base64 format, it is not displayed.

But Lottie displays everything perfectly.

Example: (Full example file - https://file.io/Nncoal1QPHtL)

{
  "v": "4.8.0",
  "ip": 0,
  "op": 90,
  "fr": 30,
  "w": 199,
  "h": 288,
  "nm": "M",
  "assets": [
    {
      "h": 372,
      "w": 180,
      "id": "image_0",
      "p": "data:image/webp;base64,UklGRAAAAA",
      "u": "",
      "e": 1
    },
    ...
  ]
  ...
}

Add fabric support

Hey guys, i couldn't find in the docs if there is support. If not, is there any work being done for it? tks.

'RNSkiaModule.h' file not found with <angled> include; use "quotes" instead

simple patch for ios native module

Can't turn Skottie into an animated component via `Reanimated.createAnimatedComponent()`

The following code:

    import Reanimated from 'react-native-reanimated';

    const AnimatedSkottieView = Reanimated.createAnimatedComponent(Skottie);

    <AnimatedSkottieView
      ref={scottieRef}
      source={require('assets/animations/hello-world.json')}
      style={{
        width: 250,
        height: 250
      }}
    />

results in the following error:

Error: Argument appears to not be a ReactComponent. Keys: play,pause,reset

Would be cool if we could turn it into an animated component to do things like making it hover, pulsate and other subtle animations on the component itself. Aside from that the component is working great, super smooth transition from react-native-lottie, thanks!

Error while using dotLottie files.

When you try to use dotLottie files with rn-skottie it throws the below error. Android logcat seemed to give the same information as well.

...

import {Skottie} from 'react-native-skottie';
import {cameraPermission, micPermission} from '../../../assets/animations';

    ...
    
    <Skottie
          style={styles.animationStyle}
          source={micPermission}
          autoPlay
          loop
          resizeMode="contain"
    />
    
    ...

Here are some example files: dotLottieFiles.zip

Sidenote: When I download files from lottie files, they download as a zip, so I have to manually convert the file extention to .lottie. Don't think it has anything to do with it.

Skottie causing crashes on Android release build only on Expo SDK 51

We've recently upgrade expo SDK 51 and didn't realise this as it only happened in release build. However, the crash are rather hard to pin-point because the only trace in sentry/crashlytics is [TypeError: undefined is not a function]. It doesn't show at which line and which function, and doesn't point that to skottie at all.

At first I thought it was reanimated issue, then I suspect it to be Skia. Anything that have the Canvas will crash the app instantly. Not until I found this issue..

After replacing all skotie instance with rn-lottie, the issue gone away.

I will try to create a repro tomorrow, if that's needed.

Dotlotties not loading on iOS

The library works great with lottie files, but I am unable to load a dotlottie file on iOS

      <Skottie
        autoPlay
        loop={false}
        source={'../assets/lotties/coins.lottie'}
        style={styles.splash}
        resizeMode="cover"
        onAnimationFinish={closeSplash}
      />

Version: 2.0.3

First class support for expo

As this is just a regular native module I'd assume it'd work with expo (not go) out of the box. However, users on twitter are reporting that it doesn't work, getting the following error:

"Error: The package 'react-native-skottie' doesn't seem to be linked. Make sure:

- You rebuilt the app after installing the package
- You are not using Expo Go"

Progress controlled crashes example app

Reproducing repo: example app

Instructions: Enabling Progress controlled switch and opening any animation crashes the app.

Simulator screenshot

Xcode screenshot

Feature request: Play a section of the animation

It would be great if Skottie's play method would accept start and end frame parameters, similar to Lottie's approach.
For reference: Lottie React Native - Methods (Imperative API).

Missing `isCancelled` argument in `onAnimationFinish` callback

The current implementation of the onAnimationFinish callback lacks the isCancelled argument, which is a feature in lottie-react-native. This argument allows for distinguishing between animations that finish naturally and those interrupted by user actions or app processes.

JSI import bug for Android react-native-skottie v2.0.3

After installing the latest version 2.0.3, Android gives build error.

/node_modules/react-native-skottie/android/../cpp/JsiSkSkottie.h:11:10: fatal error: 'modules/skottie/include/Skottie.h' file not found
  #include <modules/skottie/include/Skottie.h>
           ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

It seems that the #include path is incorrect in react-native-skottie/cpp/JsiSkSkottie.h:

 #pragma once

#include <jsi/jsi.h>

#include <JsiSkCanvas.h>
#include <JsiSkHostObjects.h>

#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdocumentation"

#include <modules/skottie/include/Skottie.h> - this line triggers build error

#pragma clang diagnostic pop

namespace RNSkia {
using namespace facebook;

class JsiSkSkottie : public JsiSkWrappingSkPtrHostObject<skottie::Animation> {
public:
  // #region Properties
  JSI_PROPERTY_GET(duration) {
    return static_cast<double>(getObject()->duration());
  }
  JSI_PROPERTY_GET(fps) {
    return static_cast<double>(getObject()->fps());
  }

  JSI_PROPERTY_GET(__typename__) {
    return jsi::String::createFromUtf8(runtime, "Skottie");
  }

  JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(JsiSkSkottie, duration), JSI_EXPORT_PROP_GET(JsiSkSkottie, fps),
                              JSI_EXPORT_PROP_GET(JsiSkSkottie, __typename__))
  // #endregion

  // #region Methods
  JSI_HOST_FUNCTION(seek) {
    getObject()->seek(arguments[0].asNumber());
    return jsi::Value::undefined();
  }

  JSI_HOST_FUNCTION(render) {
    auto canvas = arguments[0].asObject(runtime).asHostObject<JsiSkCanvas>(runtime)->getCanvas();

    auto rect = JsiSkRect::fromValue(runtime, arguments[1]);
    if (canvas != nullptr && rect != nullptr) {
      getObject()->render(canvas, rect.get());
    }

    return jsi::Value::undefined();
  }

  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkSkottie, seek), JSI_EXPORT_FUNC(JsiSkSkottie, render), JSI_EXPORT_FUNC(JsiSkSkottie, dispose))
  // #endregion

  /**
    Constructor
  */
  JsiSkSkottie(std::shared_ptr<RNSkPlatformContext> context, const sk_sp<skottie::Animation> animation)
      : JsiSkWrappingSkPtrHostObject<skottie::Animation>(std::move(context), std::move(animation)) {}

  /**
    Returns the jsi object from a host object of this type
  */
  static sk_sp<skottie::Animation> fromValue(jsi::Runtime& runtime, const jsi::Value& obj) {
    return obj.asObject(runtime).asHostObject<JsiSkSkottie>(runtime)->getObject();
  }

  /**
   * Creates the function for contructing a new instance of the
   * JsiSkSkottie class.
   *
   * @param context platform context
   * @return A function for creating a new host object wrapper for the JsiSkSkottie class.
   */
  static const jsi::HostFunctionType createCtor(std::shared_ptr<RNSkPlatformContext> context) {
    return JSI_HOST_FUNCTION_LAMBDA {
      auto jsonStr = arguments[0].asString(runtime).utf8(runtime);
      auto animation = skottie::Animation::Builder().make(jsonStr.c_str(), jsonStr.size());

      // Return the newly constructed object
      return jsi::Object::createFromHostObject(runtime, std::make_shared<JsiSkSkottie>(std::move(context), std::move(animation)));
    };
  }
};
} // namespace RNSkia

Package json dependencies:
"@shopify/react-native-skia": "^0.1.233",
"react-native": "0.72.7",
"react-native-skottie": "^2.0.3",