Cómo añadir una splash screen en React Native con Splashboot

El hermano menor de React, así se refieren los developers a React Native, un framework de fuente abierta creado por Facebook para desarrollar aplicaciones en Android, iOS y Windows. Es uno de los frameworks para app móviles más populares entre la comunidad de developers.

Las posibilidades que te ofrece React Native para crear son bastante numerosas, incluyendo todas las funciones que tiene presentes en el proceso de desarrollo de la aplicación, entre esos la posibilidad de añadir una splash screen, o pantalla de inicio al comienzo de la aplicación.

¿Qué es la Splash Screen en React Native?

La splash screen, o pantalla de bienvenida, es una vista o pantalla que se muestra cuando se inicia la aplicación por primera vez, siendo util cuando dicha aplicación móvil requiera mostrar información esencial antes de su inicio. La aplicación tiene la posibilidad de cargar la información desde alguna API externa o almacenamiento local.

Esta información que se muestra en la Splash Screen es de vital importancia ya que sin ella, es posible que la aplicación no pueda mostrar la interfaz de usuario, ya que puede necesitar verificar si el usuario está autorizado y luego decidir qué pantalla mostrar.

Esta pantalla no dura mucho tiempo siendo visible, entre tres y cinco segundos y luego se ocultará automáticamente. Se mostrará cuando se inicie la aplicación de nuevo desde cero.

Tenemos expertos en React Native. Pregunta por nuestro equipo de IT Staff Augmentation.

Cómo añadir una splash screen en React Native con Bootsplash

Bootsplash es un término para una representación gráfica del proceso de arranque del sistema operativo. Bootsplash puede ser una visualización simple de los mensajes de inicio que se desplazan en la pantalla, pero también puede presentar gráficos o algunas combinaciones de ambos. 

A diferencia de las pantallas de presentación, bootsplash no está diseñado necesariamente con fines de marketing, pero puede mejorar la experiencia del usuario como un atractivo visual o proporcionar al usuario mensajes para diagnosticar el estado del sistema.

Vamos a crear una splash screen en una aplicación desarrollada con React Native:

Primero, creemos un nuevo proyecto React Native desde la terminal.

npx react-native init reactnativesplash
cd reactnativesplash

Luego de esto, debemos instalar el paquete react-native-bootsplash desde la terminal.

Cuando tenemos los dos primeros pasos listos, procedemos a colocar el logotipo en la carpeta raíz y ejecutar el siguiente comando para generar los activos necesarios, tanto en Android como en iOS.

npx react-native generate-bootsplash logo.png

Configuración en Android

En la carpeta de Android, crea una nueva carpeta llamada "dibujable". Dentro de la carpeta "dibujable", cree un archivo bootsplash.xml.

Cuando ya este archivo esté creado, agrega el siguiente código: 

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <item android:drawable="@color/bootsplash_background" />

    <item>
        <bitmap android:src="@mipmap/bootsplash_logo" android:gravity="center" />
    </item>
</layer-list>

En la carpeta "valores" y dentro de styles.xml, agrega el código a continuación:

<style name="BootTheme" parent="AppTheme">
    <item name="android:background">@drawable/bootsplash</item>
</style>

Ahora, en MainActivity.java, agrega las líneas de código a continuación en la parte superior del archivo:

import android.os.Bundle;
import android.view.WindowManager;

import com.facebook.react.ReactActivityDelegate; 
import com.zoontek.rnbootsplash.RNBootSplash; 

Debajo de la función getMainComponentName (), pega el siguiente código:

 @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);      
      RNBootSplash.init(MainActivity.this);
      
  }

Finalmente, al terminar todos estos pasos, en AndroidManifest.xml agrega el siguiente código debajo de las actividades:

<activity
  android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
  android:theme="@style/BootTheme"
  android:launchMode="singleTask">
  <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category 
      android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
</activity>

En la actividad, agregue la etiqueta android:exported:true

Configuración en iOS

Para configurar la pantalla en iOS, abre el proyecto React Native en Xcode y al mismo tiempo, ten tu proyecto React Native en su buscador. En la carpeta de iOS, arrastre y suelte Bootsplash.storyboard en Xcode. Recibirá un mensaje; haga clic en "finalizar".

Ahora, dirígete al archivo AppDelegate.m y agrega las siguientes líneas de código:

#import "RNBootSplash.h"

[self.window makeKeyAndVisible];

// code u need to add 
  
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];

// code u need to add 

  return YES; 

Ahora, ve a la terminal e instala los pods.

Cómo probar las pantallas de presentación de Android e iOS

Antes de probar para dispositivos Android e iOS, debemos importar el paquete react-native-bootsplash en App.js. En el hook useEffect, vamos a ocultar la pantalla de bienvenida después de 3 segundos cuando se abre la aplicación. Nuestro App.js debería verse de la siguiente manera:

import React, {useEffect} from 'react';
import {SafeAreaView, Text, View} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';

const App = () => {
  useEffect(() => {
    setTimeout(() => {
      RNBootSplash.hide({fade: true});
    }, 3000);
  }, []);

  return (
    <SafeAreaView>
      <View>
        <Text>Splash Screen</Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

Para probar la versión en Android. ve a la terminal y ejecuta el código que te damos a continuación. Deberías ver la pantalla de presentación en el emulador de Android.

npm run android

Ahora, probemos la versión de iOS.

npm run ios

Con este proceso, podemos tener una splash screen al inicio de nuestra aplicación creada con React Native que contenga toda la información necesaria para luego lanzar la debida interfaz de usuario.

En Rootstack, nuestros developers expertos han creado varias aplicaciones con React Native, algunas con splash screens, dando solución a los problemas que presentan nuestros clientes y tu también puedes formar parte de este equipo, aplica aquí y crece profesionalmente con nosotros.

Te recomendamos en video