How to get started with react-native-bootsplash - react-native

Question

I want to make a splash screen using react-native-bootsplash. I have followed the instructions on npm and the library is installed properly but I am not able to understand how to use it. Can someone give me an example or a small code snippet that I can write in App.js and get started. A basic example would do fine.

Answer 1

Here is how I integrated with RN 0.62.2:
Step 1: Add the package to react-native project
yarn add react-native-bootsplash
Step 2: Generate assets for bootscreen.
yarn generate-bootsplash
...
yarn run v1.19.0
$ /Users/sresu/personal/startups/chill/code/chill-app-rn/node_modules/.bin/generate-bootsplash
✔ The path to the root of your React Native project … .
✔ The path to your static assets directory … assets
✔ Your original icon file … assets/bootsplash_logo_original.png
✔ The bootsplash background color (in hexadecimal) … #FFF
✔ The desired icon width (in dp - we recommend approximately ~100) … 100
✔ Are you sure? All the existing bootsplash images will be overwritten! … yes
👍 Looking good! Generating files…
✨ android/app/src/main/res/mipmap-mdpi/bootsplash_logo.png (100x100)
✨ android/app/src/main/res/mipmap-hdpi/bootsplash_logo.png (150x150)
✨ android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo.png (300x300)
✨ ios/chill/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo#2x.png (200x200)
✨ ios/chill/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo#3x.png (300x300)
✨ assets/bootsplash_logo.png (100x100)
✨ assets/bootsplash_logo#1,5x.png (150x150)
✨ assets/bootsplash_logo#2x.png (200x200)
✨ assets/bootsplash_logo#3x.png (300x300)
✨ assets/bootsplash_logo#4x.png (400x400)
✨ android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo.png (400x400)
✨ ios/chill/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png (100x100)
✨ android/app/src/main/res/mipmap-xhdpi/bootsplash_logo.png (200x200)
✨ ios/chill/BootSplash.storyboard
✨ android/app/src/main/res/drawable/bootsplash.xml
✨ android/app/src/main/res/values/colors.xml
✅ Done! Thanks for using react-native-bootsplash.
✨ Done in 10.86s.
Step 3: Update this file -> android/app/src/main/java/com/chill/MainActivity.java
import com.zoontek.rnbootsplash.RNBootSplash; //<- add this import statement
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
#Override
protected String getMainComponentName() {
return ....
}
// Add this for splash screen
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
RNBootSplash.init(R.drawable.bootsplash, MainActivity.this); // <- display the generated bootsplash.xml drawable over our MainActivity
}
}
Step 4: Modify 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: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>
</style>
</resources>
Make sure you should have this file - android/app/src/main/res/drawable/bootsplash.xml, this is generated from Step 2.
Step 5: Modify android/app/src/main/AndroidManifest.xml
...
<application
android:name=".MainApplication"
android:label="#string/app_name"
android:icon="#mipmap/ic_launcher"
android:roundIcon="#mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="#style/AppTheme">
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustPan"
android:exported="true">
<!-- android:windowSoftInputMode="adjustResize">-->
</activity>
<!-- add the following lines (use the theme you created at step 3) -->
<activity
android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
android:theme="#style/BootTheme"
android:launchMode="singleTask">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="chill" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:host="chill.com"
android:scheme="https" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:host="chill.com"
android:scheme="http" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
...
Last step: Hide splash screen when app is ready
class App extends React.Component<Props, State> {
componentDidMount() {
RNBootSplash.hide({duration: 250}); // fade
...
Official docs: https://github.com/zoontek/react-native-bootsplash
🤗 Hope this helps.