App Crashes after opening screen with map for the second time

[Arilith]

Hi there,

Currently, I'm rewriting my web-application to a React Native application using Expo. I've managed to get the map working and rendering correctly when I open the correct screen.

However, when I navigate away from this screen (using tab navigation) and then open it back up again, the app just freezes and later Android tells me that the app is not responding.

I first thought it was because I had detachInactiveScreens={false} on my Stack Navigator, but disabling that doesn't change the problem.

I'm using the MapBox implementation of the map., if that makes a difference at all.

Could this be due to emulation? I don't have an physical android device to test on right now. I've looked on Stack Overflow and found something about having components in my map, however, even without any components in my map, it still does the same thing.

My current code:

import React from 'react'
import { Text, View, StyleSheet } from 'react-native'
import { GlobalStyles } from '../../../Constants/theme';

import MapboxGL from '@rnmapbox/maps';

MapboxGL.setAccessToken('pk.TOKEN');
export const MapScreen = () => {
  return (
    <View style={ styles.container }>
      <MapboxGL.MapView styleURL='mapbox://styles/arilith/ckr9r509238t817mxz75lwbxt' style={ styles.map }>


      </MapboxGL.MapView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    ...GlobalStyles.pageContainer,
    padding: 0,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
    padding: 40,
  },
  map: {
    flex: 1,
  }
});

Thanks a lot in advance!

[Arilith]

After some further investigation, this problem does not occur when the map is as a screen in a stack view while switching back and forwards. It looks like it has something to do with the use of the Tab Navigator...

EDIT: I've been able to solve the problem by doing the following:


But this seems kind of a hacky/work-around way of doing things.

[felixgourdeau]

See #1958 for more information