https://www.npmjs.com/package/react-native-lottie-splash-screen
react-native-lottie-splash-screen
A lottie splash screen for react-native, hide when application loaded ,it works on iOS and Android.. Latest version: 1.1.2, last published: 3 months ago. Start using react-native-lottie-splash-screen in your project by running `npm i react-native-lottie-sp
www.npmjs.com
해당 npm package 를 적용할때, ios에서 몇가지 이벤트가 있어서 글을 작성한다.
안드로이드같은경우는, 해당 안내에 따라 한번에 적용이 되었는데,
IOS 같은 경우는 자동으로 헤더가 생기지 않아서 어려움을 겪었다.
최종 프로젝트 트리는
이다. xcode 에서 Dynamic.swift를 추가해줘야 자동으로 코드가 생긴다.
Dynamic.swfit 코드는
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)
}
);
}
}
로, 기존 AnimationView를 LottieAnimationView로 바꿔줘야한다는 npm 개발자의 코멘트가 있었다.
AppDelegate.mm 의 코드중 일부는
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
if ([FIRApp defaultApp] == nil) {
[FIRApp configure];
}
.
.
.
// return [super application:application didFinishLaunchingWithOptions:launchOptions];
BOOL success = [super application:application didFinishLaunchingWithOptions:launchOptions];
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:@"loading"]; // 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;
}
로 수정되어야한다. rn 0.71버전 상위 버전에 바뀌어야하는 코드와 AnimationView를 LottieAnimationView 로 변환시켜줘야한다.
lottieName도 해당 json파일로 변경 시켜줘야한다.