Agregar una pantalla de bienvenida a una aplicación React Native en iOS y Android

Para colocar una aplicación React Native en las tiendas de aplicaciones se necesita algo más que simplemente crearla. Antes de la revisión, se requieren íconos, descripciones y una pantalla de bienvenida, y es en esta pantalla donde interviene el código nativo. Los pasos a continuación abarcan iOS y Android en sus IDEs respectivos, con una pequeña cantidad de código nativo. Las instrucciones provienen de la época de react-native-splash-screen (la versión 3.0.6 y react-native link), por lo que las versiones más recientes de React Native podrían manejar el enlace de manera diferente.

Los proyectos creados con Expo o Create React Native App no necesitan nada de esto, ya que su propia documentación explica las pantallas de bienvenida en pocas líneas.

Un proyecto nuevo es un buen punto de partida; por ejemplo, react-native init SplashExample. Póngalo bajo control de versiones antes de hacer cualquier cambio. Esto facilita revertir errores y muestra con exactitud qué archivos afecta una pantalla de bienvenida.

Diseño de los recursos

Un enfoque anterior utilizaba una imagen grande como pantalla de bienvenida, la cual se escalaría mal con la creciente variedad de resoluciones de pantalla. Un plan mejor parte de una imagen cuadrada sencilla que se asemeje al ícono de la aplicación, por dos razones.

1. Genera la impresión de que el ícono al que se hace clic crece hasta llenar la pantalla, lo que hace que la transición parezca continua.
2. Se mantiene simple. Una pantalla de bienvenida debe ser visible durante unos pocos milisegundos, por lo que no debería contener información. Al fin y al cabo, es una pantalla de carga.

Exporte la imagen cuadrada en tres tamaños: 200 px para @1x, 400 px para @2x y 600 px para @3x.

Un fondo que haga evidentes los destellos

Si ya has probado una pantalla de bienvenida en React Native, es posible que hayas visto un destello blanco antes de que aparezca el contenido. En una aplicación con fondo blanco es difícil darse cuenta, pero sigue siendo molesto. Para que ningún destello pase desapercibido, da a la aplicación de demostración un fondo oscuro: establece el color de fondo en #4F6D7A, el color del texto en #F5FCFF y cambia la barra de estado a texto claro, todo esto en App.js.

iOS

Abre el proyecto en Xcode:

open ios/SplashExample.xcodeproj

Primero, agregue un recurso de imagen. En el navegador de la izquierda, vaya a SplashExample, luego nuevamente a SplashExample, después a Images.xcassets, y presione el botón más en la segunda columna del navegador. Asigne al recurso el nombre SplashIcon. Inserte las tres imágenes, y Xcode asignará automáticamente cada una a la densidad de píxeles adecuada.

A continuación, abra LaunchScreen.xib desde el navegador de la izquierda. Contiene dos elementos de texto: el nombre del proyecto y “Powered by React Native”. Seleccione ambos y úselos para borrarlos.

Establezca el fondo de la vista. Seleccione “View” en el segundo navegador, luego elija “Background” en el panel de la derecha para abrir el selector de colores. Un consejo que lleva algo de tiempo descubrir: elija la segunda pestaña del selector, luego “RGB Sliders”, y aparecerá un campo donde se puede ingresar un valor hexadecimal. Introduzca #4F6D7A.

Ahora agregue una Vista de Imagen. Abra la biblioteca de objetos (el tercer ícono en la esquina inferior derecha del panel de herramientas), busque “image” y arrastre la Vista de Imagen sobre la Vista de color. En el panel de atributos de la esquina superior derecha, elija SplashIcon como imagen. Establezca el Modo de Contenido en “Aspect Fit”, que está en la segunda posición desde arriba en ese panel, para que las proporciones se mantengan correctas.

Para mantener el ícono centrado en cualquier dispositivo, abra la pestaña de regla (el quinto ícono en la parte superior del panel derecho). En el cuadro de “Autoresizing”, desactive las líneas rojas exteriores y active las flechas rojas interiores. La imagen permanecerá centrada independientemente del tamaño de la pantalla.

Esto genera una pantalla de bienvenida, pero el destello blanco sigue estando presente.

Por qué ocurre el destello

Cuando se inicia la aplicación, iOS muestra inmediatamente la pantalla de inicio. Luego, React Native necesita tiempo para arrancar: se está cargando el JavaScript y se está inicializando el puente de comunicación. Durante ese intervalo, la pantalla de inicio nativa desaparece y aún no se ha renderizado nada, por lo que se ve blanco. La solución es mantener la pantalla de bienvenida un poco más tiempo del predeterminado, hasta que el JavaScript esté listo. El paquete react-native-splash-screen hace eso.

Instálalo y enlázalo:

yarn add react-native-splash-screen@3.0.6
react-native link react-native-splash-screen

