WEBVTT

1
00:00:00.160 --> 00:00:01.540
Hi and welcome back.

2
00:00:01.570 --> 00:00:05.180
In today's video, we're going
to be diving into splash screens.

3
00:00:05.210 --> 00:00:07.100
And before we jump into the technical

4
00:00:07.130 --> 00:00:11.500
aspects, let's take a moment
to understand what it actually is.

5
00:00:11.530 --> 00:00:15.860
A splash screen is the initial screen
that appears when you launch an app.

6
00:00:15.890 --> 00:00:20.780
It serves as a visual representation
of your app's branding or identity,

7
00:00:20.810 --> 00:00:25.660
providing a smooth transition
from the launch to the main app's screen.

8
00:00:25.690 --> 00:00:30.140
Now let's go to our donation application
and look at the splash screen.

9
00:00:30.170 --> 00:00:32.220
So splash screen was already displayed

10
00:00:32.250 --> 00:00:36.940
for a moment over there and it was
just saying that we're displaying

11
00:00:36.960 --> 00:00:39.180
donation application,
something similar to this.

12
00:00:39.200 --> 00:00:40.780
This is our social media application.

13
00:00:40.810 --> 00:00:45.580
So this is the splash screen for social
media app for our donation application

14
00:00:45.610 --> 00:00:48.460
the splash screen looks similar to this,

15
00:00:48.490 --> 00:00:51.540
but it just has donation
app written on it.

16
00:00:51.570 --> 00:00:54.260
Now that we know what a splash screen is,

17
00:00:54.290 --> 00:00:57.700
you might wonder why it's
important to have a custom one.

18
00:00:57.730 --> 00:01:00.220
Well, a custom splash screen allows you

19
00:01:00.250 --> 00:01:03.340
to create a consistent
and memorable user experience.

20
00:01:03.370 --> 00:01:07.700
It sets the tone for your app
and gives it a professional touch.

21
00:01:07.730 --> 00:01:10.050
Additionally, it helps reinforce your

22
00:01:10.080 --> 00:01:15.050
brand identity, making your app
instantly recognizable to users.

23
00:01:15.080 --> 00:01:20.930
So today we're going to explore a very
simple way of generating a splash screen.

24
00:01:20.960 --> 00:01:21.490
For this

25
00:01:21.520 --> 00:01:27.210
we're going to be using third party
library called React Native Bootsplash.

26
00:01:27.240 --> 00:01:30.620
So I have the documentation
for it open here already.

27
00:01:30.650 --> 00:01:33.380
And I'm going to link the link to this

28
00:01:33.410 --> 00:01:35.980
documentation on the
resources of this video.

29
00:01:36.010 --> 00:01:38.700
So you can also take a look over there

30
00:01:38.730 --> 00:01:43.060
and get redirected to this
particular GitHub page.

31
00:01:43.090 --> 00:01:48.420
And I just want to follow their
documentation right now to install this

32
00:01:48.450 --> 00:01:53.780
library and get our splash queen
going for iOS and Android.

33
00:01:53.810 --> 00:01:57.760
So for this, I'm going
to open my terminal.

34
00:01:58.240 --> 00:01:59.660
Here we go.

35
00:01:59.690 --> 00:02:06.740
And then I'm just going to copy
this NPM install command and I'm going

36
00:02:06.770 --> 00:02:15.280
to paste it inside the donation
application root right here.

37
00:02:15.440 --> 00:02:19.240
And then I'm going to install the pods.

38
00:02:26.160 --> 00:02:28.450
Great.
And now that this is installed,

39
00:02:28.480 --> 00:02:34.220
we want to generate the assets
and they are providing a way to speed up

40
00:02:34.250 --> 00:02:37.980
the process of getting
the assets that we need.

41
00:02:38.010 --> 00:02:45.020
So I'm going to use their suggestion
and I'm actually going to give this a logo

42
00:02:45.050 --> 00:02:49.420
path that we have generated
for our donation application.

43
00:02:49.450 --> 00:02:55.180
And it's going to generate all of the
assets that I need for our splash screen.

