8,613 reads

How to Add Icons and Splash Screen in React Native (Without Library)

by Lucas LeonardoMarch 15th, 2023

Too Long; Didn't Read

This tutorial was created with the application built using create-react-app. To work with Apple's environment, we need a macOS. For this, we will need icons in various sizes as well as a round version of the icons (without background). Also, please note that if you don't have these sizes, we have a step-by-step guide on how to configure this.

featured image - How to Add Icons and Splash Screen in React Native (Without Library)

Today, I faced the following challenge at my internship: to modify/implement a splash screen and an icon for the project I am working on.

However, I preferred to do it natively so as not to be dependent on third-party libraries. I set aside some time to do the spike (study) on how it works, where I would have to make changes, and what it would apply to. After doing the spike, I understood that I would have to do it separately for iOS and Android.

Let's talk about iOS first!

Note: This tutorial was created with the application built using create-react-app.

iOS

Firstly, we need to remember that to work with Apple's environment, we need a macOS. Now that the project is already created, let's go to the 'ios' folder and open it in Xcode.

After that, we go to the folder with the name of our project, following the fictitious example below:
Now, we will go to the 'Images' file, where we will have the size options. Just drag the corresponding images for each dimension and also one to be the app icon to use in the splash screen (if you don't know how to format your images to meet the standards, at the end of the article, we will have a brief tutorial on how to do it).
At this point, we have already finished configuring the icons, and now we move on to the splash screen. For this step, I will use a solid background and an image in the center as an example, but you can edit it as your design created (or as you imagined lol).

Firstly, we will open the 'LaunchScreen' file in Xcode. In this file, we will navigate in the following order: 'View Controller Scene' → 'View Controller' → 'View'.

In this field, we have the safe area, which is nothing more than the useful space on the screen.

By default, it already comes with the name you gave to the app when you created it and a footer 'Powered by React Native'. In this case, we will delete the footer and the app name. After that, we will click on the '+' in the upper right corner and go to the 'Image View' option and drag it to the application, align it in the middle, and adjust the responsiveness.
Now that we have adjusted everything, just close Xcode and build your application. Your app will be all configured

(Note: if you had already run it on your phone or emulator before, remember to delete the app so that the icon changes are applied)!

Android

Now let's move on to the Android configuration. For this, we will need icons in various sizes as well as a round version of the icons (without background). Also, please note that if you don't have these sizes, we have a step-by-step guide at the end of the post on how to configure this. A bit different from what we did on iOS, I chose not to use Android Studio here and instead modify the code directly because I didn't find its formatting menu very interesting!
With the images already saved on your device, we will open the application folder in the file manager → android → app → src → main → res. Inside the "res" folder, we have the "drawable" folder and other "mipmap-suffix" folders.

The "drawable" folder is where we will configure our splash and have the main icon, while the "mipmap" folders are responsible for the different icon sizes and round icons. The first thing we will do is replace the icon files with ours. I recommend using the same names as the ones already there so you don't have to modify native code yet, as shown below:

Now that we have made changes throughout our application, we will move on to the native part! Inside the drawable folder, we have the file "rn_edit_text_material.xml" and we will make some configurations in it.

To make it less verbose for you to write, I will leave the configurations that I used for you to simply copy and paste into your code along with an explanation of each change: We added the <layer-list> tag to direct the project schemas, and inside it we passed what we want to use.

In this case, I used the <item android: drawable="@color/primary" /> tag to set the background color (we will configure it in the next step), and the last tag with the item android: prefix to set the dimensions, which image to use, and its positioning on the device screen.

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2014 The Android Open Source Project
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
          http://www.apache.org/licenses/LICENSE-2.0
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">   
  <!-- 
    This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
    The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
    NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
    <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
    For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
  -->
  <item android:drawable="@color/primary" />
  <item android:width="100dp" android:height="100dp" android:drawable="@drawable/icon" android:gravity="center" />
</layer-list>

Now we will configure our backgroundColor, for that we will navigate to the "res" folder and create a file called "colors.xml" inside the "values" folder. We will add the code below, which contains a <resources> tag with our background color tag, already with the same name we gave in the previous step.
```
<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <color name="primary">#f2f2f2</color>
</resources>
```

"styles.xml" is a file within the "values" folder, where we'll edit the following line that comes as a default when creating the app:
```
 <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
```
to this code:
```
<item name="android:windowBackground">
  @drawable/rn_edit_text_material
</item>
<item name="android:statusBarColor">
  @color/primary
</item>
```
In the code snippet mentioned above, we set which window the background belongs to at the top, and at the bottom, we set the color (previously defined). Great job! Your Android app should be all set with the new splash screen and icons. Don't forget to test it thoroughly before publishing it to the app store. Good luck with your app!

Creating icons in desired sizes.

To create our icons in the exact sizes, we will use 2 tools, the first one is called #Figma (https://www.figma.com/) and the second one is a website called #ApeTools (https://apetools.webprofusion.com/#/tools/imagegorilla). In ApeTools, we upload our image and it formats it in the iOS or Android standard size. In Figma, we will upload our Android images and add a borderRadius to them to make them rounded.

ApeTools:

To use it, we will click on the "choose file" option, select the Logo and then select the Android and iOS base, after that just click on Kapow! and the site will automatically render our icons.
Figma:

Note: This step is only for configuring the Android icon.

We will open the website or the #Figma application, upload the images that we want to round and in the right-hand menu, in the curve option, we will put '100' to get a perfect circle (in the example below I did it with only one image for illustration, but it should be done in all images of the "@mipmap" and I also used a larger borderRadius because my sample image was too large).