React native app icon android

App Icon in React Native (IOS and Android)

Apr 5, 2020 · 2 min read

App icon is something, uniquely recognises your app from thousands of other out there. Most of the cases, the app icon can be the company/product logo or else some special symbols or any specific part of the name/logo.

Android

From Android 8.0, introduced the concept of adaptive launcher I cons. This icon can self align to depending on the device or launcher application. Concept of adaptive launcher icon is one of many standardisations that Android introduces. To change the icon you just need to replace current icons in mipmap folder named ‘ic_launcher’ and ‘ic_launcher_round’. You can find the same in AndroidManifest.xml. inside application tag. ‘ic’ in ‘ic_launcher’ stands for ‘icon’. We need to add icons in different ‘mipmap’ folders. According to teh phone resolution the device will choose the icon to show.

Android Icon Measurements
Size: 512px x 512px
Format: 32-bit PNG
Color space: sRGB
Max file size: 1024KB
Shape: Full square

In IOS it is pretty much straight forward. Open projectname.xcodeproj/projectname.xcworkspace. On the root directory click on the folder named Images.xcassets.

Drag and drop the icon with the required dimension and it’s done!.

IOS Icon Measurements
Format: PNG
Color space: sRGB/P3
Layers: Flattened with no transparency
Shape: Square with no rounded corners.

Источник

Android adaptive icons and splash screens for React Native projects (2019)

Oct 20, 2019 · 5 min read

The app icon is the first thing your user sees every day when they use your app, and it’s competing for attention with other icons on screen. Therefore it’s very important to get it right.

Why write another Android icon/splash screen article? While there are quite a few tutorials out there covering similar topics, I feel like there is room for an update because some of the answers have changed and a few of the problems we examined here are React Native specific.

Sold? Then let’s begin.

1. Generate Android Adaptive Icons using Android Studio

Before we start, you will need to prepare the artwork for the icon. You can find some ready-made templates in the Resources and tools section near the bottom of this excellent Adaptive Icons Design article.

If you don’t w ant to create the artwork now and just want to try out the steps in this tutorial, you can use this pre-generated one to follow along.

Ready? Let’s open your project in Android Studio and create a new Image Asset in app -> New -> Image Asset

In the Foreground Layer tab, change the image asset Path to your icon artwork. Then switch to the Background Layer tab and add a solid color background, or image if you have one.

Press Next and Finish in the subsequent screens. Now clean and run the Android project again and your new icon should now appear.

2. Android splash screens

Due to differences in how Android activities are handled in React Native’s two major navigation libraries. The splash screen part of this tutorial assumed that you are using Wix’s React-Native-Navigation . I will update this article with steps for React-Navigation in a later date.

Copy splash screen image

If you don’t have a splash screen image handy, you can still follow along with this pre-generated one .

Navigate to the android -> app -> src -> main -> res folder and paste a copy of your splash screen image into each mipmap-xxxxxxx folder generated from the previous App Icon section. Skip the mipmap-anydpi-v26 folder if you have one or it will cause an error.

Create a splash_screen.xml file

Create a new xml named splash_screen.xml and paste in the content below. Replace logo_splash with the name of your image.

Then create the following folders in android -> app -> src -> main -> res and paste a copy of the newly created splash_screen.xml in each of them.

Create a color.xml file

In the android -> app -> src -> main -> values folder, create a new xml named color.xml and paste in the content below.

Edit the styles.xml file

In the same values folder, you should have a styles.xml

Add a new SplashTheme style item so it look something like below. Note that the splash_screen value here is referencing the name of the splash_screen.xml we created earlier.

Update AndroidManifest.xml

Add the following items to your AndroidManifest.xml
xmlns:tools=”http://schemas.android.com/tools»
android:theme=”@style/SplashTheme”
tools:replace=”android:theme”

Here is an example showing where to place each of them

Solving the white flash problem

If you run the app now, the splash screen will work but if your app has a dark or strong color theme, you might have noticed there is a white flash between React loading and the React-Native-Navigation taking over. To solve this problem, simply edit the MainActivity.java with the content below.

And a solid background color on all navigation screens.

Clean and run the app, you should now see the splash screen when you start the app.

Congratulations! You have reached the end of the article and hopefully an app with proper icons and launch screens. If you like the article and have any feedback or suggestions on how it can better, please leave a comment below. And don’t forget to mash that 👏 button! Thank you for reading and have a nice day.

Источник

Change App Icon in React Native for Android and iOS

App Icon for Android and iOS

Application Icon is the Unique identification of the App. Application Icon is the main thing that the user always remembers. In most cases, the user remembers the application icon instead of the application name. App Icon can be your brand logo or anything else but should define the purpose of your application.

In this example, we will see how to change the Application Icon in React Native. This example will cover the updating of the icon for both Android and iOS. Please note after setting the application icon if you are recreating/updating the platform (Android / iOS directory in the project) then you have to set up the icon again.

To change the application icon here is an example below. Let’s get started.

First of all, we have to create an App.

Look at the Old Icon

If you are developing an app (either in Native or Hybrid) you will be provided a default App Icon for both the platform. If you can run the application then have a look at the current icon.

To run the application in the Android

To run the application in the iOS

How to Make the Multiple Size Icon?

To change this default icon we need our own application icon in different sizes for the different devices. You should create an App Icon by your self or you can download it from the Google Images only when it is free with no copyright.

We are going to set this Icon as our App Icon

(Please use 1024px * 1024px size image)

Once you have your App Icon Ready then you have to make multiple size Icon for both Android and iOS.

makeappicon.com will also help you to provide App Icon for Both. These guys are doing a great job. You just need to upload your Icon on their website and they will provide multiple sized icons arranged in a proper folder structure.

