Cannot find 'AnimationView' in scope for iOS using latest Lottie

[Yusuf-Ismail-Homage]

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

• 1.1.2

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

• iOS

Describe your issue as precisely as possible : 1) Installed the latest react-native-lottie-splash-screen which now requires lottie-ios version 4+ 2) The documentation on the README for the Dynamic.swift mentions using AnimationView

Screenshot of the problem Dynamic.swift

AppDelegate.mm

[Yusuf-Ismail-Homage]

Changes made that work: If you're using lottie-ios version 4.0.0 or newer, you will need to rename AnimationView to LottieAnimationView. This will happen in both Dynamic.swift and AppDelegate.mm.

Dynamic.swift

import UIKit
import Foundation
import Lottie

@objc class Dynamic: NSObject {

  @objc func createAnimationView(rootView: UIView, lottieName: String) -> LottieAnimationView {
    let animationView = LottieAnimationView(name: lottieName)
    animationView.frame = rootView.frame
    animationView.center = rootView.center
    animationView.backgroundColor = UIColor.white;
    return animationView;
  }

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

AppDelegate.mm

  BOOL success = [super application:application didFinishLaunchingWithOptions:launchOptions];
  // return [super application:application didFinishLaunchingWithOptions:launchOptions];

  // Following code was added for RN splash screen lottie
  if (success) {
    //This is where we will put the logic to get access to rootview
    UIView *rootView = self.window.rootViewController.view;

    rootView.backgroundColor = [UIColor whiteColor]; // change with your desired backgroundColor

    Dynamic *t = [Dynamic new];
    UIView *animationUIView = (UIView *)[t createAnimationViewWithRootView:rootView lottieName:@"logo_animation"]; // change lottieName to your lottie files name

    // register LottieSplashScreen to RNSplashScreen
    [RNSplashScreen showLottieSplash:animationUIView inRootView:rootView];
    // casting UIView type to AnimationView type
    LottieAnimationView *animationView = (LottieAnimationView *) animationUIView;
    // play
    [t playWithAnimationView:animationView];
    // If you want the animation layout to be forced to remove when hide is called, use this code
    [RNSplashScreen setAnimationFinished:true];
  }

  return success;

Wanted to share this here in case this was a blocker for anyone else. This is on React Native 0.72.3. Perhaps an update to the README is in order?

[kiranparallel]

I followed steps given in readme but no animation is shown, it shows just a white screen

[Yusuf-Ismail-Homage]

Is your animation also white in color perhaps @kiranparallel ?

My Lottie animation was white in color, so when it played it could not be seen because the rootView's color was also white.

---

You can breakpoint your code in AppDelegate.mm at the line [RNSplashScreen setAnimationFinished:true]; in Xcode:

Then after running the code, use the Xcode Debug View Hierarchy (press the three layered squares button)

You'll get to see the views layered on each other. Just drag and pull around the screen to see it in 3D:

That will let you see if your Lottie is being rendered, at what layer in the view and whether there's anything overlapping it and what the background colors are.

In my example, I set the UIColor of the rootView to something other than white.

rootView.backgroundColor = [UIColor colorWithRed:45.0/255.0 green:160.0/255.0 blue:202.0/255.0 alpha:1.0];

By default in the example code in the Readme it's set to white.

rootView.backgroundColor = [UIColor whiteColor];

Additionally, I did not want the Lottie animation to use the whole view, so instead I resized it and set it to be centered to the screen. Example code below:

    Dynamic *t = [Dynamic new];
    UIView *animationUIView = (UIView *)[t createAnimationViewWithRootView:rootView lottieName:@"logo_animation"];

    // You can also change the background color of the Lottie view itself too if you wanted. Here I set mine to transparent
    animationUIView.backgroundColor  = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.0];

    // New desired width and height values
    CGFloat newWidth = 200.0;
    CGFloat newHeight = 150.0;

    // Now to center the UIView
    CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
    CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
    CGFloat newX = (screenWidth - newWidth) / 2;
    CGFloat newY = (screenHeight - newHeight) / 2;

    // Update the frame of the existing UIView with the new width/height and center positioning
    CGRect newFrame = animationUIView.frame;
    newFrame.origin.x = newX;
    newFrame.origin.y = newY;
    newFrame.size.width = newWidth;
    newFrame.size.height = newHeight;
    animationUIView.frame = newFrame;

Hope that might help you or others along the way.

What I would like to know is if it's possible to change the background color of the RCTRootContentView.

Right now it appears to have no colors and is just transparent. It does not appear to have any exported properties to adjust it's look.

#import <React/RCTViewManager.h>
#import "RCTConvert+Lottie.h"

@interface RCT_EXTERN_MODULE(LottieAnimationView, RCTViewManager)

RCT_EXPORT_VIEW_PROPERTY(resizeMode, NSString);
RCT_EXPORT_VIEW_PROPERTY(sourceJson, NSString);
RCT_EXPORT_VIEW_PROPERTY(sourceName, NSString);
RCT_EXPORT_VIEW_PROPERTY(sourceURL, NSString);
RCT_EXPORT_VIEW_PROPERTY(progress, CGFloat);
RCT_EXPORT_VIEW_PROPERTY(loop, BOOL);
RCT_EXPORT_VIEW_PROPERTY(autoPlay, BOOL);
RCT_EXPORT_VIEW_PROPERTY(speed, CGFloat);
RCT_EXPORT_VIEW_PROPERTY(onAnimationFinish, RCTBubblingEventBlock);
RCT_EXPORT_VIEW_PROPERTY(colorFilters, LRNColorFilters);
RCT_EXPORT_VIEW_PROPERTY(textFiltersIOS, NSArray);
RCT_EXPORT_VIEW_PROPERTY(renderMode, NSString);

RCT_EXTERN_METHOD(play:(nonnull NSNumber *)reactTag fromFrame:(nonnull NSNumber *) startFrame toFrame:(nonnull NSNumber *) endFrame);

RCT_EXTERN_METHOD(reset:(nonnull NSNumber *)reactTag);
RCT_EXTERN_METHOD(pause:(nonnull NSNumber *)reactTag);
RCT_EXTERN_METHOD(resume:(nonnull NSNumber *)reactTag);

@end

[sonnguyprophet]

@kiranparallel have you updated your Lottie file name?

[Oleksiiithouse]

Hi there,

For me solution was to add lottie json files via XCode, by creating new or moving existed to. My lottie files was added via VSCode that was a mistake!