react-native-splash-animations
Animated splash screen API for React Native. There are 6 different hiding animations.
Before you start
This package works only with Android.
This pacage is not forked but I took a lot of example by react-native-bootsplash so some codes are totally copy-pasted from react-native-bootsplash
.
Getting started
$ npm install react-native-splash-animations --save
Assets generation
To make it easy to implement splash screen I recommand to use script that creates the Android Drawable XML
$ npx generate-splash-screen
Android
- ⚠️ Skip to step 2 if you generated Android Drawable XML with script.
Create Image asset of your image by leftclicking and choosing
New > Image Asset
Create android/app/src/main/res/values/colors.xml
and add followings
#FFFFFF
Create android/app/src/main/res/drawable/splashanimation.xml
which looks like followings:
<!--Your image asset-->
- Edit
android/app/src/main/res/values/styles.xml and add
<!-- Base application theme. --> <!-- Customize your theme here. --> #000000 <!-- Add the following lines--> false true @drawable/splashanimation
- Edit
android/app/src/main/AndroidManifest.xml
<!-- ... --> <!-- Add this line --> <!-- Remove <intent-filter>--> <!-- Add following lines --> <!-- ... --> <!-- ... -->
- Edit
android/app/src/main/java/com/yourprojectname/MainActivity.java
AnimatedLoadingScreen.setHideAnimation(HideAnimationType hideAnimationType, Long duration)
By using this function, you can set different hide animations and duration of animation.
HideAnimationType:
- NO_ANIMATION - Hides without animation
- FADE_OUT - Hides with fade out effect
- HIDE_LEFT - Hides by moving the screen to left side
- HIDE_RIGHT - Hides by moving the screen to right side
- HIDE_UP - Hides by moving the screen to up side
- HIDE_DOWN - Hides by moving the screen to down side
Duration should be Long, so 1000L = 1s
Default animation is FADE_OUT
and duration 500L
Then in your React Native project, you can use hide()
function to hide displayed splash screen with animation.
Example:
;;; { ; return <Text>Hello World!</Text>;}