1. The Ultimate Guide to React Native App Icons & Splash Screens
Вставка
- Опубліковано 25 лип 2024
- #reactnative #reactnativetutorial #applicationicon #splashscreen #codewithabdul
GitHub
github.com/abdulahad-07/react...
00:00 Introduction
00:21 Create a new project
00:48 Generate application icon bundle
01:42 Add application icon in Android
03:20 Add application icon in iOS
04:53 Generate splash screen assets
05:45 Add splash screen in Android
09:55 Add splash screen in iOS
12:08 Change application name in Android
12:39 Change application name in iOS
In this video, we will learn how to customize the application icon and splash screen in a React Native app. The application icon and splash screen are the first things that users see when they launch your app, so it's important to make a good first impression. We will start by creating a new React Native app and then we will replace the default icon and splash screen with our own custom designs. We will use the React Native Splash Screen library to customize the splash screen. We will also cover how to generate the required image assets for both the icon and splash screen. By the end of this video, you will have a solid understanding of how to customize the application icon and splash screen in your React Native app. So, join me and let's get started!
Subscribe to this UA-cam channel for more interesting content
/ @codewithabdul
Buy me a coffee
www.buymeacoffee.com/codewith...
![React Native CLI Setup for macOS (iOS) [Created in 2023]](/img/n.gif)
Man where have you been my whole month, thank you so much saved much of my time.
I’m glad it helped. This means a lot to me. Thanks 🙏🏻
this is indeed the ultimate tutorial on this subject! congrats man, keep up the great work!!
Thanks a lot! 🙏🏻
Awesome tutorial! Thank you, Abdul!
Glad it helped. Thanks.
Thanks dude. It was very Helpful and understandable
Glad it helped!
This is the fist tutorial that I do in the first try. TYSM
Good to hear. Thanks.
Thanks so much, your tutorial was important for me 🙏
Good to hear, thanks
Thank you so much for making this video. 🙏
Glad it was helpful!
A hidden gem on UA-cam, keep it up!!
Thanks
The best explanation ever on youtube,Thank You
Thanks 🙏🏻
simple and short tutorial, definietly deserve like
Appreciated thanks
cool!!! Nice tutorial bro!! Congrats
Thanks. I appreciate your feedback.
Thanks!
Welcome!
Awesome
Thanks
you're a life saver man
I’m glad it was helpful. 🙏🏻
./gradlew clean command to clean bulid folder on android seems to get rid of the splashscreen we put in using this method.
Thank you friend, you are one friend (:
😊
awesome
Thanks
Can you make the Stausbar translucent in the splash screen and make it stretch the full window?
Showing how to make these (splash screen) without using any library, and other things... Dude you are awesome
I really appreciate your support and encouragement!
thanks bro
Welcome
Great video!
By the way, any thoughts on react-native-bootsplash library as a replacement the one used in video? (as it has not been updated more then 2 years)
Probably a good replacement. But as I personally never used it, so cannot comment on it yet.
This guy wants 25$ for a library with a full functionality. Maybe he is crazy, I deleted this shit instantly
It seems a better replacement. Kindly check my latest video on bootsplash using RN 0.73. I hope this will help. :)
Hi
in the Styles.xml you've replace android:editTextBackground, from my side it is causing crash when using PhoneInput View, is someone face same issue ?
yes, do not make that change it will cause the issue. android:editTextBackground attribute in the theme is meant to define the background drawable for EditText fields
my app file is tsx and i get a rendre error saying Cannot read proprity hide of null
Amazing tutorial! Please upload a new one for RN 0.73, as java files have been replaced with kotlin
I do have plans to update react native to 0.73 soon. Thanks for the suggestion and stay tuned🙏🏻
nice video😍
Thanks
it was way more than useful
So glad it exceeded your expectations! I aim to over-deliver ;)
@@codewithabdul hi brother, Right now I am finding an issue that in IOS when we start the application there is a white or black screen flash after splash screen got hide
Kindly lemme know if this was black screen or white screen? Also is it appearing before splash screen or after splash screen? Thanks
@@codewithabdul it's a white flash, first it was white but after I tried some of the tricks it changed to black, and it is after the splash screen, infact the splash screen only appear for some milli seconds and after that that black screen appears and then the application it self
On iOS how do you prevent the screen from turning white when it says ex: "Bundling 25%" at the top? My app takes a little longer to do that so it is a white screen for a while. Is this just something that will happen during development and not show a white screen when in production?
Yes, this is the expected behaviour. Bundling part will go away in production, as we'll bundle the app and then publish. Published version won't display this white screen at all.
@@codewithabdul Awesome, thank you!
In the most current versions there are some differences in the default code, I am getting an error when running the Android version where a message is displayed in the emulator saying that the native splashscreen is trying to override the installed one. Do you have any suggestions to remove this conflict? Thanks.
Same Issue
Thanks for following the tutorial. Can you please let me know which react-native version you are using?
Thanks for the tutorial but There's a padding around mob icons white spaces around the icon.
how to remove it ?
Style property can be used to manage padding and margin for icons.
Sir i got this error while app is build, can you help me?
Execution failed for task ':react-native-splash-screen:writeDebugAarMetadata'.
> Failed to create parent directory '/Users/khoirulafwan/Documents/CoffeApp/node_modules/react-native-splash-screen/android/build' when creating directory '/Users/khoirulafwan/Documents/CoffeApp/node_modules/react-native-splash-screen/android/build/intermediates/aar_metadata/debug'
There can be one of the 2 solutions
1. Delete the build folder in the android/app directory and try again
If this solution doesn't work then
2. The .gradle doesn't have the necessary permission. To do so hit this command
chown -R user:user /path/to/.gradle
sir, I have applied the same procedure. but the logo is showing a bit blurred. can I do something about it?
Yes, if the logo is blurry, make sure you provide high quality image with described ratio. Also make sure you do keep very less blank space around actual logo.
When starting the project, it is creating the files with kt (kotlin) extension instead of java. Do you know why it's not Java?
Latest react native supports kotlin instead of java
great tutorial. how to localize the splash screen ?
for android: you just need to add new drawable folder for each language under android/app/src/main/res and put the localised image with same name under the folders
so let's say we need to add Spanish and French localisation with default English one. We need to create 2 additional folders as below
res/drawable-es
res/drawable-fr
for iOS: Open Xcode, click on 'tutorial' in left side panel. Go to 'Images'
here we can see the app image and splash screen image named as 'LaunchImage'
In the right panel you will see 'Localization'. You just need to mark another language and add new LaunchImage
Why do we need a package dependency from Android side when editing SplashScreen on xcode on iOS side. Is there no way to do it without using packages or is it too difficult?
By the way, your content is very useful. Thank you...
Thanks for watching my content and I am glad it helped. We need the package to make our splash screen a real splash screen. If we will go only with the android and xcode customisation, it will be treated as a new screen just after default splash. So first the default splash screen will be seen then our customised one. To get rid of this default behaviour, we should use the package dependancy.
I got it, thank you.🙂@@codewithabdul
HI! may I ask, how can I open the file with xcode? I tried to open it by typing open ios/.xcworkspace/, but it said the file didnt exist. Do I have to create the file with xcworkspace format? I thought it was just a shortcut to open it witch xcode
Hello, sure I’m happy to help
I can see a problem in the command you entered. Instead of you should enter to make it work
Okay, thanks for the answer!@@codewithabdul
Hi, this is the video that I exactly need but, I have a big problem, in my project, I can not see the android and ios folders, anyone knows why?
Are you using expo version? If yes, then there won't be any android and ios folders. It is available for cli version. You can move to cli from expo using eject in expo.
Oh, I didn't know that, thanks a lot! I'll have a look.@@codewithabdul
Getting issue: class not found RelativeLayout, after following your instructions on adding a splash screen on android. Any clues on fixing this ?
Hello @richardkirigaya8254, this seems like a device specific issue. I've found a solution online. Kindly check this out.
stackoverflow.com/a/51213911
@@codewithabdul Working, appreciated
@@codewithabdul Life saver!!
I am receiving an error "TypeError: Cannot read property 'hide' of null, js engine: hermes" at "SplashScreen.hide();" and splash screen isn't working
Kindly make sure you install supported version of splash screen library. Also try to delete node_modules and reinstall again.
I encountered a problem, after installing and configuring the splash-screen for Android, everything works, but when I add the TextInput tag to the application, an error occurs:
Drawable com.splash_screen:layout/launch_screen with resourse ID #0x7f0b002f
File res/layout/launch_screen.xml from drawable resourse ID #0x7f0b002f
Class not found RelativeLayout
Didn`t find class "RelativeLayout" on path: DexPathList[[zip file "data/app/"
Hello, this seems like a device specific issue. I've found a solution online. Kindly check this out.
stackoverflow.com/a/51213911
@@codewithabdul please tell me where to insert this line
@drawable/splash_screen
I got same error bro
Can you please tell me how you fixed that?
@@shubham_v same bro , are you able to figure it out ?
were you able to solve that issue ?
For andorid it's showing 2 launch_screen
Remove one and try building it again
In the beginning of the video 0:11. When launching the app app icon is showing up as splash screen, how to git rid of this?
Thanks for pointing out the issue. We need to add below line in styles.xml file to get rid of this issue.
true
I've updated the source code on GitHub. Kindly have a look.
@@codewithabdul no this did not fix the issue, There is any other way to fix this?
You'll be able to see the fix in the next video of this tutorial. Make sure to delete build folder inside the android/app before running the application. Also you need to restart the app bundler.
same issue here
@@alirazalalani8323 there is no way to disable it on android 12+ , there are ways to make it transparent, but it will have other ux issues. So best thing is to edit the default splash screen to your liking( have to follow the given guidelines for this).
how to add only 1 splash screen, here there are 2 splash screen
app icon shadow coming in Android how to fix it
Can you please explain where the shadow is appearing?
what is the emulator you are using?
I am using android 13 and iOS 16 emulators
could you update your tutorial to React Native 0.73?
Noted. Thanks for the interest and suggestion. I’ll surely look into it.
i am facing an issue RelativeLayout class is not found...i have follow al your instruction....but cant understand why i am getting this issue.. please help.
Comment or remove @layout/launch_screen in android/app/src/main/res/values/styles.xml
@@codewithabdul Thank you. this worked for me
Ape tool is not downloading my files and it is taking long to process
If Ape Tool is not working for you then you can try another alternative www.appicon.co
@@codewithabdul it later worked, thanks...do you know what bug causes the app not to load, my app keeps quitting after launching....what can i do?
@nifemiojinni4631 you need to check the logs generated on the node bundler to diagnose the issue.
That terminal light theme is sexy
Thanks 😊
where can i get that bundle for splashscreen
android
Kindly check the video at 00:48
@@codewithabdul this website is not working . please let us know any other website for making folder for splashscreen
why does mine does not work? my apps crashed after i followed yours. can you reply me ASAP?
At what step is it crashing?
This is not working in 0.73+ version, specially after kotlin update
I’m planning to upgrade RN version for this project. Stay tuned.
I got an error: TypeError: Cannot read property 'hide' of null. How can I fix it ?
@tuananhdinh527 Thanks for following through the video. This issue occurs if the library is not set properly. Kindly retry the instructions step by step. Let me know if you still face the same issue.
@@codewithabdul I resolved the issue. thank you!
Good to hear that. Thanks 🙏🏻
how did you get the ios simulator
For iOS simulator you should run ‘npm run ios’ on Mac.
@codewithabdul okay does this mean I cant get it on windows ...
@emmanuelbamidele5064 yes, you cannot get it on windows. There is a workaround though, you can install macOS on windows using VMware.
@emmanuelbamidele5064 through VM ware, yes.
App us crashing after displaying a splash screen, can you fix the issue for me?😢
tell me more may me i can help
@@talhaabbas1816 fixed it using bootsplash, thanks.
Good to hear
Crash hoi raha he Release apk bro
@vkvaraliya7504 error kya de rha hai bro?
please, react native 0.73 with react native bootsplash
Request fulfilled. Kindly check my latest video on bootsplash using RN 0.73. Thanks for the request. I hope this will help. :)
Hmm. So much pngs. Use just one svg logo file. Or create tsx file and put svg code there. And do it for any icon in your app.
An interesting and useful suggestion indeed. Thanks.
I'm not sure if this is approach for native layer. SVG does not supported on iOS lower 13. And as per my understanding both iOS and Android specifically have defined approach for for adding images for splash.
React Native 0.73 Version Please 🙏🤝
Sure 👍🏻
dont touch styles.xml
Any specific reason for this suggestion?
do not make the change in styles.xml, it will cause the issue.
not working
Can you please pinpoint what issue are you facing?
@@codewithabdul its not working nothing is happening i folowed all your instructions
@@hussambinnoor9510 use this instead.
true
Wrong development!
Hey @Irfanlesnar, thanks for watching. Constructive criticisms are always welcome. Kindly lemme know how can we improve?
@@codewithabdulyou need to disable default splash screen
Sure thanks, I’ll look into it.
@8:08 @drawable/screen
Thanks a lot for pointing this out. I will make changes in the next video of this series.
awesome
Thanks