Hot questions for Using Lottie in lottie ios

Question:

I tried to link lottie-ios but I have a compilation error. Lottie works fine with the android emulator.

Here is what I did: 1. npm i --save lottie-react-native@2.3.2 2. react-native link lottie-ios 3. react-native link lottie-react-native 4. After this, open the Xcode project configuration and add the Lottie.framework as Embedded Binaries

I have multiple compilation errors starting by this one:

/Users/user/Code/CSULB/CECS_543/anacodiam_ios/node_modules/lottie-react-native/src/ios/../../../react-native/ReactCommon/fabric/graphics/platform/ios/float.h:8:10: fatal error: "limits" file not found
    #include <limits>
    While building module "UIKit" imported from /Users/user/Code/CSULB/CECS_543/anacodiam_ios/ios/build/Build/Products/Debug-iphonesimulator/include/React/RCTViewManager.h:8:
    While building module "Foundation" imported from /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator12.1.sdk/System/Library/Frameworks/UIKit.framework/Headers/UIKit.h:8:
    In file included from <module-includes>:1: /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator12.1.sdk/System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:6:10: fatal error: could not build module "CoreFoundation"
    #include <CoreFoundation/CoreFoundation.h>

My React-native version:

react-native -V
0.57.4

Screenshots Here is my project settings (File > Project Settings): https://imgur.com/MgyNqDj

My general settings: https://imgur.com/HoghSUA

My Header Search paths: https://imgur.com/Hd5ngHh

I added $(SRCROOT)/../node_modules/react-native/React/ as recommanded in this issue Github

And my build phases: https://imgur.com/cg630rS

Thank you in advance.


Answer:

As Anhtu said, automatic linking might be broken for lottie. Also, I had the same compilation problem : you should update lottie-react-native to latest version (2.5.9 at this date), they fixed their iOS project header search path setting.

In version 2.5.8, their project referenced React folder with recursive option, which caused the CodeFoundation build error. (this used to be recommended by ReactNative, but it has changed since : https://facebook.github.io/react-native/docs/linking-libraries-ios) They've removed this header search path since 2.5.9, and now this CoreFoundation error has gone !

Question:

I have a UITableView with plenty of different custom cells 1 of those has a lottie animation view and when I press a button or receive certain network messages the animation is supposed to jump to a specific position/progress and then animate either forward or backward.

So far, so good, all of this is working properly until I scroll down and the UITableViewCell gets recycled which stops my animation and I lose track of the proper position/progress.

I've thought about maybe using a timer and trying to sync it with the animation progress or maybe instantiate a hidden LottieAnimationView and syncing it with the visible one. Has anyone dealt with this problem before? Any suggestions?

Update: For more details its a fairly long animation of a Curtain/Door that needs to be synced across multiple devices, the server sends me a message to each client whenever the curtain changes direction, the message includes the direction (open, closed or stopped) and its position as a percentage 0% to 100% (closed to open)


Answer:

First of all you should know which cell is your animation cell and you should not dequeue that cell. You will create that cell in your controller so animation cell will never be reinitialized from your UITableView.

    let animationCell = AnimationCell()

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       if indexPath.row == 0 { //0 is the animation cell
         return animationCell
        } else { 
         // try to dequeue your regular cell
        }
    }