1. The Ultimate Guide to React Native App Icons & Splash Screens 

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?

I do have plans to update react native to 0.73 soon. Thanks for the suggestion and stay tuned🙏🏻

I’m glad it helped. This means a lot to me. Thanks 🙏🏻

@@codewithabdul You are awesome man

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

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!!

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.

Thanks a lot! 🙏🏻

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

🙏🏻 I’m glad it helped.

Latest react native supports kotlin instead of java

I’m planning to upgrade RN version for this project. Stay tuned.

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.

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 ?

Sure 👍🏻

Glad it helped. Thanks.

It seems like the library is not installed properly. Kindly follow the installation guide to make it work proper.

Remove one and try building it again

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

Thanks 😊

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!

Thanks 🙏🏻

Can you please explain where the shadow is appearing?

😊

You need to align the syntax with kotlin. Base logic will be same.

Good to hear. Thanks.

At what step is it crashing?

I really appreciate your support and encouragement!

tell me more may me i can help

@@talhaabbas1816 fixed it using bootsplash, thanks.

Good to hear

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

Kindly make sure you install supported version of splash screen library. Also try to delete node_modules and reinstall again.

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

Request fulfilled. Kindly check my latest video on bootsplash using RN 0.73. Thanks for the request. I hope this will help. :)

@vkvaraliya7504 error kya de rha hai bro?

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.

Glad it helped!

Noted. Thanks for the interest and suggestion. I’ll surely look into it.

Comment or remove @layout/launch_screen in android/app/src/main/res/values/styles.xml

@@codewithabdul Thank you. this worked for me

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

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.

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.

Oh, I didn't know that, thanks a lot! I'll have a look.@@codewithabdul

@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 🙏🏻

Thanks

Thanks

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 am using android 13 and iOS 16 emulators

Welcome!

Thanks

Same Issue

Thanks for following the tutorial. Can you please let me know which react-native version you are using?

Appreciated thanks

Glad it was helpful!

I’m glad it was helpful. 🙏🏻

Good to hear, thanks

Any specific reason for this suggestion?

Thanks. I appreciate your feedback.

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. :)

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.

Welcome

Thanks

Thanks

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).

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

Thanks a lot for pointing this out. I will make changes in the next video of this series.