react-native-lottie-splash-screen: Lottie splash is not showing on production mode only [iOS]

1. React Native info

System: OS: macOS 13.0 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Memory: 1.26 GB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 14.17.6 - /usr/local/bin/node Yarn: 1.22.11 - /usr/local/bin/yarn npm: 8.6.0 - /usr/local/bin/npm Watchman: 2022.08.22.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: API Levels: 27, 28, 29, 30, 31 Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0 System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8609683 Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: 16.0.2 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.4 => 0.64.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

  1. react-native-splash-screen version

^1.0.1

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

iOS production only

  1. issue description

The Lottie splash screen is working well on the development stage as I expected, thanks for your efforts @HwangTaehyun. While testing the app on the production, the lottie splasch screen gets skipped, and instead the default splash screen with the static image is showing. I am using expo bare flow and here is the AppDelegate.m file code

  • (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { #if defined(FB_SONARKIT_ENABLED) && __has_include(<FlipperKit/FlipperClient.h>) InitializeFlipper(application); #endif

    RCTBridge *bridge = [self.reactDelegate createBridgeWithDelegate:self launchOptions:launchOptions]; RCTRootView *rootView = [self.reactDelegate createRootViewWithBridge:bridge moduleName:@“main” initialProperties:nil]; id rootViewBackgroundColor = [[NSBundle mainBundle] objectForInfoDictionaryKey:@“RCTRootViewBackgroundColor”]; if (rootViewBackgroundColor != nil) { rootView.backgroundColor = [RCTConvert UIColor:rootViewBackgroundColor]; } else { rootView.backgroundColor = [UIColor whiteColor]; }

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; [self.window makeKeyAndVisible];

    [super application:application didFinishLaunchingWithOptions:launchOptions];

    /* lottie animation */ Dynamic *t = [Dynamic new]; UIView *animationUIView = (UIView *)[t createAnimationViewWithRootView:rootView lottieName:@“loading”]; // change lottieName to your lottie files name animationUIView.backgroundColor = [UIColor whiteColor]; // change backgroundColor // register LottieSplashScreen to RNSplashScreen [RNSplashScreen showLottieSplash:animationUIView 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]; / lottie animation */

    return YES; }

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 28 (12 by maintainers)

Most upvoted comments

Ok! here is my email eeht1717@gmail.com.

What about 5 pm Tuesday? I am guessing it’s after about 14hrs 40mins

@HwangTaehyun Happy Lunar New Year! thanks again for your help, let me try with these solutions today

Thank you so much for your reply

This happens because the application is calling the .hide() method and the animation doesn’t have enough time to run

You can fix this by adding a setTimeout with the time of your animation

  useEffect(() => {
    setTimeout(() => {
      LottieSplashScreen.hide();
    }, 2500);
  }, []);