HwangTaehyun / react-native-lottie-splash-screen

⚡ Lottie splash screen for your react native app!
MIT License
222 stars 62 forks source link

Retain animation background until .hide() is called in iOS #57

Closed nicoflowerstore closed 1 year ago

nicoflowerstore commented 1 year ago

Is there a way to retain the animation's background until hide() is called in iOS? It works normally in Android but in iOS the animation rootview background goes away for some reason.

madmeatballs commented 1 year ago

Solved my issue, (yes, I am the same person, just using my personal account)

From what I understand is happening in iOS, once it loads your app and JS logic is loaded it already left native code splash screen, and this is why the rootView background disappers? Not sure, but anyway what I did is, I created an animationContainerView instead so it won't rely on rootView.

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

  //instead of rootView, create a full screen UIView called animationContainerView with the same background color as the rootView
  UIView *animationContainerView = [[UIView alloc] initWithFrame:rootView.frame];
  animationContainerView.backgroundColor = [UIColor colorWithRed: 1.00 green: 0.94 blue: 0.94 alpha: 1.00]; // change backgroundColor

  //add animationUIView to animationContainerView
  [animationContainerView addSubview:animationUIView];

  //register animationContainerView to RNSplashScreen
  [RNSplashScreen showLottieSplash:animationContainerView inRootView:rootView];

  // casting UIView type to AnimationView type
  AnimationView *animationView = (AnimationView *) 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];

then on my Dynamic.Swift, I specified the size of the animation

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 = CGRect(x: 0, y: 0, width: 160, height: 160) //set your desired size here
    animationView.center = rootView.center
    animationView.backgroundColor = UIColor.clear
    return animationView;
  }

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

hope this helps anyone who got into the same situation.

HwangTaehyun commented 1 year ago

@madmeatballs Hi! I would like to know if you are using expo bare or react-native. Could you let me know that?

madmeatballs commented 1 year ago

@HwangTaehyun I'm using react-native cli for this project.

HwangTaehyun commented 1 year ago

@madmeatballs Thank you for your info!