How to Change App icons and Notification Icons in React Native (Android)

ByMohammed Rashid Posted on

Want to change the default app icon and notification icon of your React Native app in Android? Then you are at the right place. It would have been a tough task if there was no Android Asset Studio. Android Asset studio helps to create launcher icons as well as notification icons in proper formats.

Update: It seems like the Android Asset Studio app icon generator page is no more maintained. Hence, I suggest you use the icon.kitchen for changing the app icon.

For the app icon, go here and choose Image as Foreground. Then upload your own image, do your own customization, and download. Make sure that you haven’t changed the default file name given in the Asset Studio. Unzip the downloaded folder and copy all folders inside the res folder. Now go to YourProject>android>app>src>main>res and paste all folders you have copied.

In case of a notification icon, just go here and choose Image as Foreground. Upload your icon and do your own customization. Download it and unzip the folder. Copy the folders and navigate to
YourProject>android>app>src>main>res and paste there. The name of the images will depend upon the library you are using for push notifications. For example, if you are using onesignal, the name of the images should be changed to ic_stat_onesignal_default .

That’s how you change the app icon and notification icon for Android in react native.

About Me

I'm Mohammed Rashid from the beautiful state of Kerala in southern India, with a journey seasoned in software engineering and mobile app development.

In a tech world that's always changing, I keep myself updated with the latest like SwiftUI and Jetpack Compose for crafting native apps on iOS and Android. I have also experience in React Native and Flutter.

Through this space, I share my learnings and insights hoping to assist anyone diving into the native mobile app development.

Similar Posts

How to Disable TouchableOpacity Component in React Native

ByMohammed Rashid

TouchableOpacity is one of the most used components in React Native projects. The reason is simple, TouchableOpacity is much more flexible and highly customizable than components such as Button. As I mentioned in the title, you can either disable or enable TouchableOpacity according to your requirement. All you need to use is the disabled prop…

How to Add Activity Indicator in React Native WebView to Show Progress

ByMohammed Rashid

WebView is an integral component in React Native. You can use it as a mobile browser inside your React Native app. As we know, web pages take some time to load. It’s better to show an ActivityIndicator when the web pages load every time. First of all, install WebView on your project using any of…

How to Capitalize TextInput Component in React Native

ByMohammed Rashid

TextInput is the component where the end user gives input. Sometimes, we may need to control how the values are inserted into the TextInput. Let’s check how to capitalize the text inserted through TextInput in react native. If you are looking for how to capitalize a Text component in react native then you can check…

How to Capitalize Text in React Native using Style

ByMohammed Rashid

Sometimes, we need to show text in some specific cases. There are already JavaScript functions such as toLowerCase and toUpperCase. But having a property for changing cases or capitalize can make your work simpler. In this react native example, I am using a text style prop named textTransform for the case conversion and capitalization of…

Execution failed for task ‘:app:validateSigningDebug’ React Native Error Fix

ByMohammed Rashid

I created a new react native project with react native version 0.60.5 and faced a new react native issue when I tried to run the project on my Android emulator. The react native error I faced was Execution failed for task ‘:app:validateSigningDebug’ as given in the screenshot below. As written in the error, I was…

Leave a Reply