splash image moves a little from top to bottom

[SergiOnGit]

💻 My environment

• react-native-bootsplash version: @next
• react-native version: latest
• Platform: android
• OS version: android 10
• Device: brand xiaomi mi 10 lite
• Simulator: no
• Android Studio version: latest
• Android buildToolsVersion: 29
• Xcode version: ?

🕵️‍♂️ Reproducing the issue

When i open an app splash image shows then it moves down maybe 10px. Or maybe it isn't moving it just shows again in this position. I tried to regenerate images but doesn't help. I see one related issue but on IOS. Here is image https://user-images.githubusercontent.com/34116285/77246335-a5f6c400-6c69-11ea-820d-406ecaed7c05.gif

How can i fix this?

[zoontek]

@SergiOnGit Please publish all your config files. It doesn't seem to move, just to be scaled down. This is probably related to MIUI non standard handling of Dialog (the splash screen isn't a new Activity anymore)

[SergiOnGit]

@zoontek Which config files do you mean? I am using latest 3.0.0 version and it doesn't have many configs, i just followed installation guide and then run splash generation command.

[zoontek]

It was just in case you applied more than what's in the README.

That's probably linked to MIUI and custom interfaces. I personally only have a Xiaomi A2 (with Android One: stock interface) and a Nexus 5, so I can't reproduce it. I might have an idea, would be glad if you can try the fix.

[SergiOnGit]

@zoontek Tell me your idea and i'll try. I like this plugin and want to fix it, but i don't have native coding knowledge.

[zoontek]

@SergiOnGit I just published version 3.0.0-alpha.2. Could you try it and see if it fixes your issue?

[SergiOnGit]

@zoontek Thanks for trying. I have tested it but still the same.

[zoontek]

@SergiOnGit I will need a device with MIUI to debug this.

[efstathiosntonas]

This is definitely a MIUI issue, same happens on Xiaomi Note 8.

[SergiOnGit]

@zoontek Does the same happen on stable 2 version? Is it worth to try?

[efstathiosntonas]

@SergiOnGit the same happens on v2

[zoontek]

Try this: https://github.com/zoontek/react-native-bootsplash/issues/52#issuecomment-580366701

[SergiOnGit]

@zoontek I played around your pointed answer and could make it work. See my styles.xml snippet

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="colorAccent">#2273C8</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:background">@drawable/bootsplash</item>
    </style>

Only those two lines are needed:

    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">true</item>

You can add it to readme.

Thanks for fast responses.

[zoontek]

Cool! I will add some informations about MIUI on the README as soon as possible.

[stevecode21]

I have the same issue here.

`

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

<!-- Add the following lines -->
<!-- BootTheme should inherit from AppTheme -->
<style name="BootTheme" parent="AppTheme">
    <!-- set the generated bootsplash.xml drawable as activity background -->
    <item name="android:background">@drawable/bootsplash</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

`

That's my styles.xml file but it doesn't work.

[airam666]

this same issue happened to me with a OnePlus 6T FW 11.0 it moves up and if I make the image go fullscreen it stretches real bad