Other than that you can also explore:

3. resizeappicon.com for both Android and IOS.

Setting App Icon for Android Applications

To change the Android application icon copy all the minmap-* directory from the android directory of downloaded makeappicon zip.

Now navigate to res directory of your project (YourProject -> android -> app -> src -> main -> res) and replace the default icons with newly downloaded icons.

Now open the terminal again and run the project again using

Here we can see the Application Icon has been changed

Setting App Icon for iOS Applications Directly

To change the application icon for the iOS copy all the content of AppIcon.appiconset from the ios>AppIcon.appiconset directory of downloaded makeappicon zip.

After copying all the icons from the downloaded icons paste the same in your projects AppIcon.appiconset directory (YourProject -> ios -> YourProject -> Images.xcassets -> AppIcon.appiconset) if it ask to replace the JSON then click yes to replace.

Open the terminal again and run the project again using

Here we can see the Application Icon has been changed

Setting App Icon for iOS Applications using XCode

You can also do the same for the iOS from the Xcode you just need to open the project in Xcode by clicking -> Your_Project -> ios -> YourProject.xcworkspace file in.

After opening the project expand the project and find the Images.xcassets click onto it

You will see a new window with some empty icon slots.

Now according to 2x, 3x size in PT simply opens your downloaded icon folder -> ios -> AppIcon.appiconset and with the same PT size with the same 2x and 3x size drag the icons here.

Open the terminal again and run the project again using

This is how you can change the Icon of your React Native Application for Android and iOS both.

Alternate Way to Change App Icon in React Native Using Command Line Interface

If you are using MAC or Ubuntu you can also see the alternate way below. If you are the windows user then you have to use the above method only.

Motivation

In an Ionic App development process, we can use a single command to change the Icon so why not in React Native also? So I started finding different ways to do that and finally I got some success in RN ToolBox. Let’s see how to change the App Icon using Command Line Interface.

Installation of RN ToolBox

RN ToolBox will help you to set up your App Icon using Command Line Interface but for that, you need node > version 6 . If you are using correct node version then you can install the generator using

To generate your icons, the generator-rn-toolbox uses ImageMagick. Ubuntu user can skip this but for Mac users run

Set the Icon for Android and iOS Application

After the installation of the required tools, we need an application icon. Min 200px x 200px size is recommended.

Now after making the icon, we have to run the following command to set up the icon for our application

You will be asked for the name of your react-native project, just copy and paste the name of your application.

You will be asked to replace Contents.json file, input y and hit enter

Congratulation!! you have successfully updated your App Icon from the command line.

Android

iOS

This is how you can change the App Icon using Command Line Interface. If you have anything else to share please comment below or contact us here.

Источник

React Native — Adding App Icons for Android

Recently, I started dabbling in React Native to prep for a new job. Coming from React, things felt familiar. However, it feels like there is less documentation/articles/tutorials out there compared to anything related to the web (which makes sense — React Native hasn’t even released a v1).

One of the things I’ve been working with is adding an app icon for the Android version of the app I’m building. The goal of this post is to share everything I’ve learned so far so that maybe it will help you avoid any challenges I ran into.

WARNING: As mentioned, I am new to React Native, so please take what I say here with a grain of salt. If you find something that is incorrect, please let me know in the comments.

So let’s get to it! 🕺🏼

What do I need to know?

In order to add app icons (more commonly called «launch icons») to your Android version of your React Native app, there are a few things you need to know:

• Should my icon be square or round?
• Where do the icons live within my app?
• How do I make them?

We’ll tackle these one at a time.

Should my icon be square or round?

The answer is it depends.

Depending on the OEM device, the system will decide whether it will use a «squareish» icon or a round icon. When I ran my app on the Pixel 2 emulator, the square icon was placed «into» a circular icon and it looked ugly 🤮

After looking at the docs, I found this section which explained why that was happening:

You must only use the android:roundIcon attribute if you require a different icon asset for circular masks, if for example the branding of your logo relies on a circular shape.

The logo/icon I was using had a circular shape hence why I had an issue.

In addition to the square and round icons, you may want to create what’s known as an «adaptive icon». According the the Android Developer Docs, «adaptive launcher icons» were introduced in Android 8.0. As of this writing, the latest version is Android 9.0 (also known as Pie).

To summarize, you may need both, depending on the shape of your icon. And you should definitely check out adaptive icons.

Where do the icons live within my app?

Luckily, this answer is pretty straightforward.

Assuming you created your project using the React Native CLI, they will live here:

You’ll have a bunch of different directories that are prefixed with mipmap and suffixed with different sizes like hdpi and mdpi for instance.

These will each contain your icon in different sizes.

How do I make my icons?

I recommend designing your icons in Figma. You should create two layers:

1. a background layer — the background of the icon
2. a foreground layer — the icon

I created mine in at 108 x 108 and then exported them as PNGs at 1x.

Then I followed @_s_farias ‘s post called «How to create adaptive icons for Android using Android Studio». This made it very easy to create the icons because Android Studio generated all of them for me and even created most of the necessary subdirectories. 😄

*One thing to note:

• I did have to manually create a drawable directory within res . I then copied the files from the mipmap-xxxhdpi to the drawable directory. I don’t know if this is right, but the build succeeded and it worked 🤷🏼‍♂️ (Hoping someone will explain the correct way to do this).

Common Errors

• Forgetting to update the AndroidManifest.xml file

In the very beginning, I ran into errors because I forgot to update these two lines within this file:

• resource drawable/ic_launcher_foreground not found

Your build is failing because you didn’t create the drawable directory. See «One thing to note» in previous section.

Anyways — thanks for reading — hope this helps with you React Native Android icons! 🙏🏼

Источник