zoontek / react-native-bootsplash

πŸš€ Show a splash screen during app startup. Hide it when you are ready.
MIT License
3.74k stars 258 forks source link

Please make the circular mask on Android optional #327

Closed naderalfakesh closed 2 years ago

naderalfakesh commented 2 years ago

Why it is needed?

Hello,

First of all thanks for this library, it is stable and easy to use πŸ‘πŸ‘πŸ‘ πŸ™πŸ™πŸ™ We are trying to upğdate from v2 to v4 everything looks ok but there is a circular mask clipping the logo on android we want to remove it. Is there any way I can remove it without a change in the library code?

I included two snapshots of how it looks on Android and ios.

Android emulator pixel4 API30

Android emulator pixel4 API30

IOS simulator

IOS simulator

Possible implementation

I wish I knew.

Code sample

I wish I can write native code.
zoontek commented 2 years ago

It's not a library thing, it's a platform thing: https://developer.android.com/guide/topics/ui/splash-screen

App icon without an icon background: This should be 288Γ—288 dp, and fit within a circle of 192 dp in diameter.

You have to reduce your logo size to make it fit.

m7amad-7asan commented 2 years ago

did you find a solution guys ?

zoontek commented 2 years ago

@m7amad-7asan Please read the answers before posting.

m7amad-7asan commented 2 years ago

@zoontek I read the answers and get that It's a platform thing But I'm asking how he fixed it

zoontek commented 2 years ago

@m7amad-7asan He can't. It's like asking "How can I install an iOS app on Android?". Platform limitation.

ChielBruin commented 2 years ago

On Android 26 and onwards, you can use the windowSplashscreenContent instead of the image and provide it a custom drawable:

<style name="BootTheme" parent="Theme.SplashScreen">
     <item name="windowSplashScreenBackground">@color/splashprimary</item>
     <item name="windowSplashScreenAnimatedIcon">@drawable/nothing</item>
     <item name="android:windowSplashscreenContent">@drawable/splashscreen</item>

     <item name="postSplashScreenTheme">@style/AppTheme</item>
</style>

Note that you have to set the windowSplashScreenAnimatedIcon to some transparent drawable, otherwise it will default to the green Android robot during the closing animation.

For the older Android versions I made a separate style including only the windowSplashScreenBackground and windowSplashScreenAnimatedIcon properties, rendering only the background color.

galechus commented 1 year ago

Adding to the styles.xml helped me:

<item name="android:windowIsTranslucent">true</item>
yuriiburov commented 6 months ago

I found a solution, it works for me, and I never see the cropped splash screen again

<style name="BootTheme" parent="Theme.BootSplash">
        <item name="bootSplashBackground">@color/bootsplash_background</item>
        <item name="bootSplashLogo">@drawable/splash_screen</item>
        <item name="postBootSplashTheme">@style/AppTheme</item>

        <!--    add those 2 lines    -->
        <item name="android:windowDisablePreview">true</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>
zoontek commented 6 months ago

@yuriiburov This is a hack, you only set the window as transparent until the app is loaded, creating a delay without feedback after user press.