Splash screen jump about react-native-bootsplash HOT 47 CLOSED

@whimsicaldreamer The issue here is that you set your status bar style directly in code (in your MainActivity) but your app does not start with it (it uses RNBootSplashActivity).

So instead of Java code, try to set your styles with a dedicated file (styles-v28.xml for Android Pie):

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:textColor">#000000</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

<style name="BootTheme" parent="AppTheme">
    <item name="android:background">@drawable/bootsplash</item>
</style>

Not sure about the android config keys, but you get the idea 🙂

from react-native-bootsplash.

After using <item name="android:windowTranslucentStatus">true</item>
status bar was hidden but the problem is react-native-keyboard-aware-scroll-view stopped working on android

i found the problem was using true causes this issue
so for anyone's need

i created native module so that after hiding the splash we can set android:windowTranslucentStatus = false

And then after hiding splash

await RNBootSplash.hide({fade: true}); if (Platform.OS === 'android') { NativeModules.StatusBarModule.toggle(false); }

from react-native-bootsplash.

So, from my experience, what was causing the jumpy behavior is actually the Android NavigationBar (not the StatusBar, even though it may appear like it). You can confirm this by only using this line:
<item name="android:windowTranslucentNavigation">true</item> - and now the splash screen is centered correctly.

What finally worked for me that seems acceptable was making the NavigationBar translucent, and also black. Then combining that with Safe Area View so that elements wouldn't render beneath it.

The way to achieve this is by settings flags in onCreate method, such as:

    Window w = getWindow();
    w.setNavigationBarColor(getResources().getColor(R.color.black));
    w.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);

(full example).

This is a lot of work for fixing something that is both basic and common - full screen splash image (in my use-case, I had to transition a full screen image into a full screen video, so they had to match exactly).

Hopefully this helps somebody. I spent way too much time on this.

from react-native-bootsplash.

In my case it is fixed by this

MainActivity.java

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Window window = getWindow();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | 
                         View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            window.getDecorView().setSystemUiVisibility(option);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

            getWindow().setStatusBarColor(Color.TRANSPARENT); // set color to transparent
        }
        super.onCreate(savedInstanceState);
        RNBootSplash.init(R.drawable.bootsplash, MainActivity.this);

        // ...
    }

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowTranslucentStatus">true</item>
    </style>
    <style name="BootTheme" parent="AppTheme">
        <item name="android:background">@drawable/bootsplash</item>
    </style>
</resources>

But here is another issue, although status bar color has been set to transparent, the status bar still has a semi transparent color at the beginning of the application.

Does anyone have an idea to get rid of it?

from react-native-bootsplash.

@Yashpk789987 Could you share the whole SplashBarModule.java and SplashBarPackage.java files?

from react-native-bootsplash.

@alnthomas Please respect the issue template, it has been written for a reason (OS version, lib version, etc!)

You're not following the README in your example (https://github.com/zoontek/react-native-bootsplash#android-1), it should be:

<resources>

  <!-- Base application theme -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Your base theme customization -->
    <item name="android:textColor">#000000</item>
    <item name="android:statusBarColor">@color/statusbar</item>
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
  </style>

  <!-- BootTheme should inherit from AppTheme -->
  <style name="BootTheme" parent="AppTheme">
    <item name="android:background">@drawable/background_splash</item>
    <item name="android:statusBarColor">@color/splash</item> <-- override @color/statusbar -->
  </style>

</resources>

EDIT: If it does not solve your issue, could you upload your AndroidManifest.xml?

from react-native-bootsplash.

@zoontek Tried it on xiaomi mi a3. The screen do jump a bit.

MainActivity.java

@Override
  protected void onCreate(Bundle savedInstanceState) {
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
          WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
          layoutParams.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
          getWindow().setAttributes(layoutParams);
          getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
          getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
      }
      super.onCreate(savedInstanceState);
      RNBootSplash.show(R.drawable.bootsplash, MainActivity.this);
  }

styles.xml

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>

    <style name="BootTheme" parent="AppTheme">
        <item name="android:background">@drawable/bootsplash</item>
    </style>

