Repolode
Enviar
seyedmostafahasani

seyedmostafahasani/react-native-splash-motion

Pantallas de inicio con Lottie y dotLottie para React Native, que se reproducen de forma nativa desde el lanzamiento de la app, antes de que se cargue el bundle de JavaScript.

Ver en GitHub
Estrellas
44
Forks
1
Issues abiertos
0
Último commit
ayer

¿Qué es?

SplashMotion es una biblioteca de React Native para crear pantallas de inicio animadas. La mayoría de las soluciones de animación de inicio se renderizan mediante React, por lo que la animación no puede comenzar hasta que se haya cargado el bundle de JavaScript. En cambio, SplashMotion reproduce una animación Lottie o dotLottie en una vista nativa desde el primer fotograma del lanzamiento, la mantiene en ejecución mientras se carga el bundle y luego la cierra con un outro y un fundido opcionales.

Una CLI y un plugin de configuración de Expo generan la pantalla de inicio nativa, los recursos y el tema durante la compilación, por lo que no es necesario modificar manualmente AppDelegate ni MainActivity. La app llama a hide() cuando está lista, con opciones para esperar a que termine el bucle actual, reproducir un marcador de outro con nombre, establecer un tiempo mínimo de visualización y definir la duración del fundido. Se puede proporcionar un PNG del primer fotograma para que la pantalla de inicio estática coincida con la animación.

La biblioteca requiere React Native New Architecture y react-native-nitro-modules, es compatible con iOS 15 o posterior y Android 7 o posterior (API 24), y cuenta con licencia MIT.

Funciones clave

  • 01Reproduce de forma nativa animaciones Lottie .json y dotLottie .lottie.
  • 02Inicia la animación desde el primer fotograma del lanzamiento de la app, antes de que se cargue el bundle de JS.
  • 03Configura automáticamente las pantallas de inicio nativas mediante una CLI o un plugin de configuración de Expo.
  • 04hide() puede esperar a que termine el bucle actual, reproducir un marcador de outro y aplicar un fundido de salida.
  • 05Admite un PNG opcional del primer fotograma para que la pantalla de inicio estática coincida con la animación.

Casos de uso

  • Mostrar una pantalla de inicio animada con la identidad de marca en una app de React Native, sin una espera en blanco durante el inicio de JS.
  • Añadir una animación de salida pulida que espere a que la app esté lista, por ejemplo, a que se carguen las fuentes o la navegación.
  • Usar una animación existente de After Effects o LottieFiles como pantalla de inicio en un proyecto de Expo o React Native bare.

Inicio rápido

  1. 1

    Instala el paquete y Nitro Modules

    yarn add react-native-splash-motion react-native-nitro-modules
  2. 2

    Genera la pantalla de inicio a partir de tu archivo Lottie

    npx splash-motion generate assets/splash.json --background "#0F6E56"
  3. 3

    Instala los pods de iOS y vuelve a compilar la app

    cd ios && pod install
  4. 4

    Llama a SplashMotion.hide() cuando la app esté lista

Antes de usarlo

  • Requiere React Native New Architecture, necesaria para Nitro Modules.
  • Los proyectos de Expo necesitan una development build, ya que Expo Go no puede cargar código nativo personalizado.
  • Las versiones mínimas son iOS 15 y Android 7 (API 24).
  • Es un proyecto reciente, con 37 estrellas y sin historial de versiones indicado en los metadatos.

En colecciones

Apps para Android y herramientas para el móvil

Temas

#react-native#lottie#splash-screen#animation#ios#android#expo#mobile-ui

Preguntas frecuentes

¿Qué es react-native-splash-motion?
Pantallas de inicio con Lottie y dotLottie para React Native, que se reproducen de forma nativa desde el lanzamiento de la app, antes de que se cargue el bundle de JavaScript. SplashMotion es una biblioteca de React Native para crear pantallas de inicio animadas. La mayoría de las soluciones de animación de inicio se renderizan mediante React, por lo que la animación no puede comenzar hasta que se haya cargado el bundle de JavaScript. En cambio, SplashMotion reproduce una animación Lottie o dotLottie en una vista nativa desde el primer fotograma del lanzamiento, la mantiene en ejecución mientras se carga el bundle y luego la cierra con un outro y un fundido opcionales.
¿react-native-splash-motion es gratuito? ¿Qué licencia tiene?
react-native-splash-motion es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿react-native-splash-motion sigue mantenido?
Mantenimiento activo. El último commit de react-native-splash-motion fue el 6 nov 2026.
¿Para qué puedo usar react-native-splash-motion?
Mostrar una pantalla de inicio animada con la identidad de marca en una app de React Native, sin una espera en blanco durante el inicio de JS. Añadir una animación de salida pulida que espere a que la app esté lista, por ejemplo, a que se carguen las fuentes o la navegación. Usar una animación existente de After Effects o LottieFiles como pantalla de inicio en un proyecto de Expo o React Native bare.
¿Cómo se instala react-native-splash-motion?
Instala el paquete y Nitro Modules: yarn add react-native-splash-motion react-native-nitro-modules Genera la pantalla de inicio a partir de tu archivo Lottie: npx splash-motion generate assets/splash.json --background "#0F6E56" Instala los pods de iOS y vuelve a compilar la app: cd ios && pod install Llama a SplashMotion.hide() cuando la app esté lista
¿Dónde consigo react-native-splash-motion?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/seyedmostafahasani/react-native-splash-motion

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados