Android splash screen image jumps slightly when loading about react-native-bootsplash HOT 15 CLOSED

I added the following to bootsplash.xml and it solved the height shift issue..

<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> <--- Added this
    </style>

      <style name="BootTheme" parent="AppTheme">
        <!-- set bootsplash.xml as activity background -->
        <item name="android:background">@drawable/bootsplash</item>
    </style>
</resources>

from react-native-bootsplash.

@shwanton Are you using this package or react-native-splash-screen? Because you add a link for a react-native-splash-screen issue, with no code to repeat your issue.

This package does not suffers from this issue as I know, because your splash screen theme extends your AppTheme 🙂

from react-native-bootsplash.

I re-read the docs and you are right, I used the wrong background property!
This did fix the jump on the emulator and my Pixel 3, unfortunately I still see the issue on a Galaxy S7.

I'm also seeing the scaling issue on a Galaxy S4.

When I get time, I'll link a git repo w/ examples.

from react-native-bootsplash.

I just tested this again today and looks like it's working on all devices!
Thank you for the help.

I'm still seeing the scaling issues on a Galaxy S4 but I can open a separate issue for that.

from react-native-bootsplash.

Sometimes it's just the Gradle cache 😄
No problem, open a new issue, we will investigate!

from react-native-bootsplash.

I still got the issue on Xiaomi Redmi

Nevermind. I've fixed it using the guideline here #52 (comment)

from react-native-bootsplash.

My bad, I didn't add a repro. I am using react-native-bootsplash, but I cross referenced the issue from react-native-splash-screen since I was seeing that issue here. I'll try taking a video to demonstrate what I'm seeing.

It could be that my @mipmap/splash_logo centering is not calculating the status bar since that seems to be the amount that it's jumping.

AndroidManifest.xml

  <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">

    <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustPan"
        android:exported="true" />

    <activity
        android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
        android:theme="@style/BootTheme">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

  </application>

styles.xml

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

  <style
      name="BootTheme"
      parent="AppTheme">
    <!-- set bootsplash.xml as activity background -->
    <item name="android:windowBackground">@drawable/bootsplash</item>
  </style>
</resources>

@drawable/bootsplash.xml

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque">
  <item android:drawable="@drawable/splash_gradient" />
  <item android:gravity="center">
    <bitmap android:src="@mipmap/splash_logo" />
  </item>
</layer-list>

@drawable/splash_gradient

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:angle="90"
      android:startColor="#FF00A3A3"
      android:endColor="#FF00BD77"
      android:type="linear" />
</shape>

MainActivity.java

...
import com.zoontek.rnbootsplash.RNBootSplash;

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

from react-native-bootsplash.

@shwanton Your @drawable/splash_gradient content is the same as your bootsplash.xml. Can you post the correct content? Thanks!

On which Android version + simulator / device do you have the issue?

from react-native-bootsplash.

Fixed the code. I'm seeing the issue on my Emulator (Pixel API 24) & Real Pixel 3.

I'll try to create a repro later today and add screengrab.

from react-native-bootsplash.

Did your app hide the status bar on start? If not, can you try updating your bootsplash.xml for

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
  <item android:drawable="@drawable/splash_gradient" />

  <item>
    <bitmap
      android:src="@mipmap/splash_logo"
      android:gravity="center" />
  </item>
</layer-list>

from react-native-bootsplash.

Got it! You used <item name="android:windowBackground">@drawable/bootsplash</item>. Replace it with <item name="android:background">@drawable/bootsplash</item>, as mentioned in the README.

Don't ignore my previous comment: it fixes an issue for Android < 5 scaling the image on the full screen.

from react-native-bootsplash.

Im am seeing this issue on redmi note 4 device so i adjusted margintop as -24 and fixed the issue ,but the screens with larger resolution issue still remains.and when i remove margin top -24 (vice versa happens).Please help me out here thanks

from react-native-bootsplash.

I still got the issue on Xiaomi Redmi

from react-native-bootsplash.

I still got the issue on Xiaomi Redmi

Nevermind. I've fixed it using the guideline here #52 (comment)

Can you share your styles.xml

from react-native-bootsplash.

I still got the issue on Xiaomi Redmi

Nevermind. I've fixed it using the guideline here #52 (comment)

Can you share your styles.xml

I posted the configurations at crazycodeboy/react-native-splash-screen#241 (comment) which can be applied for both react-native-splash-screen and react-native-bootsplash.

from react-native-bootsplash.