</resources>

NOTE: I do have another issue and that is on setting the following:

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

all screens have a translucent status bar and navigation, which is obvious, but then how can I only set translucent behaviour only on the splash screen and not on other screens.

from react-native-bootsplash.

@zoontek ok I tried your suggestion and it turns out that if I set
<item name="android:windowTranslucentStatus">true</item>, the splash screen has the top area covered with the splash screen backround colour. But then on my app's first screen the status is translucent which I do not want. How can that be fixed?

values-v28/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>

    <style name="BootTheme" parent="AppTheme">
        <item name="android:background">@drawable/bootsplash</item>
    </style>

</resources>

values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:windowFullscreen">true</item>
    </style>

    <style name="BootTheme" parent="AppTheme">
        <item name="android:background">@drawable/bootsplash</item>
    </style>

</resources>

MainActivity

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      RNBootSplash.show(R.drawable.bootsplash, MainActivity.this);
  }

from react-native-bootsplash.

💻 My environment

• react-native-bootsplash version: 1.2.0
• react-native version: 0.60
• Platform: android
• OS version: 10
• Device: Mi 9T Pro
• Simulator: no
• Android Studio version: 3.5
• Android buildToolsVersion: 26.1.1

Inherited the app theme, it did work on the simulator (Pixel 2 XL). However, still jumps on the real device.

Added a landing/home screen similar to the splash screen as follows

        <View style={styles.container}>
                <Image style={{ width: 222, height: 222, flex: 1 }} 
                    source={require('res/images/icon.png')} 
                    resizeMode='contain' 
                    fadeDuration={0} />
                <StatusBar
                    barStyle='dark-content'
                />
        </View>

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: globals.colors.commonBackground
    },
});

The new screen and RN Bootsplash screen (the second splash screen opened from Main Activity) are perfectly aligned. But not the first one (The real android splash screen)

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.assetvuemobile">

    <uses-permission android:name="android.permission.INTERNET" />

  <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
        android:theme="@style/SplashTheme">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

from react-native-bootsplash.

I see you are setting android:windowLayoutInDisplayCutoutMode. Do you handle the notch? Did you add code in your MainActivity (like in this tutorial: https://dev.to/brunolemos/adding-notch-support-to-your-react-native-android-app-3ci3) ?

from react-native-bootsplash.

No.
I removed <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>.
Not using in fullscreen any more.

from react-native-bootsplash.

@alnthomas Then you confirm that a status bar is visible 100% of the time and that your app does not draw under? (does not uses <StatusBar translucent={true} /> either)

from react-native-bootsplash.

Yes. I confirm that a status bar is visible 100% of the time.

from react-native-bootsplash.

Do you have another physical device to test it?
Also can you create a repository with the minimal amount of code to reproduce the issue?

from react-native-bootsplash.

Do you have another physical device to test it?
Also can you create a repository with the minimal amount of code to reproduce the issue?

Xiaomi Mi 6 is also beating. I fully follow your demonstration to operate the android configuration file.

from react-native-bootsplash.

@afeichuanqi Could you provide a minimal example repository to help me reproducing the error?

from react-native-bootsplash.

Do you have another physical device to test it?
Also can you create a repository with the minimal amount of code to reproduce the issue?

I took a closer look just now. I think it's a problem with the status bar.
It is when the status bar appears that the height of center's father may have changed so that the logo icon sinks the distance of the status bar.
So how can I solve this

from react-native-bootsplash.

@afeichuanqi If you never provides me some code, we will never solve this!

from react-native-bootsplash.

@zoontek, I also set the status bar and bottom navigation bar styles in the MainActivity.java in order to get a fully transparent look on devices with notches and other decorations.

    @Override // Added
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this); // Currently using react-native-splash-screen due to this issue
        super.onCreate(savedInstanceState);
        // Invisible navigation bar
        final Window win = getWindow();
        win.getDecorView().setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        );
        win.setNavigationBarColor(Color.TRANSPARENT);
        win.setStatusBarColor(Color.TRANSPARENT);
    }

