Cómo Crear una Pantalla de Inicio en React Native (Con Ejemplos de Código)

Las primeras impresiones son cruciales en las aplicaciones móviles. Cuando un usuario inicia tu aplicación de React Native, una pantalla de inicio es lo primero que ve. Una pantalla de inicio muestra el logotipo o la marca de tu aplicación mientras ésta se inicializa, dando a tu aplicación una sensación más pulida al evitar una pantalla en blanco y asegurando a los usuarios que la aplicación está cargando.

¿Qué es una Pantalla de Inicio en React Native?

Una pantalla de inicio es la pantalla inicial que aparece cuando se lanza tu aplicación. En React Native, la pantalla de inicio típicamente muestra el nombre de tu aplicación, logotipo u otros elementos de marca sobre un fondo simple. Permanece visible mientras el código nativo carga y prepara la aplicación de React Native. Los principales propósitos de una pantalla de inicio son:

• Branding: Hace que la marca de tu aplicación sea inmediatamente visible
• Experiencia de Usuario: Evita que el usuario vea una pantalla en blanco o sin respuesta durante el inicio de la aplicación
• Percepción de velocidad: Una pantalla de inicio da la impresión de que algo está sucediendo, haciendo que el tiempo de carga parezca más corto

¿Por qué Usar una Pantalla de Inicio en React Native para iOS?

Todas las aplicaciones móviles pueden beneficiarse de las pantallas de inicio, pero en iOS son especialmente importantes. De hecho, Apple requiere que las aplicaciones tengan una pantalla de lanzamiento – en iOS, la pantalla de inicio no es solo para mostrar; es parte de la experiencia de usuario esperada. Aquí hay razones clave:

• Experiencia de Usuario Mejorada: Las aplicaciones iOS que se lanzan con una pantalla de inicio bien diseñada se sienten más fluidas y profesionales
• Marca de la Aplicación: La pantalla de inicio muestra el logotipo, eslogan o arte de tu aplicación
• Gestión de Tiempos de Carga: iOS mostrará la pantalla de lanzamiento hasta que la aplicación esté lista, enmascarando cualquier retraso durante el inicio

Configuración de una Pantalla de Inicio en React Native (Específico para iOS)

Paso 1: Crear una Imagen para la Pantalla de Inicio

Primero, necesitas una imagen para tu pantalla de inicio:

• Tamaño: Usa una imagen de alta resolución (al menos 2000 x 2000 píxeles) que se vea bien en todas las pantallas de dispositivos
• Formato: PNG es el formato más comúnmente utilizado para pantallas de inicio
• Orientación y Área Segura: Mantén el contenido importante hacia el centro de la imagen

Consejo Profesional: Herramientas como App Icon Generator (appicon.co) pueden ayudar a crear imágenes con el tamaño correcto para varias pantallas de iOS.

Paso 2: Añadir la Pantalla de Inicio en Xcode

1. Abrir el proyecto iOS en Xcode: Navega a la carpeta ios y abre el archivo .xcworkspace o .xcodeproj.
2. Añadir recursos de imagen: En Xcode, encuentra Images.xcassets, crea un New Image Set llamado ""Splash"", y añade tu imagen de inicio.
3. Editar el storyboard de la pantalla de lanzamiento: Abre LaunchScreen.storyboard, elimina cualquier elemento predeterminado, y añade una Image View. Establece la imagen como tu imagen de inicio, redimensiónala o restringe sus dimensiones, y establece el Content Mode (Aspect Fit o Aspect Fill).
4. Establecer área segura (si es necesario): Si es necesario, desactiva ""Use Safe Area"" para permitir que la imagen se extienda bajo las áreas de la barra de estado/notch.

Paso 3: Modificar Info.plist para la Configuración de Visualización Adecuada

1. Abre Info.plist y busca la clave ""UILaunchStoryboardName"".
2. Asegúrate de que su valor sea el nombre de tu storyboard (p.ej., ""LaunchScreen"").
3. Verifica que el archivo LaunchScreen esté incluido en el target de la aplicación.

Ahora ejecuta tu aplicación en un simulador o dispositivo iOS para ver tu pantalla de inicio aparecer brevemente al lanzar.

Usando una Biblioteca para una Pantalla de Inicio

Usar una biblioteca puede simplificar el proceso y proporcionar control adicional. Dos bibliotecas populares son:

