CODEWITHSUNDEEP
iosreact-native
Daniel Sousa
Daniel Sousa

Reputation: 11

Multiple animations in Splash Native IOS with Lottie and React Native

I created a SplashScreen with the react-native-lottie-splash-screen lib and it's working fine, but I need to add two more animations to this Splash. Does anyone have a solution?

Here's the code so far:

Dynamic.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 = UIColor.white;
    return animationView;
  }

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

AppDelegate.m

  Dynamic *t = [Dynamic new];
  UIView *animationView = [t createAnimationViewWithRootView:rootView lottieName:@"loading"];
  [animationView removeFromSuperview];

  [RNSplashScreen showLottieSplash:animationView inRootView:rootView];
  [t playWithAnimationView:animationView];
  [RNSplashScreen setAnimationFinished:true];

Upvotes: 0

Views: 580

Answers (1)

Daniel Sousa
Daniel Sousa

Reputation: 11

SOLUTION: The code can still be improved but the solution works. With the code below, just position each AnimatedView.

AnimatedSplash.swift(I changed the name from Dynamic to AnimatedSplash)

import Foundation
import Lottie

@objc class AnimatedSplash: NSObject {
  var rootView:UIView;
  var animationView:AnimationView;
  var topLeftAnimationView: AnimationView;
  var bottomRightAnimationView: AnimationView;
  var bottomLeftAnimationView: AnimationView;


  override init() {
    self.rootView = UIView()
    self.animationView = AnimationView()
    self.topLeftAnimationView = AnimationView()
    self.bottomRightAnimationView = AnimationView()
    self.bottomLeftAnimationView = AnimationView()
  }
  
  @objc func createAnimationViewGroup(rootView: UIView) -> AnimationView {
    self.rootView = rootView;
    self.createAnimationView();
    self.topLeftAnimationView = self.createSubview(lottieFile: "lottie1");
    self.bottomRightAnimationView = self.createSubview(lottieFile: "lottie2");
    self.bottomLeftAnimationView = self.createSubview(lottieFile: "lottie3");

    return self.animationView;
  }

  @objc func createAnimationView() {
    self.animationView.frame = self.rootView.frame;
    self.animationView.center = self.rootView.center;
    self.animationView.backgroundColor = UIColor.white;
  }

  @objc func play() {
    self.bottomRightAnimationView.play();
    self.topLeftAnimationView.play();
    self.bottomLeftAnimationView.play(
      completion: { (success) in
        RNSplashScreen.setAnimationFinished(true)
      }
    ); 
  }

  @objc func createSubview(lottieFile: String) -> AnimationView {
    let subView = AnimationView(name: lottieFile);
    self.animationView.center = self.rootView.center;
    self.animationView.addSubview(subView);
    return subView;
  }
}

AppDelegate.m

UIView *animationView = [animatedSplash createAnimationViewGroupWithRootView:rootView];
[RNSplashScreen showLottieSplash:animationView inRootView:rootView];
[animatedSplash play];

Upvotes: 1

Related Questions