There are some differences for new versions of react-native on android that made me stuck on splash screen section, hope it helps someone: 1) Remove completely line with styles.xml file in android/app/src/main/res/values folder, i had an error "Didn't find class "RelativeLayout" otherwise. This solution was recommended on one of github issues of this lib 2) Don't change MainApplication.java class in newer version of android, github doc is outdated, change only MainActivity.java class as in video
I have created splash screen without this package. so in styles.xml I have mentioned @layout/launch_screen But in launch_screen.xml I get the error RelativeLayout class not found. I could have directly given the image in styles.xml like this: @drawable/screen, but this is stretching my splash image. Can you help what to do?
1)Thanks for the tip to remove @layout/launch_screen. 2)In my case instead of having MainActivity.java I had MainActivity.kt and I put this code: override fun onCreate(savedInstanceState: Bundle?) { SplashScreen.show(this) // Show the splash screen when creating the activity super.onCreate(savedInstanceState) } After changing those two things everything worked fine for me :))
@@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
@@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
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/"
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
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.
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
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
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.
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
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.
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.
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.
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)
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.
@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.
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.
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.
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.
@@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).
its so poor work , i follow him and be wast my time at the end , because my app has not show the splash screen also be has so errors show like this > Task :app:compileDebugKotlin FAILED
It seems like your app decided to take a vacation instead of showing you the splash screen! Let's get it back on track-make sure you set a proper kotlin version in build.gradle file. Still facing issues, kindly share the details on my Discord discord.gg/Xw75nsEYtt
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 🙏🏻
@@codewithabdul You are awesome man
There are some differences for new versions of react-native on android that made me stuck on splash screen section, hope it helps someone:
1) Remove completely line with styles.xml file in android/app/src/main/res/values folder, i had an error "Didn't find class "RelativeLayout" otherwise. This solution was recommended on one of github issues of this lib
2) Don't change MainApplication.java class in newer version of android, github doc is outdated, change only MainActivity.java class as in video
I have created splash screen without this package. so in styles.xml I have mentioned @layout/launch_screen But in launch_screen.xml I get the error RelativeLayout class not found. I could have directly given the image in styles.xml like this: @drawable/screen, but this is stretching my splash image. Can you help what to do?
1)Thanks for the tip to remove @layout/launch_screen.
2)In my case instead of having MainActivity.java I had MainActivity.kt and I put this code:
override fun onCreate(savedInstanceState: Bundle?) {
SplashScreen.show(this) // Show the splash screen when creating the activity
super.onCreate(savedInstanceState)
}
After changing those two things everything worked fine for me :))
@@thepomelocrazy4375 i got error: Execution failed for task ':app:checkDebugDuplicateClasses'.
@@thepomelocrazy4375 can you help me with the splashscreen? i am getting error
@@devjvu of course! Tell me about your problem
this is indeed the ultimate tutorial on this subject! congrats man, keep up the great work!!
Thanks a lot! 🙏🏻
This is the fist tutorial that I do in the first try. TYSM
Good to hear. Thanks.
The best explanation ever on youtube,Thank You
Thanks 🙏🏻
A hidden gem on RUclips, keep it up!!
Thanks
simple and short tutorial, definietly deserve like
Appreciated thanks
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!
Awesome tutorial! Thank you, Abdul!
Glad it helped. Thanks.
Loved it bro 👍🏻👍🏻
🙏🏻 I’m glad it helped.
Thanks dude. It was very Helpful and understandable
Glad it helped!
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🙏🏻
Thank you friend, you are one friend (:
😊
Thanks so much, your tutorial was important for me 🙏
Good to hear, thanks
Thank you very much ❤❤😊
cool!!! Nice tutorial bro!! Congrats
Thanks. I appreciate your feedback.
Thank you so much for making this video. 🙏
Glad it was helpful!
you're a life saver man
I’m glad it was helpful. 🙏🏻
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
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 ?
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
Awesome
Thanks
Can you make the Stausbar translucent in the splash screen and make it stretch the full window?
getting alot of errors from gradle while appling splash for android .. crash my project huh
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!!
./gradlew clean command to clean bulid folder on android seems to get rid of the splashscreen we put in using this method.
Thanks!
Welcome!
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.
awesome
Thanks
Thank you
You're welcome
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
why android is showing two splash screens ???
That terminal light theme is sexy
Thanks 😊
my app file is tsx and i get a rendre error saying Cannot read proprity hide of null
It seems like the library is not installed properly. Kindly follow the installation guide to make it work proper.
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
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
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!
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.
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
thanks bro
Welcome
For andorid it's showing 2 launch_screen
Remove one and try building it again
Man what about kotlin version? how to get?
nice video😍
Thanks
why does mine does not work? my apps crashed after i followed yours. can you reply me ASAP?
At what step is it crashing?
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
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
how to add only 1 splash screen, here there are 2 splash screen
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?
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. :)
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.
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
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
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 🙏🏻
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
sir my mainactivityfile is kt not java
You need to align the syntax with kotlin. Base logic will be same.
could you update your tutorial to React Native 0.73?
Noted. Thanks for the interest and suggestion. I’ll surely look into it.
what is the emulator you are using?
I am using android 13 and iOS 16 emulators
app icon shadow coming in Android how to fix it
Can you please explain where the shadow is appearing?
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.
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.
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).
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. :)
do not make the change in styles.xml, it will cause the issue.
React Native 0.73 Version Please 🙏🤝
Sure 👍🏻
its so poor work , i follow him and be wast my time at the end , because my app has not show the splash screen also be has so errors show like this
> Task :app:compileDebugKotlin FAILED
It seems like your app decided to take a vacation instead of showing you the splash screen! Let's get it back on track-make sure you set a proper kotlin version in build.gradle file. Still facing issues, kindly share the details on my Discord discord.gg/Xw75nsEYtt
not working
Can you please pinpoint what issue are you facing?
@@codewithabdul its not working nothing is happening i folowed all your instructions
@@hussambinnoor use this instead.
true
dont touch styles.xml
Any specific reason for this suggestion?
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