I am working on making a small game with javascript using React Native, just as a fun thing to do. To load the background, I run this function:

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.
        
}

That array is then mapped to a component like so:

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

And shows on screen as expected. Screenshot of app in simulator

The problem is that on my device, whenever I put the app in the background it freezes and causes a springboard crash of the phone. I tried it on my iPad Pro and it does the same thing. This doesn't happen in the simulator, however, even though it is the same iPhone 13 Pro and it is on the same version of iOS. The console gives me no information on the crash.

Does anyone have any clue why this may be happening? And if there is a more efficient way of loading the map let me know, I'm still learning. The texture for the map is in the same sprite sheet as everything else so I use the same component for it, which uses the spritesheet component provided by rn-sprite-sheet to handle which sprite to show, what animations to play, etc.

Here it is on GitHub, in case that might help 😅 https://github.com/StarPleb/DungeonsOfSpiritmount