• react-native-splash-screen – Ampliamente utilizada tanto para iOS como para Android
• expo-splash-screen – Para flujo de trabajo gestionado por Expo

Usemos react-native-splash-screen:

1. Instalar la biblioteca:

   npm install react-native-splash-screen --save
   

   o

   yarn add react-native-splash-screen
   

2. iOS: Instalar pods:

   cd ios
   pod install
   cd ..
   

3. Configurar código nativo de iOS:

   • Modificar AppDelegate.m:

     #import ""RNSplashScreen.h""  // añadir esta importación
     

     En el método application:didFinishLaunchingWithOptions:, añade:

     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
         // ... código existente de inicialización de React Native ...
         [self.window makeKeyAndVisible];
         [RNSplashScreen show];  // mostrar la pantalla de inicio
         return YES;
     }
     

   • Verificar Info.plist: Asegúrate de que UILaunchStoryboardName sigue establecido en tu storyboard LaunchScreen.

4. Configurar código nativo de Android (si es necesario):

   • Importar SplashScreen en MainActivity
   • Llamar a SplashScreen.show(this) antes de super.onCreate
   • Añadir un layout launch_screen.xml
   • Actualizar el AndroidManifest

5. Ocultar la pantalla de inicio en tu código de React Native:

   // App.js (o index.js)
   import React, { useEffect } from 'react';
   import { View, Text } from 'react-native';
   import SplashScreen from 'react-native-splash-screen';  // importar la biblioteca
   
   const App = () => {
     useEffect(() => {
       // Ocultar la pantalla de inicio una vez que la aplicación esté lista
       SplashScreen.hide();
     }, []);
   
     return (
       <View>{/* Tus componentes de UI de la aplicación comienzan aquí */}
         <Text>¡Hola, Aplicación Principal!</Text>
       </View>
     );
   };
   
   export default App;
   

Manejo del Tiempo y Transiciones de la Pantalla de Inicio

• Mantenla Breve: Una pantalla de inicio solo debe ser visible el tiempo necesario (idealmente 1-3 segundos)
• Ocultar Cuando Esté Lista: Llama a SplashScreen.hide() tan pronto como el contenido principal de tu aplicación esté listo para mostrarse
• Coincidencia en la Transición: Usa el mismo color de fondo en la pantalla inicial de tu aplicación que en la pantalla de inicio
• Animaciones Suaves: Considera añadir una animación sutil al ocultar la pantalla de inicio
• Duración Consistente: Algunas aplicaciones muestran la pantalla de inicio por un tiempo mínimo (p.ej., 2 segundos) incluso si la aplicación carga más rápido

Problemas Comunes y Consejos de Depuración

• La pantalla de inicio no se muestra: Verifica UILaunchStoryboardName en Info.plist, confirma que el archivo LaunchScreen está en el target de la aplicación, y confirma que los recursos de imagen están incluidos
• La imagen está estirada o cortada: Revisa la configuración de Content Mode, verifica las restricciones, y asegúrate de proporcionar los tamaños de imagen correctos
• La pantalla de inicio parpadea y luego aparece una pantalla en blanco: Oculta la pantalla de inicio solo cuando tu UI esté lista, y haz coincidir los colores de fondo
• La pantalla de inicio se queda atascada: Asegúrate de que SplashScreen.hide() se está llamando y verifica si hay errores tempranos
• Relación de aspecto incorrecta en iPad: Usa restricciones en lugar de tamaños fijos, establece los dispositivos del storyboard como Universal, y proporciona imágenes de alta resolución
• Los cambios no se reflejan: Limpia la compilación, reinstala la aplicación, y asegúrate de que estás editando los archivos correctos

Conclusión

Añadir una pantalla de inicio a tu aplicación de React Native es un pequeño paso que produce una experiencia más profesional y amigable para el usuario. Ya sea configurando una pantalla de inicio manualmente en Xcode o usando bibliotecas como react-native-splash-screen, puedes integrar una pantalla de inicio que muestre tu marca y mantenga a los usuarios interesados durante el inicio.

Recuerda tener en cuenta el tiempo y asegurar transiciones suaves entre la pantalla de inicio y la primera pantalla de tu aplicación. Con una implementación adecuada, tu pantalla de inicio mejorará la calidad percibida de tu aplicación desde el momento en que se lanza.

Preguntas Frecuentes