Unexpected flicker in iOS 12 at least about react-native-bootsplash HOT 54 CLOSED

@mydesweb Yes. I also manage to find a solution, but I would like to test it more (probably publishing it on a specific branch to allow you doing the same). I really want to be sure it works flawlessly since it introduces a breaking change on module initialization.

from react-native-bootsplash.

@zoontek https://github.com/mydesweb/rnbootsplash check componentDidMount from App.js there is nothing special. You should see the problem also in dev not only in release..

from react-native-bootsplash.

@mydesweb Please respect the issue template for additional informations (😢).
Could you provide a video?

from react-native-bootsplash.

@zoontek I am facing the same issue with this library, please find video from below:

https://www.dropbox.com/s/k1iuaebf6mgdfuq/flickering.mp4?dl=0

from react-native-bootsplash.

@NiveshShastri Which file did you use as a splash screen? It seems blank to me. (LaunchScreen.xib?)

If it is, can you check if it's properly used as a splash screen (this lib takes over when the app is booted, but if the boot configuration is wrong, this could happen)?

Check the following settings:

from react-native-bootsplash.

@zoontek my splash screen is blank and I am using LaunchScreen.xib, the setting for the LaunchScreen is same as you shared.

from react-native-bootsplash.

@NiveshShastri Just tried to reproduce it on my project and it does not happen. Is everything OK with your config, like in the screenshots? If yes, this could be the simulator / device cache. One way to nuke it: Uninstall the app, reboot the simulator / the phone, clean Xcode artifacts (DerivedData) and reinstall the app.

from react-native-bootsplash.

@zoontek in which device you are testing, I have Iphone 6

from react-native-bootsplash.

@NiveshShastri Simulators from iOS 10 to 13, iPhone XR, iPhone SE, iPhone 5c, iPhone 11 Pro. It's our production app.

from react-native-bootsplash.

@zoontek let me try your solution.

from react-native-bootsplash.

@NiveshShastri I just tried it again on our iPhone SE, in development mode too. It works flawlessly, so it's really not about the power of the phone 😅

from react-native-bootsplash.

I manage to reproduce the issue only on iPhone 6 - iOS 12.4 physical device. On iPhone 11 it is working fine.

from react-native-bootsplash.

@mydesweb Did you checked the config, tried in release mode?

from react-native-bootsplash.

@zoontek I am not at my computer, I will come back with more details soon. Thank you

from react-native-bootsplash.

@zoontek issue is with iphone 6 not in iphone8 , 11 or later, may be its device specific

from react-native-bootsplash.

@NiveshShastri On which iOS version?

from react-native-bootsplash.

@zoontek IOS 12.1.4, thanks for the instant reply.

from react-native-bootsplash.

@NiveshShastri I tried with the same configuration in a simulator and it happened once at first, when the JS bundle needed to load from my computer.

But I couldn't reproduce it in Release mode. It might be a small issue with the Launch screen debug implem (with xib files) in iOS 12, but check on your side.

You said that it does not happen with react-native-splashscreen, but did you implement LaunchImage (static files generated for each screen sizes) or LaunchScreen.xib (probably not since it is not handled correctly by the lib 😅)?

from react-native-bootsplash.

@zoontek I have tested in debug and release mode, but the bug is still there.

from react-native-bootsplash.

@NiveshShastri @mydesweb Could you try the new version? It should be fixed, but I don't have a low end device to test it at home.

from react-native-bootsplash.

@zoontek sure, I have an iPhone 6 and I will do the test later today, Thanks

from react-native-bootsplash.

@zoontek I just installed version 2.0.4 on iPhone 6 - iOS 12.4.5 and problem problem is still here.. the app was signed with Ad Hoc profile (release mode) in development mode I didn't noticed the issue.
Check this video - https://drive.google.com/open?id=1JWAsRdjFP0SgyKpYH2WNlMlVagWR6Frd
If needed I can run many other test and provide info that could help you to fix the issue, your library is awesome.

from react-native-bootsplash.

Did you update your AppDelegate to match this? https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

If everything is setup correctly, please create a small repo for issue reproduction, I will try it on iPhone 5C at work

from react-native-bootsplash.

sure

from react-native-bootsplash.

Thank you! I will try tomorrow.

from react-native-bootsplash.

@zoontek pls let me know if you managed to reproduce the issue at least

from react-native-bootsplash.

@mydesweb @NiveshShastri Could you try the new version? https://github.com/zoontek/react-native-bootsplash/releases/tag/2.1.0

We now rely on RCTRootView loadingView, it's cleaner and it might solve your issue 🙂

Edit: the only change is that initialShow call is not needed anymore, the method is now a no-op.

from react-native-bootsplash.

@zoontek I just tested the latest version (updated pods and AppDelegate) but it is unstable.. check my video https://drive.google.com/file/d/1tNCnZjS5N76_B0WGNofu1dV8mCG2ebJW/view

1. as you can notice the "Convertor Valutar" label disappear while RN bundle is loaded.. and logo will move a little
2. after few openings you will start to see for a few seconds a screen from the app and then the launch screen
   I intentionally set the background of Launch Screen to black and RNBootSplash.hide({duration: 2500});

from react-native-bootsplash.

The text is part of your Storyboard main view?

from react-native-bootsplash.

@zoontek this is a Storyboard created from Xcode File -> New File -> Launch Screen (under User Interface) .

from react-native-bootsplash.

Could you publish the Storyboard file text content? I want to check something

from react-native-bootsplash.

@zoontek I don't understand what you need from me (I am not an iOS developer) please be more explicit or I can give you Team Viewer.

from react-native-bootsplash.

@mydesweb Open the BootSplash.storyboard file in your text editor, copy and paste its content here.

from react-native-bootsplash.

@zoontek here it is https://drive.google.com/file/d/1FXAwSgEbpnjVcVnCFIPQuW1cr7-CDV6j/view?usp=sharing

from react-native-bootsplash.

Tried it with a clean Xcode cache, an UILabel inside the main UIView, on iOS 12, the text didn't disappear.

Check the video:
https://drive.google.com/file/d/1nIt7KUwvzVuK2xdoKvLheD3wPmA19yRx/view

As loadingView type is a UIView, if the UILabel is inside it, it shouldn't cause any issue.

My BootSplash.storyboard:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Dtp-p8-LvN">
    <device id="retina6_1" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15509"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="Fnd-62-7zz">
            <objects>
                <viewController id="Dtp-p8-LvN" sceneMemberID="viewController">
                    <view key="view" autoresizesSubviews="NO" userInteractionEnabled="NO" contentMode="scaleToFill" id="guO-oA-Nhw">
                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                        <autoresizingMask key="autoresizingMask"/>
                        <subviews>
                            <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo" translatesAutoresizingMaskIntoConstraints="NO" id="3lX-Ut-9ad">
                                <rect key="frame" x="157" y="398" width="100" height="100"/>
                                <accessibility key="accessibilityConfiguration">
                                    <accessibilityTraits key="traits" image="YES" notEnabled="YES"/>
                                </accessibility>
                            </imageView>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="My Text" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="XX8-HO-baj">
                                <rect key="frame" x="177" y="720" width="60" height="21"/>
                                <accessibility key="accessibilityConfiguration">
                                    <accessibilityTraits key="traits" staticText="YES" notEnabled="YES"/>
                                    <bool key="isElement" value="NO"/>
                                </accessibility>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                        </subviews>
                        <color key="backgroundColor" red="0.96078431372549" green="0.98823529411764699" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                        <accessibility key="accessibilityConfiguration">
                            <accessibilityTraits key="traits" notEnabled="YES"/>
                        </accessibility>
                        <constraints>
                            <constraint firstItem="XX8-HO-baj" firstAttribute="leading" secondItem="eg9-kz-Dhh" secondAttribute="leading" constant="177" id="Bbg-UB-IF9"/>
                            <constraint firstItem="eg9-kz-Dhh" firstAttribute="trailing" secondItem="XX8-HO-baj" secondAttribute="trailing" constant="177" id="Csj-2t-8af"/>
                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerX" secondItem="eg9-kz-Dhh" secondAttribute="centerX" id="Fh9-Fy-1nT"/>
                            <constraint firstItem="eg9-kz-Dhh" firstAttribute="bottom" secondItem="XX8-HO-baj" secondAttribute="bottom" constant="121" id="exe-pE-Hlc"/>
                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerY" secondItem="guO-oA-Nhw" secondAttribute="centerY" id="nvB-Ic-PnI"/>
                            <constraint firstItem="XX8-HO-baj" firstAttribute="leading" secondItem="eg9-kz-Dhh" secondAttribute="leading" constant="177" id="tVT-A6-RPm"/>
                            <constraint firstItem="eg9-kz-Dhh" firstAttribute="trailing" secondItem="XX8-HO-baj" secondAttribute="trailing" constant="177" id="uCf-S7-g73"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="eg9-kz-Dhh"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="Lvb-Jr-bCV" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="0.0" y="0.0"/>
        </scene>
    </scenes>
    <resources>
        <image name="BootSplashLogo" width="100" height="100"/>
    </resources>
</document>

Edit: I also uninstall the app from the simulator before installing the fresh version.

from react-native-bootsplash.

@zoontek I Don't have access to see the video, anyway the fact the text is disappearing it is not the only issue, the logo is also moving a little to left .
I don't understand if it is something wrong with my LaunchScreen.storyboard but I just reverted to version 2.0.5 and I don't see these issues.

from react-native-bootsplash.

@zoontek maybe you forgot to reinstall pods? I managed to reproduce the issue on my iPhone 11 (v 2.1.0) , on v 2.0.5 everything is working fine. I also do from Xcode -> Product -> Clean build folder before run a new test

from react-native-bootsplash.

No, it's based on the repository example which already uses 2.1.0. I setup layout constraints on the image and the label.

from react-native-bootsplash.

@zoontek I don't see any difference from your video and my setup, I just tested on my iPhone 6 and iPhone 11 (physical devices) and managed to reproduce the issue every time, I will continue to use version 2.0.5 for the moment..

from react-native-bootsplash.

If something moved, I recommend switching devices to be sure your constraints are well set:

from react-native-bootsplash.

I know, I already did this and all is fine. I released my app with version 2.0.5 yesterday, today after I updated your lib to 2.1.0 I just started to see the issues described..

from react-native-bootsplash.

@mydesweb Tried it on all the phones I have at home (I currently work remotely because of Covid-19), without any hiccups. (iPhone XR on iOS 13, iPhone SE on iOS 13, iPhone 5C on iPhone 10, with React Native 0.61.5, no other dependencies)

Edit: https://drive.google.com/open?id=1kozIieNPXMC-g5WhWHkAQksRV5HXz7bG

from react-native-bootsplash.

@zoontek share with me your code (repo) I will run yarn install & pod install to see if it is working on my side also.. I don't understand where is the difference

from react-native-bootsplash.

@mydesweb I invited you to contribute on a repro repository.

from react-native-bootsplash.

@zoontek I just tested your example:
good news - it's working also for me as expected
bad news - on my iPhone 6 after a while (open the app - remove the app from background, close the phone, reopen the app) I started to see my initial issue which was reported to you. check the video. see also a strange warning.
video - https://drive.google.com/file/d/1ssJIu9xKgXu2ABZxlj31OaTERG-gjfNt/view?usp=sharing

from react-native-bootsplash.

@zoontek check also these logs
2020-03-15 20:43:09.973329+0200 RNBootSplashExample[391:20608] Can't end BackgroundTask: no background task exists with identifier 3 (0x3), or it may have already been ended. Break in UIApplicationEndBackgroundTaskError() to debug.
2020-03-15 20:43:09.979642+0200 RNBootSplashExample[391:20608] [ApplicationLifecycle] UIWindows were created prior to initial application activation. This may result in incorrect visual appearance.
2020-03-15 20:43:10.138173+0200 RNBootSplashExample[391:20608] Can't end BackgroundTask: no background task exists with identifier 7 (0x7), or it may have already been ended. Break in UIApplicationEndBackgroundTaskError() to debug.

from react-native-bootsplash.

The warning seems unrelated, more of a missed asset resolution.

Great news if it works as expected. Concerning the initial issue, it should switch back quicker now, but I'm afraid it couldn't be solved without locking the main thread (which is super bad)

from react-native-bootsplash.

ok.. what about the logs? especially this one:
UIWindows were created prior to initial application activation. This may result in incorrect visual appearance.

from react-native-bootsplash.

I'm talking about the yellow screen warning.

from react-native-bootsplash.

@zoontek somehow your solution encourage the developer to do much more tasks (make api calls and other things) then hide the launch screen , which is also wrong

I prefer a simple and stable solution, to hide the launch screen right after the javascript bundle is loaded.

Extracted from HIG

A launch screen appears instantly when your app starts up and is quickly replaced with the app's first screen, giving the impression that your app is fast and responsive. The launch screen isn’t an opportunity for artistic expression.

This is why I liked very much the https://github.com/crazycodeboy/react-native-splash-screen

Maybe you can somehow support even a basic solution than can work for every device / os and it is also reliable

from react-native-bootsplash.

@mydesweb For such a simple task, you don't even need a library.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"RNBootSplashExample"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  
  // Add the two following lines
  rootView.loadingViewFadeDuration = 0.5; // seconds
  [rootView setLoadingView:[[[UIStoryboard storyboardWithName:@"BootSplash" bundle:nil] instantiateInitialViewController] view]];

  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  return YES;
}

from react-native-bootsplash.

Ok, I think you are right and we can close the issue. But I have one more question regarding the logs provided, it is something normal?..

from react-native-bootsplash.

No. But I will make a breaking change to remove the show support at runtime. I don't need it in my personal project, and it's the cause of a lot of troubles.

And no, displaying it again and freezing the app entirely is not a viable solution.

from react-native-bootsplash.

I don’t know if my tests helped you to make this lib better but I really appreciate what are you doing! Thank you for your time.

from react-native-bootsplash.