Estoy trabajando en hacer un pequeño juego con javascript usando React Native, solo como algo divertido de hacer. Para cargar el fondo, ejecuto esta función:

 function loadMap(){ let rows = Math.ceil(props.height/spriteSize) let columns = Math.ceil(props.height/spriteSize) var tempmap = [] for(let i = 0; i <rows; i++){ for(let j = 0; j < columns; j++){ let mapIdx = (i * columns) + j; tempmap.push({key: mapIdx, index: 1358, position: [j * spriteSize, i * spriteSize]}) } } setMap(map=> tempmap) //Saving the array into a useState variable. }

Esa matriz luego se asigna a un componente así:

 let myMap = this.props.map.map((square, index)=>{ console.log(square.position[0]) return( <TestSprite key = {square.key} index ={square.index} position={square.position}/> ) })

Y se muestra en la pantalla como se esperaba. Captura de pantalla de la aplicación en el simulador

El problema es que en mi dispositivo, cada vez que pongo la aplicación en segundo plano, se congela y provoca un bloqueo del teléfono. Lo probé en mi iPad Pro y hace lo mismo. Sin embargo, esto no sucede en el simulador, aunque es el mismo iPhone 13 Pro y tiene la misma versión de iOS. La consola no me da información sobre el bloqueo.

¿Alguien tiene alguna idea de por qué esto puede estar sucediendo? Y si hay una forma más eficiente de cargar el mapa, házmelo saber, todavía estoy aprendiendo. La textura del mapa está en la misma hoja de sprites que todo lo demás, así que uso el mismo componente, que usa el componente de hoja de sprites proporcionado por rn-sprite-sheet para manejar qué sprite mostrar, qué animaciones reproducir, etc.

Aquí está en GitHub, en caso de que pueda ayudar 😅 https://github.com/StarPleb/DungeonsOfSpiritmount