Cómo agregar íconos a tu aplicación de React Native

Crédito: foto por Benjamin Sow en Unsplash

Al momento de agregar los íconos de un nuevo proyecto siempre nos pasaba lo mismo: nadie recordaba a ciencia cierta el proceso. Algunos programadores los agregan a mano, otros usan herramientas y otros lo delegan en alguno de los dos anteriores.

Así que decidimos terminar con el problema de raíz y desarrollar un tutorial para nuestro equipo que ahora compartimos con la comunidad de React Native de América Latina.

A continuación explicaremos cómo agregar los íconos para tu app en Android y iOS.

Android

Para agregar los íconos en Android los podemos generar directamente desde Android Studio.

• En la sidebar, hacer click derecho en la carpeta res dentro de app y luego en New > Image Asset.

Android Studio: New > Image Asset

• En Foreground Layer elegir tipo de ícono Launcher Icons (Adaptive and Legacy) para soportar la mayor cantidad de dispositivos Android. En Source Asset podemos elegir una imagen o texto y ajustar su tamaño. Recordar guardar la imagen en formato .png si esta tiene transparencias.

Android Studio: configurar un Image Asset

• En la pestaña Background Layer podemos elegir un color o imagen de fondo y ajustar su tamaño.

Android Studio: configurar un Image Asset

Una vez que tengas todo como te guste, aprieta Next.

En la siguiente pantalla se decidirá en qué directorio se guardarán los archivos y cuáles son estos archivos. Apretar Finish para generarlos.

Android Studio: elige en qué directorio se guardarán tus archivos

¡Eso es todo! La próxima vez que hagas un build de tu aplicación la verás con el nuevo ícono generado. Pruébalo en diferentes dispositivos para ver cómo se comporta en las diferentes versiones de Android y así ver todos los posibles íconos en acción.

El nuevo ícono de tu app

iOS

Para generar los íconos de iOS vamos a utilizar generator-rn-toolbox.

Como primer requisito, necesitamos tener instalada una versión de node mayor a 8.

Instalamos el generador con:

yarn global add yo generator-rn-toolbox

Y también imagemagick mediante el comando de brew:

brew install imagemagick

Es importante mencionar que para generar el ícono la imagen debe ser cuadrada con un tamaño mayor o igual a 1024x1024 px. Se pueden usar imágenes en formato png, jpg y psd.

Desde la carpeta del proyecto React Native, corremos el siguiente comando para generarlo:

yo rn-toolbox:assets --icon icon.png --ios

Cuando pida el nombre del proyecto ponemos el nombre en caso de que el nombre que muestre por defecto no sea el correcto. Y en caso de que pida sobre escribir algún archivo, decir que sí.

Xcode: previsualización de íconos

¡Listo! Eso fue todo. El proceso resultó bastante simple, mucho más simple de lo que todos imaginábamos antes de armar la guía.

Ícono en un dispositivo iOS

Nota: si por alguna razón no queremos usar Android Studio para generar los íconos de Android (si bien es lo que recomendamos), también podemos usar esta herramienta, sacando la opción de iOS del comando anterior:

yo rn-toolbox:assets --icon icon.png

¡Si tienes comentarios, dudas o preguntas no dudes en usar los comentarios abajo o escribirnos en nuestras redes!

¿Estás buscando desarrolladores expertos en React Native? ¡No dudes en contactarnos! Escríbenos desde nuestra web o por e-mail a newbiz@underscope.io