44
00:02:55.210 --> 00:03:04.260
So I'm just going to do this
NPX React Native generate boot splash.

45
00:03:04.290 --> 00:03:07.980
And then it needs some
kind of a logo path.

46
00:03:08.010 --> 00:03:12.820
It also has other options that it offers,
which you can definitely take a look at.

47
00:03:12.850 --> 00:03:16.610
But we're just going to do
a very simple setup right now.

48
00:03:16.640 --> 00:03:22.500
So for a logo, we're going to need
to place a logo in our Assets folder.

49
00:03:22.530 --> 00:03:27.020
And I'm just going to go to iOS donation

50
00:03:27.050 --> 00:03:31.020
app images and then app icon
and grab the logo from there.

51
00:03:31.050 --> 00:03:33.660
Since I don't have the file created yet.

52
00:03:33.690 --> 00:03:36.900
So I'm going to grab this one.

53
00:03:36.930 --> 00:03:39.180
I'm going to paste it into Images.

54
00:03:39.210 --> 00:03:44.660
I'm going to name it as Logo,
and I'm going to add it to my GitHub.

55
00:03:44.690 --> 00:03:48.060
Great.
And now I'm going to say that the log is

56
00:03:48.090 --> 00:03:54.400
going to be located
at Assets Images log PNG.

57
00:03:54.640 --> 00:03:57.300
Great.
Now it's generated all of the items

58
00:03:57.330 --> 00:04:00.580
for me, and it's also telling
me where they are located.

59
00:04:00.610 --> 00:04:02.860
Here are the paths that were generated

60
00:04:02.890 --> 00:04:07.260
for iOS, and here are the paths
that were generated for Android.

61
00:04:07.290 --> 00:04:09.340
So now that we have everything that we

62
00:04:09.370 --> 00:04:14.440
need, we should go forward
with the documentation.

63
00:04:14.680 --> 00:04:16.860
And they're saying that we need to add

64
00:04:16.890 --> 00:04:22.260
this at the end of our
App Delegate Mm file for iOS.

65
00:04:22.280 --> 00:04:27.660
So let's go to iOS and look
for App Delegate Mm file.

66
00:04:27.690 --> 00:04:32.620
And here at the end of the file, as they
suggested, I'm going to put this here.

67
00:04:32.650 --> 00:04:35.780
And we shouldn't forget
to import this header as well.

68
00:04:35.800 --> 00:04:40.060
So let me put it right here,
and I'm going to save this.

69
00:04:40.090 --> 00:04:45.300
Then they're saying that we need
to use bootstplash Storyboard.

70
00:04:45.330 --> 00:04:48.980
And here's what they're suggesting.

71
00:04:49.000 --> 00:04:50.100
It's not really visible.

72
00:04:50.130 --> 00:04:52.100
Honestly, these images are very small.

73
00:04:52.130 --> 00:04:53.940
But I do know what to do here.

74
00:04:53.970 --> 00:04:56.180
So let's do it together.

75
00:04:56.210 --> 00:05:00.660
I'm going to open up the X Workspace file.

76
00:05:00.680 --> 00:05:02.420
If you don't know where it's located,

77
00:05:02.450 --> 00:05:08.540
I can tell you that you can look for it
in your Project Setup Donation app

78
00:05:08.570 --> 00:05:15.140
and then just go to iOS and then open
Donation App X Workspace file from here.

79
00:05:15.160 --> 00:05:19.780
Once you have that open,
go to the file section here,

80
00:05:19.800 --> 00:05:24.140
open the Donation app, and then
open the subfolder Donation app.

81
00:05:24.160 --> 00:05:30.300
And here you're going to see bootsplash
storyboard generated inside the iOS folder.

82
00:05:30.330 --> 00:05:36.780
So let's just move this over here
as suggested by documentation.

83
00:05:36.800 --> 00:05:41.420
I'm just going to grab this
and move this inside here.

84
00:05:41.450 --> 00:05:44.860
And we don't need to select
copy items if needed.

85
00:05:44.890 --> 00:05:47.700
If that's selected, you can unselect that.

86
00:05:47.730 --> 00:05:50.340
And then I'm just going
to click on Finish.

87
00:05:50.360 --> 00:05:54.500
And once I do that,
I'm going to go to the main project

88
00:05:54.530 --> 00:05:57.860
Donation app, and then I'm
going to go to General.

89
00:05:57.890 --> 00:05:59.660
And then I'm going to scroll down,

90
00:05:59.690 --> 00:06:02.980
and you're going to see
this launch screen file.

91
00:06:03.010 --> 00:06:10.180
Just select this and select bootsplash
Storyboard as your launch screen file.

92
00:06:10.210 --> 00:06:11.180
Great.

93
00:06:11.210 --> 00:06:14.540
Once we have done that,
let's go back to our documentation

94
00:06:14.570 --> 00:06:19.820
for Android setup,
and let's see what we need for Android.

95
00:06:19.850 --> 00:06:20.740
For Android,

96
00:06:20.770 --> 00:06:24.820
first, we're going to need
to go to App Build gradle File.

97
00:06:24.850 --> 00:06:27.300
So let's go to Android app

98
00:06:27.330 --> 00:06:29.060
build gradle file.

99
00:06:29.090 --> 00:06:32.940
And inside here, we need to add
one more implementation.

100
00:06:32.970 --> 00:06:35.920
So I'm just going to copy this and I'm

101
00:06:35.950 --> 00:06:40.580
going to paste it right here,
and I'm going to save it.

102
00:06:40.600 --> 00:06:46.740
And then they're telling us to go
to Styles XML file, which is inside

103
00:06:46.770 --> 00:06:54.820
source main and then res and then
values and then styles XML.

104
00:06:54.850 --> 00:07:00.340
So right here and we need
to add these items inside here.

105
00:07:00.360 --> 00:07:03.940
So I'm just going to copy this
and I'm going to paste it here.

106
00:07:03.970 --> 00:07:08.780
And then we need to change some stuff up
in Android manifest XML file as well,

107
00:07:08.800 --> 00:07:12.580
which is right here
inside the res directory.

108
00:07:12.600 --> 00:07:16.620
And the only line that we really
need to change is this line here.

109
00:07:16.650 --> 00:07:23.980
So instead of Android style app theme,
we're going to put this here.

110
00:07:24.010 --> 00:07:30.380
And then finally we need to do some more
setup in MainActivity Java file which is

111
00:07:30.410 --> 00:07:35.740
inside main Java and main activity
is visible for me right here.

112
00:07:35.770 --> 00:07:38.380
So first of all we're going to need

113
00:07:38.410 --> 00:07:44.700
to import some of the new things which is
for example this import RN bootsplash.

114
00:07:44.730 --> 00:07:49.460
We already are importing OS bundle
so we don't need that anymore.

115
00:07:49.480 --> 00:07:50.660
This is enough.

116
00:07:50.690 --> 00:07:57.100
And then we are going to need to put
this function at the end of our file.

117
00:07:57.130 --> 00:07:59.900
But actually we already
have this function.

118
00:07:59.920 --> 00:08:01.340
I see it right here.

119
00:08:01.360 --> 00:08:03.820
It says on create here.

120
00:08:03.850 --> 00:08:09.100
So we're going to have two functions
overriding each other which we don't want.

121
00:08:09.130 --> 00:08:11.500
So I'm just going to leave the super setup

122
00:08:11.530 --> 00:08:15.780
that's inside here because we
are using react native screens.

123
00:08:15.800 --> 00:08:20.620
So we're going to need super
on create null as it's written here.

124
00:08:20.650 --> 00:08:24.220
And the only line that we really
need to add is this one here.

125
00:08:24.250 --> 00:08:26.740
So I'm just going to put this line here

126
00:08:26.770 --> 00:08:31.460
and we're going to have to make sure that
everything's all set for us here.

127
00:08:31.480 --> 00:08:34.900
Yes, we imported this so
we're good with this file.

128
00:08:34.930 --> 00:08:41.020
Now if you're using React navigation,
the setup is a little bit different.

129
00:08:41.040 --> 00:08:42.740
So we're going to have to make sure

130
00:08:42.770 --> 00:08:47.940
that we call the launch screen
on ready of the navigation container.

