React Native 에서 앱의 아이콘을 변경하는 방법은 App Icon Generator 와 Android Asset Studio 사이트에서 변경할 수 있습니다 .

아이콘 변경을 위한 로고 준비하기

개발자가 변경하기 원한 아이콘을 준비합니다.

로고의 크기는 1024 x 1024 크기로, Android 와 IOS 에 필요한 로고들을 사이즈별로 생성하면 됩니다.

Android

1. Android Asset Studio 사이트에 접속하여 변경하기를 원하는 아이콘의 이미지를 Drag & Drop 하여 열어줍니다.
2. Shape 배너에서 Circle 로 지정하여 아이콘의 모양을 Square -> Circle 로 바꿔줍니다.
3. Padding 배너에서 개발자가 원하는 디자인을 위해 Progressbar 를 이용하여 아이콘의 크기를 조절해줍니다.
4. Name 배너에서 ic_launcher 로 되어있는 부분을 ic_launcher_round 로 바꿔줍니다.
5. 오른쪽 상단의 다운로드 버튼을 눌러 설정한 아이콘 이미지를 다운로드 합니다.

위 과정을 정상적으로 수행하면 폴더를 다운받게 됩니다. 그리고 폴더로 들어가 res 라는 폴더에 들어가면 각 기기마다 보여지는 아이콘의 사이즈를 호환하기 위한 폴더와 파일들이 구분되어 있습니다.

android/app/src/main/res 경로에서 위 폴더들을 복사 & 붙여넣기 를 합니다.
이때!! ~~anydpi-v26 폴더 및 하위 파일들은 추가하지 않습니다.

여기서 중요한 게, 이 폴더들 안에 ic_launcher.png 라는 이미지 파일을 각각 넣어주면 안드로이드 앱 아이콘 설정 작업은 끝나게 됩니다.

• mipmap-hdpi
• mipmap-mdpi
• mipmap-xhdpi
• mipmap-xxhdpi
• mipmap-xxxhdpi

IOS

1. App Icon Generator 사이트에 접속하여 변경하기를 원하는 아이콘의 이미지를 Drag & Drop 하여 열어줍니다.
2. File name 을 ic_launcher 라고 입력 하고, 다운로드를 받습니다.

위 과정을 정상적으로 수행하면 폴더를 다운받게 됩니다. 그리고 폴더로 들어가 Assets.xcassets/AppIcon.appiconset 라는 폴더에 들어가면 각 기기마다 보여지는 아이콘의 사이즈를 호환하기 위한 파일들이 구분되어 있습니다.

3. 터미널을 열어 명령어를 입력합니다.

   xed ./ios

4. Xcode 에서 Images.xcassets 파일을 열고 각 사이즈에 맞는 이미지를 AppIcon.appiconset 폴더 안에서 찾아 Drag & Drop 합니다.

(저 같은 경우는 이미 아이콘 설정 작업을 다 해놓고, 블로그를 작성한 상태라 이미 설정이 되어 있습니다. 😂)

---

위 작업을 모두 마치고 Metro 서버를 재실행 시키고, App을 Build 하면 성공적으로 아이콘 설정이 변경된걸 확인할 수 있습니다!! 😆