Bug report

Summary

<MapView> crashes on iOS if you switch away from the app to another app, with EXC_BAD_ACCESS (code=EXC_I386_GPFLT). This happens only if you use maptype="standard" with the default provider (Apple Maps), and is consistently reproducible if you use flex:1 (though it also reproduces intermittently if you specify exact dimensions [width/height]).

Environment info

Using standard out-of-the-box Apple Maps.

react-native info output:

System:
    OS: macOS 11.5.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 19.07 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.22.5 - ~/.nvm/versions/node/v12.22.5/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.23.0 - ~/.nvm/versions/node/v12.22.5/bin/npm
    Watchman: 2021.09.06.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.3 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.65.1 => 0.65.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-maps": "^0.29.3"
  },

Steps to reproduce

1. npx react-native init MyApp --template react-native-template-typescript
2. yarn add react-native-maps
3. yarn && cd ios && pod install
4. Set up your App in App.tsx to use MapView (shown below). To get a consistent repro, start with flex:1.
5. Open MyApp/ios/MyApp.xcworkspace in XCode.
6. Build and run in simulator (e.g. iPhone 8 Plus). Though it reproduces on real devices as well.
7. Once app is launched and in foreground, switch apps. Either double-tap the home button and choose a different app, or double-tap home and tap anywhere outside the app (to get to your iPhone's main screen).

const App = () => {
  return <MapView style={{flex: 1}} />;
};

Describe what you expected to happen:

1. Successful switching out of MyApp with no issues

Describe what you actually happens:

1. EXC_BAD_ACCESS (code=EXC_I386_GPFLT) crash, shown in XCode debugger.

Reproducible sample code

https://gist.github.com/fivecar/5aaca5b99d37a011a5793be21b502c7d. The cleanest way to set this up is to follow the repro instructions above.

NOTE: It took me some time to figure this out, but there are three important caveats:

1. It reproduces consistently with flex:1 but inconsistently with specifying a defined width/height (e.g. width: 400, height: 400). So if you insist on setting a width/height, you'll need to fiddle a few times, recompiling things, re-running it, to get the repro. I find that running once with flex:1 and then setting explicit width/height is pretty consistent. But 100% reliable is simply sticking with flex:1. (App crashing when being put into background with MapView component mounted #3650 claims that width/height fixes it, but I've done some pretty thorough testing that suggests it's simply less reliable to repro with width/height).
2. This does not reproduce, ever, if you set mapType to anything but standard. If you set it to satellite or hybrid, etc, it won't reproduce. So either set it to standard, or don't set mapType at all.
3. This goes away if you use provider={PROVIDER_GOOGLE}

It took a long time, some git bisect, and a bunch of style fiddling to figure out the minimum repro on this. But I'm surprised others haven't reported this, given how reliable it reproduces (and how consequential the aftermath). I'm happy to help fix this if someone points me the right direction, but I've never looked into the codebase and would largely be stabbing in the dark.