Is there any possibility to get RNBootSplashActivity.java compatible with styling directly on onCreate method?

from react-native-bootsplash.

I get the idea but what is the difference? Am sorry for this silly question but I am totally naive with android native code. Should I be creating a different values directory under res directory with the name values-v28?
Am not sure actually. 😖

from react-native-bootsplash.

@Rapsssito Same as @whimsicaldreamer, match the applied style in your xml (best option IMHO) or extend the https://github.com/zoontek/react-native-bootsplash/blob/master/android/src/main/java/com/zoontek/rnbootsplash/RNBootSplashActivity.java class to add custom code in the onCreate

package com.project;

public class CustomSplashActivity extends RNBootSplashActivity {
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Your custom code
  }
}

I don't see a possible restriction about this.

from react-native-bootsplash.

@zoontek, thanks for the advice! Didn't think about that!

@Rapsssito Same as @whimsicaldreamer, match the applied style in your xml (best option IMHO) or extend the https://github.com/zoontek/react-native-bootsplash/blob/master/android/src/main/java/com/zoontek/rnbootsplash/RNBootSplashActivity.java class to add custom code in the onCreate

package com.project;

public class CustomSplashActivity extends RNBootSplashActivity {
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Your custom code
  }
}

I don't see a possible restriction about this.

from react-native-bootsplash.

@whimsicaldreamer Yes, res/values-v28/styles.xml indeed 😅(not styles-v28.xml, my bad!).

The difference is that react-native-bootsplash starts with RNBootSplashActivity instead of MainActivity (because RN currently does not support android:background to set a splash screen and android:windowBackground is unreliable with notches).

RNBootSplashActivity does not have a translucent status bar, MainActivity yes (because you set it directly in the class code) -> the jump happens!

Setting your params in the XML is a better solution because it does not involve Java code and because BootTheme inherits from the AppTheme, enforcing exactly the same config at the only exception of <item name="android:background">@drawable/bootsplash</item>.

I hope it's clear enough 😄

from react-native-bootsplash.

@zoontek Why do we need to have AppTheme as a parent of BootTheme? Why cant we use SomeOtherTheme as a parent of BootTheme?

from react-native-bootsplash.

Why do we need to have AppTheme as a parent of BootTheme?

To apply the same config and prevent these kinds of behaviors.

from react-native-bootsplash.

If thats the case then how should I be doing so that my app screens have a opaque statusbar except for the splash screen?

from react-native-bootsplash.

@whimsicaldreamer If you want an opaque status bar, you can apply splash screen status bar color and change it with https://facebook.github.io/react-native/docs/statusbar#setbackgroundcolor once the app is started.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColor">#000000</item>
        <item name="android:statusBarColor">@color/appStatusBarColor</item>
    </style>

    <style name="BootTheme" parent="AppTheme">
        <item name="android:background">@drawable/bootsplash</item>
    </style>
</resources>