Luego, configure el lado nativo. En Xcode, abra AppDelegate.m, agregue la importación del encabezado del paquete SplashScreen.h junto con las demás importaciones y llame a [SplashScreen show]; justo encima de return YES; dentro de didFinishLaunchingWithOptions.

En el lado de JavaScript, indique a la pantalla de bienvenida que desaparezca una vez que la aplicación esté lista. Llame al método de ocultamiento del paquete desde componentDidMount en App.js.

El resultado se ve bien, quedando solo un pequeño detalle por resolver: el color de la barra de estado mientras muestra la pantalla de bienvenida. En Info.plist, agregue una fila con la clave UIStatusBarStyle y el valor de cadena UIStatusBarStyleLightContent. Después de eso, el lado de iOS está listo.

Android

Android es un poco más complicado porque se necesitan dos pantallas de bienvenida separadas. Una pertenece a react-native-splash-screen, y la otra se muestra antes de que la aplicación muestre sus vistas.

Recursos

Copie las imágenes en las carpetas mipmap que se encuentran dentro de android/app/src/main/res. Android denomina de manera diferente a sus categorías de densidad en comparación con iOS, por lo que es necesario mapear los archivos:

• mipmap-mdpi recibe la imagen a escala 1x.
• mipmap-hdpi recibe la imagen a escala 2x.
• mipmap-xhdpi recibe la imagen a escala 3x.
• mipmap-xxhdpi también recibe la imagen a escala 3x.

Dentro de cada carpeta, cambie el nombre del archivo a icon.png.

Pantalla de bienvenida al inicio en frío

La primera pantalla aparece cuando la aplicación se inicia desde un estado inicial. Este enfoque sigue un artículo conocido de Big Nerd Ranch sobre cómo crear pantallas de bienvenida de la manera correcta, el cual explica los motivos con más detalle.

1. Cree background_splash.xml en android/app/src/main/res/drawable. Probablemente tendrá que crear el directorio drawable. El archivo define un layer-list, que es una pila de capas. La primera capa se llena con el color de fondo (definido en breve) y la segunda muestra el ícono, con 200dp de ancho y alto y centrado.
2. Cree colors.xml en android/app/src/main/res/values y defina el color azul, el mismo que utiliza la aplicación.
3. En styles.xml de la misma carpeta, define un SplashTheme. Este utiliza background_splash como fondo de la ventana y el color azul para la barra de estado, lo que imita la aplicación real lo más posible, incluyendo el cambio en la barra de estado. También asegúrate de que el color de la barra de estado del tema predeterminado esté configurado correctamente.
4. En AndroidManifest.xml, haz que la aplicación utilice primero SplashTheme. Dentro de <application>, registra una nueva SplashActivity como iniciador, y ajusta MainActivity para que ya no sea la entrada del iniciador. Presta atención a android:exported="true", que debe establecerse donde sea necesario en las versiones más recientes de Android.
5. Crea SplashActivity.java. Su única función es redirigir inmediatamente a MainActivity, que es la aplicación real de React Native.

Ejecuta la aplicación, ciérrala para que el siguiente inicio sea desde cero, y ábrela de nuevo. La pantalla de bienvenida aparece al instante, seguida del mismo destello blanco. Arreglarlo requiere un poco más de trabajo que en iOS, pero no mucho.

Mantener la pantalla de bienvenida hasta que JavaScript esté listo

Si aún no está instalado, agrega el paquete y enlázalo:

yarn add react-native-splash-screen@3.0.6
react-native link

Configura el lado nativo de Android agregando la llamada de inicialización del paquete en MainActivity.java. En App.js, asegúrate de que la pantalla de bienvenida se cierre tan pronto como se cargue la aplicación, al igual que en iOS.

Luego crea launch_screen.xml en android/app/src/main/res/layout. El nombre es importante, ya que la biblioteca lo busca. Utiliza un LinearLayout como elemento raíz. Android Studio cuenta con un editor visual similar al Interface Builder de Xcode, pero editar el XML directamente es más sencillo aquí. Establece la gravedad del layout en centro y su fondo en azul, dejando el resto en valores predeterminados. Dentro de él, agrega un ImageView que muestre el ícono.

Propiedades del ImageView:

• android:layout_width y android:layout_height definen el tamaño, coincidiendo con el utilizado por background_splash.xml.
• android:layout_marginTop debe ser igual a la altura de la barra de estado. Si no se especifica, el ícono aparecerá en una posición ligeramente diferente a la de la primera pantalla de bienvenida, lo que genera un salto visible al reemplazar una por la otra.
• android:src="@mipmap/icon" hace referencia a la imagen.

Por último, colors.xml necesita una entrada más:

<color name="primary_dark">#4F6D7A</color>

Si se omite, la aplicación se cae al iniciarse. La causa es un defecto dentro de react-native-splash-screen mismo, por lo que una versión posterior podría hacer que esta función sea innecesaria.

Con ambos componentes en su lugar, la aplicación se inicia con una pantalla de bienvenida continua y sin parpadeos tanto en iOS como en Android.