131
00:08:47.970 --> 00:08:53.500
So let's just go to our JS file
right here.

132
00:08:53.530 --> 00:09:02.020
We have our navigation container here
and let's copy this and paste it here.

133
00:09:02.050 --> 00:09:04.000
And now this is not available for us.

134
00:09:04.030 --> 00:09:06.260
So we need to make sure
that we import this.

135
00:09:06.290 --> 00:09:11.580
I'm going to copy this import
and I'm going to paste it here.

136
00:09:11.610 --> 00:09:14.940
And now we should be all set.

137
00:09:14.970 --> 00:09:17.100
The only thing that we are missing is

138
00:09:17.130 --> 00:09:21.260
that for Android they are telling
us to do gradlew clean.

139
00:09:21.290 --> 00:09:28.260
So before we launch this for Android
and check how our splash screens look like

140
00:09:28.290 --> 00:09:32.860
right now, let's go to Android
and do gradlew clean.

141
00:09:32.890 --> 00:09:37.700
And actually I'm not going to do gradlew
build as suggested here because I'm just

142
00:09:37.730 --> 00:09:44.900
going to run Android and it is going
to build the Android version of the app.

143
00:09:44.930 --> 00:09:51.620
So since we did Android the last,
let's first run the Android application.

144
00:09:51.650 --> 00:09:55.500
So it would be npx react
native run Android.

145
00:09:55.530 --> 00:09:58.860
And now I'm just going to launch the app

146
00:09:58.890 --> 00:10:01.420
and we're going to see
our logo appear here.

147
00:10:01.440 --> 00:10:05.700
So we don't see powered by react
native splash screen anymore.

148
00:10:05.730 --> 00:10:11.340
We have get our own splash screen using
this library and we see this appear here

149
00:10:11.370 --> 00:10:15.140
right before launch when
our application is loading.

150
00:10:15.160 --> 00:10:18.100
Great.
So we have our branding set for our

151
00:10:18.130 --> 00:10:22.580
donation application right before we
are about to upload it to stores.

152
00:10:22.610 --> 00:10:28.020
And then what we want to do is
also test this out on iOS device.

153
00:10:28.050 --> 00:10:31.920
So I'm going to do
npx react-native run-ios.

154
00:10:31.940 --> 00:10:38.620
I'm actually going to select a simulator
and I want it to be iPhone 14.

155
00:10:38.650 --> 00:10:42.140
It doesn't matter which one you run,
but on my computer currently,

156
00:10:42.170 --> 00:10:46.940
iPhone Eight is opening up by default,
which I don't like.

157
00:10:46.970 --> 00:10:51.180
So I'm just going to close this and await

158
00:10:51.200 --> 00:10:55.700
for it to launch so that you can
see the launch screen yourself.

159
00:10:55.730 --> 00:10:58.380
Great, it buiolt now and it's about to open

160
00:10:58.410 --> 00:11:01.060
up and we see the launch
screen appear here.

161
00:11:01.080 --> 00:11:05.840
I'm just going to repeat this one
more time so that it's clear.

162
00:11:07.000 --> 00:11:10.180
You need to close the app
for launch screen to be visible.

163
00:11:10.210 --> 00:11:13.380
So I completely quit the app and I went

164
00:11:13.410 --> 00:11:16.100
in and you saw the launch
screen appear here again.

165
00:11:16.130 --> 00:11:19.940
So this is how easy it is to set splash

166
00:11:19.970 --> 00:11:24.700
screen that's customized for your
application using this library.

167
00:11:24.730 --> 00:11:27.220
I suggest that you use this library

168
00:11:27.250 --> 00:11:31.780
because the other ones are pretty outdated
and I found this to be very useful

169
00:11:31.810 --> 00:11:35.140
and easier to set up
compared to other libraries.

170
00:11:35.170 --> 00:11:37.220
Again, I'm going to give you the link

171
00:11:37.250 --> 00:11:42.460
to this third party library inside
the resources of this video.

172
00:11:42.480 --> 00:11:45.000
Thanks so much for watching
and I'll see you in the next video.