const App = () => {
  useEffect(() => {
    BootSplash.hide();
    StatusBar.setBackgroundColor("#FFF");
  }, []);

  // …

from react-native-bootsplash.

In that case the splash screen too will have a status bar isnt it?
My requirement is that the splash screen should not have any statusbar. While the app screens should have a opaque statusbar.

BTW, my app screen has a definite <StatusBar backgroundColor="white" barStyle="dark-content"/> set.

from react-native-bootsplash.

In that case the splash screen too will have a status bar isnt it?
My requirement is that the splash screen should not have any statusbar. While the app screens should have a opaque statusbar.

No it won't. Statusbar will come back in the same time you call BootSplash.hide();

If you set a duration when you invoke hide like this BootSplash.hide(250);, create a timeout with the same duration and call StatusBar.setBackgroundColor("#FFF"); in it.

from react-native-bootsplash.

@zoontek @krakz999 Am not sure but somehow in Mi A3 I don't get the splashscreen full screen.

Here is what it looks like:

from react-native-bootsplash.

@whimsicaldreamer Just apply the background color as status bar color.

from react-native-bootsplash.

@zoontek and remove other android config keys like full screen?

from react-native-bootsplash.

@whimsicaldreamer Yes

from react-native-bootsplash.

@zoontek it brings a statusbar to the splashscreen. :(

from react-native-bootsplash.

You want no status bar on the splash screen and an opaque status bar in your app. At some point, a jump will happen, it's inevitable.

You can also starts your app without a status bar and use the StatusBar module to display it when you want, but it will be ugly too. My advice: stay consistent. Keep a status bar on both, or no status bar on both.

from react-native-bootsplash.

I understand. Can you advice me on how some apps get the splash screen without a statusbar while rest of the app with a status bar?

from react-native-bootsplash.

Keep the status bar translucent, put a View on top of your app with the StatusBar height and a white background?

from react-native-bootsplash.

I'm closing this since it's not related to this library directly, but rather a misconfiguration between the SplashActivity and the MainActivity. If identical settings are applied, it works 😅

from react-native-bootsplash.

It would be great if isolated configuration could be done, if possible. 😇

from react-native-bootsplash.

@whimsicaldreamer The issue here is that you set your status bar style directly in code (in your MainActivity) but your app does not start with it (it uses RNBootSplashActivity).

So instead of Java code, try to set your styles with a dedicated file (styles-v28.xml for Android Pie):

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:textColor">#000000</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

<style name="BootTheme" parent="AppTheme">
    <item name="android:background">@drawable/bootsplash</item>
</style>

Not sure about the android config keys, but you get the idea

It works for me. Thanks

from react-native-bootsplash.

Hi, i fixed this issue.

1. Set in app theme and splash theme <item name="android:windowTranslucentStatus">true</item>
2. Fix adjustResize old bug(latest 10 years) android for windowTranslucentStatus https://issuetracker.google.com/issues/36911528

and call in MainActivity

from react-native-bootsplash.

It would be great if isolated configuration could be done, if possible. 😇

Hi ,did it worked for you ?

from react-native-bootsplash.

@whimsicaldreamer The issue here is that you set your status bar style directly in code (in your MainActivity) but your app does not start with it (it uses RNBootSplashActivity).

So instead of Java code, try to set your styles with a dedicated file (styles-v28.xml for Android Pie):

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:textColor">#000000</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

<style name="BootTheme" parent="AppTheme">
    <item name="android:background">@drawable/bootsplash</item>
</style>

Not sure about the android config keys, but you get the idea 🙂

This fixed the jumpy behavior. But I want my navigation bar to remain black / opaque. I tried giving it a black color but that didn't help. Is there anyway around this?

from react-native-bootsplash.

@Yashpk789987 https://reactnative.dev/docs/statusbar#translucent

from react-native-bootsplash.

@zoontek i know but that's was not resolving the issue of keyboard-aware-scroll-view
but native-module did .

from react-native-bootsplash.

After using <item name="android:windowTranslucentStatus">true</item>
status bar was hidden but the problem is react-native-keyboard-aware-scroll-view stopped working on android

i found the problem was using true causes this issue
so for anyone's need

i created native module so that after hiding the splash we can set android:windowTranslucentStatus = false

And then after hiding splash

await RNBootSplash.hide({fade: true}); if (Platform.OS === 'android') { NativeModules.StatusBarModule.toggle(false); }

It works! 👏

from react-native-bootsplash.

The solution to the jump problem in my case was this option:

`if (Platform.OS === 'android') {
    StatusBar.setTranslucent(true);
    RNBootSplash.hide();
    StatusBar.setTranslucent(false);
  } else {
    RNBootSplash.hide();
  }`

The option to add the windowTranslucentStatus attribute did not work because after that the StatusBar component attribute did not respond.

  System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 4.41 GB / 15.96 GB
  Binaries:
    Node: 14.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 7.8.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 23, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5900203
    Visual Studio: Not Found
  Languages:
    Java: Not Found
    Python: 2.7.17 - C:\Python27\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.4 => 0.63.4
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

from react-native-bootsplash.