HwangTaehyun / react-native-lottie-splash-screen

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

Lottie splash is not showing on production mode only [iOS] #56

Closed cloudy-ninja closed 1 year ago

cloudy-ninja commented 1 year ago

1. React Native info

System: OS: macOS 13.0 CPU: (16) x64 Intel(R) Core(TM) 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; }

cloudy-ninja commented 1 year ago

And I have uploaded the AppDelegate.h file as well

import <Foundation/Foundation.h>

import <React/RCTBridgeDelegate.h>

import <UIKit/UIKit.h>

import <Expo/Expo.h>

@interface AppDelegate : EXAppDelegateWrapper

@end

cloudy-ninja commented 1 year ago

@HwangTaehyun could you take a look and help me on this? Thanks again

vivianmauer commented 1 year ago

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);
  }, []);
cloudy-ninja commented 1 year ago

Hi @vivianmauer Thanks for your answer, I tried this but it didn't help me

HwangTaehyun commented 1 year ago

Wow, it's so weird.. I'll check it!

cloudy-ninja commented 1 year ago

Thank you so much for your reply

cloudy-ninja commented 1 year ago

Hi @HwangTaehyun Any update on this? Thanks

HwangTaehyun commented 1 year ago

@cloudy-ninja Hi, Could you try this one? It seems related to this. I developed this package without considering the expo, so this problem occurred... https://github.com/HwangTaehyun/react-native-lottie-splash-screen/issues/57

cloudy-ninja commented 1 year ago

@HwangTaehyun thanks for your suggestion, I will look into it 👍

cloudy-ninja commented 1 year ago

I just tried, but the issue is still happening

HwangTaehyun commented 1 year ago

@cloudy-ninja I have a question. Does your lottie animation not appears at all in production mode? I suspect the Lottie animation file is not bundled in production mode.

HwangTaehyun commented 1 year ago

These links would be helpful to you. It's such a difficult issue... 🥲

cloudy-ninja commented 1 year ago

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

cloudy-ninja commented 1 year ago

Also, do you have some time to talk to me? If possible, I'd like to go through it together. I will pay for your time Thanks

HwangTaehyun commented 1 year ago

Yeah, but I don't know if I can be of great help. I don't know well about the bare expo. However, I also want to help you!

cloudy-ninja commented 1 year ago

Thank you so much! When do you have time today? I can match your time, here is my email msr.wn.327@gmail.com If you are Ok, we can schedule a google meeting

HwangTaehyun commented 1 year ago

Can I know your country or UTC? I live in Korea (UTC+9)

cloudy-ninja commented 1 year ago

Please let me know the meeting time in your timezone

HwangTaehyun commented 1 year ago

I'm okay with Tuesday 1/24, 4 pm-6 pm or Thursday 1/26 11 pm-1 am.

cloudy-ninja commented 1 year ago

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

HwangTaehyun commented 1 year ago

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

cloudy-ninja commented 1 year ago

I just sent the invitation, can you please confirm it?

HwangTaehyun commented 1 year ago

Yeah, I confirmed that!

cloudy-ninja commented 1 year ago

Nice!

HwangTaehyun commented 1 year ago

@cloudy-ninja There's no problem in release mode! Could you follow the expo bare workflow in README.md? I test this expo@47.0.13

HwangTaehyun commented 1 year ago

@cloudy-ninja Did you work out?

cloudy-ninja commented 1 year ago

Hi @HwangTaehyun, I'm sorry for the very late reply. Yes, it worked by following the readme. I can say that this package is working smoothly on expo bare work flow. Thanks again for your hard works!

cloudy-ninja commented 1 year ago

👍