Cómo diseñar una pantalla de bienvenida con Expo y React Native

Incluso los detalles más pequeños son importantes para que una aplicación tenga éxito.

¿Qué es una pantalla de bienvenida?

Has hecho una gran aplicación y, por supuesto, ¿por qué no publicarla bien? Pero si abre su aplicación Expo y ve la pantalla de inicio aburrida predeterminada proporcionada por Expo, usted ……… “Espera, ¿qué es una pantalla de inicio en primer lugar?”

Al ver la imagen de arriba, probablemente se habrá hecho una idea de lo que estoy hablando.

Básicamente, cuando iniciamos una aplicación, requiere algo de tiempo para ejecutar o cargar las fuentes/activos y la aplicación no está disponible de inmediato. Entonces, una pantalla de bienvenida es básicamente la pantalla que el usuario ve mientras la aplicación está en estado de carga.

¿Qué pasa con los tamaños de los dispositivos?

No hay problema, Expo nos tiene cubiertos. En el caso de los dispositivos iOS, podemos optar por 1242 píxeles de ancho y 2436 píxeles de alto: este es el ancho del iPhone 8 Plus (el iPhone más ancho) y la altura del iPhone X (el iPhone más alto). Pero en el caso de Android, los tamaños de pantalla varían mucho con la enorme variedad de dispositivos que hay en el mercado. Una estrategia para lidiar con esto es mirar las resoluciones más comunes y diseñar en torno a ellas; puede ver una lista de dispositivos y sus resoluciones aquí . Puedes ver el documento de la exposición donde he copiado la información anterior 😁😁

Configuración de la pantalla de bienvenida

Puede configurar su pantalla de inicio en el archivo app.json y leer sobre todas las propiedades de la guía de la exposición a continuación:

1. splash.image (Nota: la imagen de la pantalla de bienvenida no tiene fondo)
2. splash.backgroundColor
3. splash.resizeMode

Iconos

Cuando publica su aplicación, el ícono de la aplicación es lo que la gente ve en App Store/Play Store y también en la pantalla de inicio del usuario.

Tamaño de ícono

Como sugiere Expo, podemos usar 1024x1024 en dispositivos Android e iOS. Y también asegúrese de que el ícono debe ser exactamente cuadrado, es decir, un ícono de 1023x1024 no es válido.

Configurando los Iconos para Android

En Android, tenemos que hacer alguna configuración extra más allá de especificar el ícono en app.json. Puede obtener más información sobre todas esas configuraciones aquí y por qué las necesitamos. Básicamente, debe proporcionar las 2 capas separadas:

• android.adaptiveIcon.foregroundImage (generalmente assets/adaptive-icon.png )

• android.adaptiveIcon.backgroundImage

  
  

Nuevamente, lea más sobre estas 2 capas aquí .

Creación de iconos y pantalla de bienvenida

Agregaré íconos y una pantalla de bienvenida al proyecto WhatsApp-Clone . Para crear los íconos, puede usar "Canva", "AdobeXD", etc. Pero lo creé con la plantilla Figma como se explica en los documentos de la exposición. Si quieres saber cómo crear iconos, mira este video . Pero Abajo 👇 están los íconos que creé con Figma.

Vea el ícono que creé ☝☝ en Figma arriba. Además, descarga los íconos aquí si no quieres ir a Figma.

Reemplazo de los archivos y revisión de todo el archivo App.json

Después de descargar los activos, simplemente vaya a la carpeta de assets de su proyecto y reemplace los 3 archivos que he resaltado. Los archivos que descargue se nombrarán automáticamente con su nombre específico, ¡así que NO SE PREOCUPE! Elimine los archivos antiguos si lo desea. También puede eliminar el archivo assets/favicon.png porque se usa para la web y nuestra aplicación no es para la web.

Debajo 👇 está todo el archivo App.json con todas las configuraciones descritas anteriormente:

 { "expo": { "name": "Whatsapp Clone", "slug": "Whatsapp-Clone-React-Native", "platforms": ["ios", "android"], "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "updates": { "fallbackToCacheTimeout": 0 }, "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#FFFFFF" } } } }

Salida final

Entonces, ¡Fácil verdad!…. Así de fácil puede agregar íconos y una pantalla de bienvenida a su aplicación. Espero que hayas disfrutado este artículo. Hasta la próxima.

Mantenerse a salvo; Mantenerse sano

Gracias

Publicado por primera vez aquí