No Comments Yet
Be the first to share your thoughts and start the conversation.
Customize App Title & Icon
Loading...
Be the first to share your thoughts and start the conversation.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, we learn how to customize the splash screen of an Expo application by properly linking the app's icon and title. This process involves ensuring that the correct asset paths are specified in the configuration files to avoid errors and to display the desired loading screen when the app launches.
app.json or app.config.js to link to the correct logo file (e.g., assets/images/logo.png).00:00:02 Before we start developing this beautiful home screen UI, I want to quickly show you how you can customize your Expo app to show the logo of your application
00:00:11 when it's loading.
00:00:12 If you check out your terminal, you'll see an error saying, asset not found.
00:00:16 And right here, unable to resolve your asset, assets images icon.png.
00:00:21 within your app.json or app.config.js.
00:00:25 This is because when we change the assets, we're no longer satisfying the need of our app.js to show our applications icon.
00:00:35 It's pointing to a path that doesn't exist.
00:00:39 So let's fix it.
00:00:41 We can show an icon called assets.
00:00:43 Images, logo.png.
00:00:46 You can copy it, that full path, and we can also change it for Android as the foreground image.
00:00:53 And while we're here, let's also change it for the web right here as the favicon.
00:00:59 Oh, and right here under the expo splash screen, let's modify it here as well.
00:01:04 Perfect.
00:01:04 So once you do this, open up your terminal and press R to reload your application for the changes that take effect.
00:01:12 As soon as it bundles, the error will be gone and our icon will be applied.
00:01:16 So now if you reopen your Expo app, you should be able to see something like this, mobile movie app right here.
00:01:23 Or if you want to change the name to, to something better, like MovieFlex, you can do that too.
00:01:29 And for this change, you'll actually have to reopen your Expo app and re-scan the QR code too.
00:01:37 There we go.
00:01:38 Now we can see this icon even on the splash screen.
00:01:40 And when you open it within Expo, there we go.
00:01:43 Both the icon and the title are here too.
00:01:46 Of course, we're within Expo right now, but this would be reflected on your device's home screen.
00:01:52 I mean, just imagine opening up your iPhone or Android device and seeing your app on the home screen right there with its icon and the title.
00:02:00 Pretty cool, right?
00:02:01 There we go.
00:02:02 As promised, this was a short and sweet lesson.
00:02:05 Next, we can focus on a super important part of this course, which is building out the UI of our homepage.
00:02:13 So let's do that next.