Animation playing too fast on iOS

[archcorsair]

Run `react-native info` in your project and share the content.

``` System: OS: macOS 13.2 CPU: (10) arm64 Apple M1 Pro Memory: 71.44 MB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.17.1 - ~/Library/Caches/fnm_multishells/68973_1678839301745/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.15.0 - ~/Library/Caches/fnm_multishells/68973_1678839301745/bin/npm Watchman: 2023.03.06.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.12.0 - /Users/nxc/.rbenv/shims/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: API Levels: 27, 28, 30, 31, 32, 33 Build Tools: 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.0 System Images: android-31 | Google APIs ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9619390 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 11.0.16 - /Users/nxc/.sdkman/candidates/java/current/bin/javac npmPackages: @react-native-community/cli: ^8.0.6 => 8.0.6 react: ^18.0.0 => 18.2.0 react-native: 0.69.8 => 0.69.8 react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found ```

What react-native-splash-screen version are you using?

• "react-native-lottie-splash-screen": "^1.1.1"

What platform does your issue occur on? (Android/iOS/Both)

• iOS - plays way too fast
• Android - plays at correct speed

Describe your issue as precisely as possible :

We have a lottie animation set to playback at 60 fps, when used as intro according to implementation instructions in the README the iOS intro animation playback speed is VERY FAST.

I tested with 2 other lottie animations (json format):

1. Frame Rate: 120fps / 144 total frames (1 second duration)
2. Frame Rate: 30fps / 36 frames total (1 second duration)

Playback is correct duration for android Playback is <1 second on iOS resulting in the animation not being very visually appealing

Show us the code you are using?

App.js (App Entry)

import SplashScreen from 'react-native-lottie-splash-screen';
// .. snip
 useEffect(() => {
   loadFonts().then(() => SplashScreen.hide());
 }, []);
// .. snip

Dyanmic.swift

import UIKit
import Foundation
import Lottie

@objc class Dynamic: NSObject {
  @objc func createAnimationView(rootView: UIView, lottieName: String) -> AnimationView {
    let animationView = AnimationView(name: lottieName)
    animationView.frame = rootView.frame
    animationView.center = rootView.center
    animationView.backgroundColor = .black
    return animationView
  }

  @objc func play(animationView: AnimationView) {
    animationView.play(
      completion: { (success) in
        RNSplashScreen.setAnimationFinished(true)
      }
    )
  }
}

AppDelegate.mm

#import "RNSplashScreen.h"
// .. snip
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// .. snip
// Lottie Splash Screen
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  Dynamic *t = [Dynamic new];
  UIView *animationUIView = (UIView *)[t createAnimationViewWithRootView:rootView lottieName:@"intro"];
  animationUIView.backgroundColor = [UIColor blackColor];
  // Register LottieSplashScreen to RNSplashScreen
  [RNSplashScreen showLottieSplash:animationUIView inRootView:rootView];
  AnimationView *animationView = (AnimationView *) animationUIView;
  [t playWithAnimationView:animationView];
  // Uncomment if you want the animation dialog to be forced to close when hide is called
  //  [RNSplashScreen setAnimationFinished:true];
}

[arditderstila]

did you solved this issue?

[archcorsair]

did you solved this issue?

Not yet! Waiting on a reply

[recepaltas]

useEffect(() => { const timer = setTimeout(() => { LottieSplashScreen.hide(); // here }, 5500); return () => clearTimeout(timer); }, []);

Temporary solution.