mehcode / rn-splash-screen

A JavaScript-controlled splash-screen for React Native designed to be run directly after the native splash-screen.
MIT License
350 stars 95 forks source link

Can't use 9 patch images? #10

Closed mvaivre closed 7 years ago

mvaivre commented 8 years ago

In the doc, you give a good advice:

I recommend using 9-png and adding a size for each screen density.

I successfully created one folder per screen size and it works well if I use traditional png files, but if I try to use a splash.9.png instead, then the file is not recognized.

I probably miss something, so don't hesitate to redirect me to an appropriate tuto / stackoverflow answer if it's not related to your package.

Anyway, it would be amazing to update your android example with multiple 9patch splashscreens, to show how it's done... 😊

mehcode commented 8 years ago

Don't have the time to do this but would accept a patch from someone to make the example use 9pngs.

edy commented 8 years ago

a 9 patch image (android/app/src/main/res/drawable/splash_screen.9.png) works for me.

this is my android/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowBackground">@color/white</item>
    </style>

    <style name="RNSplashScreen_SplashAnimation">
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
    </style>

    <style name="RNSplashScreen_SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_screen</item>
        <item name="android:windowAnimationStyle">@style/RNSplashScreen_SplashAnimation</item>
    </style>
</resources>

here is what my image looks like. the black border on the right and bottom is important. otherwise you'll have black blocks on the splashscreen.

2016-09-06_21-32-29_8l6vn