Hi and welcome back.
In today's video, we're going to be diving into splash screens.
And before we jump into the technical
aspects, let's take a moment to understand what it actually is.
A splash screen is the initial screen that appears when you launch an app.
It serves as a visual representation of your app's branding or identity,
providing a smooth transition from the launch to the main app's screen.
Now let's go to our donation application and look at the splash screen.
So splash screen was already displayed
for a moment over there and it was just saying that we're displaying
donation application, something similar to this.
This is our social media application.
So this is the splash screen for social media app for our donation application
the splash screen looks similar to this,
but it just has donation app written on it.
Now that we know what a splash screen is,
you might wonder why it's important to have a custom one.
Well, a custom splash screen allows you
to create a consistent and memorable user experience.
It sets the tone for your app and gives it a professional touch.
Additionally, it helps reinforce your
brand identity, making your app instantly recognizable to users.
So today we're going to explore a very simple way of generating a splash screen.
For this
we're going to be using third party library called React Native Bootsplash.
So I have the documentation for it open here already.
And I'm going to link the link to this
documentation on the resources of this video.
So you can also take a look over there
and get redirected to this particular GitHub page.
And I just want to follow their documentation right now to install this
library and get our splash queen going for iOS and Android.
So for this, I'm going to open my terminal.
Here we go.
And then I'm just going to copy this NPM install command and I'm going
to paste it inside the donation application root right here.
And then I'm going to install the pods.
Great. And now that this is installed,
we want to generate the assets and they are providing a way to speed up
the process of getting the assets that we need.
So I'm going to use their suggestion and I'm actually going to give this a logo
path that we have generated for our donation application.
And it's going to generate all of the assets that I need for our splash screen.
So I'm just going to do this NPX React Native generate boot splash.
And then it needs some kind of a logo path.
It also has other options that it offers, which you can definitely take a look at.
But we're just going to do a very simple setup right now.
So for a logo, we're going to need to place a logo in our Assets folder.
And I'm just going to go to iOS donation
app images and then app icon and grab the logo from there.
Since I don't have the file created yet.
So I'm going to grab this one.
I'm going to paste it into Images.
I'm going to name it as Logo, and I'm going to add it to my GitHub.
Great. And now I'm going to say that the log is
going to be located at Assets Images log PNG.
Great. Now it's generated all of the items
for me, and it's also telling me where they are located.
Here are the paths that were generated
for iOS, and here are the paths that were generated for Android.
So now that we have everything that we
need, we should go forward with the documentation.
And they're saying that we need to add
this at the end of our App Delegate Mm file for iOS.
So let's go to iOS and look for App Delegate Mm file.
And here at the end of the file, as they suggested, I'm going to put this here.
And we shouldn't forget to import this header as well.
So let me put it right here, and I'm going to save this.
Then they're saying that we need to use bootstplash Storyboard.
And here's what they're suggesting.
It's not really visible.
Honestly, these images are very small.
But I do know what to do here.
So let's do it together.
I'm going to open up the X Workspace file.
If you don't know where it's located,
I can tell you that you can look for it in your Project Setup Donation app
and then just go to iOS and then open Donation App X Workspace file from here.
Once you have that open, go to the file section here,
open the Donation app, and then open the subfolder Donation app.
And here you're going to see bootsplash storyboard generated inside the iOS folder.
So let's just move this over here as suggested by documentation.
I'm just going to grab this and move this inside here.
And we don't need to select copy items if needed.
If that's selected, you can unselect that.
And then I'm just going to click on Finish.
And once I do that, I'm going to go to the main project
Donation app, and then I'm going to go to General.
And then I'm going to scroll down,
and you're going to see this launch screen file.
Just select this and select bootsplash Storyboard as your launch screen file.
Great.
Once we have done that, let's go back to our documentation
for Android setup, and let's see what we need for Android.
For Android,
first, we're going to need to go to App Build gradle File.
So let's go to Android app
build gradle file.
And inside here, we need to add one more implementation.
So I'm just going to copy this and I'm
going to paste it right here, and I'm going to save it.
And then they're telling us to go to Styles XML file, which is inside
source main and then res and then values and then styles XML.
So right here and we need to add these items inside here.
So I'm just going to copy this and I'm going to paste it here.
And then we need to change some stuff up in Android manifest XML file as well,
which is right here inside the res directory.
And the only line that we really need to change is this line here.
So instead of Android style app theme, we're going to put this here.
And then finally we need to do some more setup in MainActivity Java file which is
inside main Java and main activity is visible for me right here.
So first of all we're going to need
to import some of the new things which is for example this import RN bootsplash.
We already are importing OS bundle so we don't need that anymore.
This is enough.
And then we are going to need to put this function at the end of our file.
But actually we already have this function.
I see it right here.
It says on create here.
So we're going to have two functions overriding each other which we don't want.
So I'm just going to leave the super setup
that's inside here because we are using react native screens.
So we're going to need super on create null as it's written here.
And the only line that we really need to add is this one here.
So I'm just going to put this line here
and we're going to have to make sure that everything's all set for us here.
Yes, we imported this so we're good with this file.
Now if you're using React navigation, the setup is a little bit different.
So we're going to have to make sure
that we call the launch screen on ready of the navigation container.
So let's just go to our JS file right here.
We have our navigation container here and let's copy this and paste it here.
And now this is not available for us.
So we need to make sure that we import this.
I'm going to copy this import and I'm going to paste it here.
And now we should be all set.
The only thing that we are missing is
that for Android they are telling us to do gradlew clean.
So before we launch this for Android and check how our splash screens look like
right now, let's go to Android and do gradlew clean.
And actually I'm not going to do gradlew build as suggested here because I'm just
going to run Android and it is going to build the Android version of the app.
So since we did Android the last, let's first run the Android application.
So it would be npx react native run Android.
And now I'm just going to launch the app
and we're going to see our logo appear here.
So we don't see powered by react native splash screen anymore.
We have get our own splash screen using this library and we see this appear here
right before launch when our application is loading.
Great. So we have our branding set for our
donation application right before we are about to upload it to stores.
And then what we want to do is also test this out on iOS device.
So I'm going to do npx react-native run-ios.
I'm actually going to select a simulator and I want it to be iPhone 14.
It doesn't matter which one you run, but on my computer currently,
iPhone Eight is opening up by default, which I don't like.
So I'm just going to close this and await
for it to launch so that you can see the launch screen yourself.
Great, it buiolt now and it's about to open
up and we see the launch screen appear here.
I'm just going to repeat this one more time so that it's clear.
You need to close the app for launch screen to be visible.
So I completely quit the app and I went
in and you saw the launch screen appear here again.
So this is how easy it is to set splash
screen that's customized for your application using this library.
I suggest that you use this library
because the other ones are pretty outdated and I found this to be very useful
and easier to set up compared to other libraries.
Again, I'm going to give you the link
to this third party library inside the resources of this video.
Thanks so much for watching and I'll see you in the next video.