Mostrando un React Native Modal justo después de la puesta en marcha de la aplicación congela la pantalla en iOS

Question

Tengo una aplicación de React Native que básicamente hace las siguientes acciones en startup: Oculta la pantalla de salpicaduras (utilizando reaccion- native-bootsplash) Renders a Home screen, que fetches datos de una API y muestra componentes de tarjetas en un FlatList Basado en la ubicación del usuario, abre inmediatamente un Modal (utilizando react-native-modal) con una sugerencia Este flujo ocurre en ~3 segundos. Está funcionando como se espera en Android. Aunque, en iOS estoy enfrentando el siguiente problema: Después de abrir la aplicación, no se muestra la pantalla Home congelada y el Modal. Esta pantalla es un niño de DrawerNavigator, que sigue funcionando. Así que puedo abrir y cerrar el menú del cajón desde el encabezado, pero la pantalla Home está completamente congelada. Pruebas que he realizado hasta ahora: Eliminación del componente Modal: la pantalla no se congela. Ir a otra pantalla (a través del menú del cajón) y volver a la pantalla Inicio: funciona normalmente (renders la lista, abre el modal, etc), es decir, sin congelación. Recarga la aplicación del menú depuración RN (shake o Cmd + Control + Z): funciona normalmente (renders the list, opens the modal, etc), es decir, sin congelación. Es importante notar que la aplicación obtiene la ubicación del usuario antes de abrir el Modal. Así que el problema no parece estar relacionado con la lógica de ubicación. En el caso de prueba que removí el Modal, la lógica de ubicación permaneció igual y la pantalla no se congeló. Dada la conducta descrita, me parece que hay algún tipo de conflicto entre el Storyboard/View que hace la pantalla de salpicaduras y el componente Modal, ya que sucede cuando abro la aplicación, y no lo hace cuando la reviso del menú RN. Por lo tanto, he probado esperando 2 segundos antes de cambiar el estado que abre el Modal, como sigue: setTimeout(() => setModalOpen(true), 2000); ¡y funciona! Aunque, si dejo el tiempo libre a 1 segundo, todavía se congela. De lo que he probado, el umbral parece ser alrededor de 1,3 a 1,5 segundos, lo que significa que cualquier cosa por debajo que causa congelación, y todo por encima funciona normalmente. He probado en el emulador (iPhone 11 - iOS 13.5) y dispositivo (iPhone XR - iOS 14.2). ¿Alguien sabe exactamente qué podría estar causando este comportamiento, y cómo podría evitarse sin tener que usar los timeouts como una solución?

codeglitch · Accepted Answer

En mi caso, tengo una aplicación congelada cuando importa y uso una ventana modal de la react-native. Lo arreglé cambiando la biblioteca a UI-kitten.

Gpt · Answer

El problema que estás experimentando probablemente esté relacionado con la carga y renderizado inicial de la aplicación en iOS. A veces, ciertas animaciones o acciones complejas al inicio de la carga pueden interferir con el renderizado adecuado en dispositivos iOS.

Una posible solución que puedes probar es retrasar la apertura del Modal hasta que la pantalla de inicio se haya renderizado completamente. En lugar de utilizar un timeout fijo, puedes hacer uso del ciclo de vida de los componentes en React Native para asegurarte de que el Modal se abra solo después de que la pantalla de inicio esté lista.

Podrías intentar utilizar el método componentDidMount en la pantalla de Inicio para abrir el Modal después de que la pantalla haya renderizado por completo. Algo así:

javascript
componentDidMount() {
  // Aquí fetchear datos de la API y cualquier otro trabajo de inicialización
  // Una vez que todo esté listo, abrir el Modal
  this.openModal();
}

openModal() {
  setModalOpen(true);
}

De esta manera, te asegurarás de que el Modal se abra solo después de que todos los elementos en la pantalla de Inicio se hayan renderizado completamente.

Si esto no resuelve el problema, otra posible solución sería utilizar el evento onLayout en la pantalla de inicio para detectar cuando la pantalla se ha renderizado y abrir el Modal en ese momento.

Espero que estas sugerencias te ayuden a resolver el problema y evitar el uso de timeouts como solución. ¡Buena suerte!

Respondida el Dec 19, 2020 a las 15:27 - por Gpt

Gemini · Answer

El problema que estás describiendo es probable que sea causado por un conflicto entre la pantalla de inicio y el modal en el momento del lanzamiento de la aplicación.

React Native inicializa la pantalla de inicio antes de que se cargue el código JavaScript. Si el modal se muestra demasiado pronto, puede interferir con la inicialización de la pantalla de inicio y causar que se congele.

Para resolver este problema, puedes intentar lo siguiente:

Retrasar la visualización del modal: Utiliza `setTimeout` para retrasar la apertura del modal por un corto período de tiempo después de que se haya inicializado la pantalla de inicio. Esto le dará a la pantalla de inicio tiempo para cargar completamente antes de que se muestre el modal.

Usar un estado de carga: Crea un estado de carga que indique si la pantalla de inicio se ha cargado completamente. Solo muestra el modal cuando el estado de carga sea `true`. Esto garantizará que la pantalla de inicio esté completamente cargada antes de que se abra el modal.

Mover la lógica del modal a un componente separado: Mueve la lógica del modal a un componente separado y cárgalo de forma asincrónica después de que se haya inicializado la pantalla de inicio. Esto evitará que el modal interfiera con la inicialización de la pantalla de inicio.

Utilizar un modal de pantalla completa: Utiliza un modal de pantalla completa en lugar de un modal regular. Los modales de pantalla completa no se ven afectados por otros componentes de la pantalla, por lo que es menos probable que causen conflictos.

Verificar la configuración de Storyboard: Asegúrate de que la configuración de Storyboard sea correcta y que no haya conflictos entre la pantalla de inicio y el modal.

Si has probado todas estas soluciones y el problema persiste, puedes intentar depurar el problema utilizando las herramientas de desarrollo de iOS. Esto te permitirá inspeccionar la jerarquía de componentes y ver si hay algún conflicto o error que esté causando el problema.

También puedes intentar registrar eventos de rendimiento para ver si hay algún retraso o problema de rendimiento que esté causando el problema.

Respondida el Dec 19, 2020 a las 15:31 - por Gemini

Mostrando un React Native Modal justo después de la puesta en marcha de la aplicación congela la pantalla en iOS

3 Respuestas: