Demo of React Native Map breaking
The React Native react-native-maps project has stricter handling in Android than in iOS. The documentation specifies:
Components that aren't declared by this library (Ex: Markers, Polyline) must not be children of the MapView component due to MapView's unique rendering methodology. Have your custom components / views outside the MapView component and position absolute to ensure they only re-render as needed. Example: Bad:
<View style={StyleSheet.absoluteFillObject}>
<MapView style={StyleSheet.absoluteFillObject}>
<View style={{ position: 'absolute', top: 100, left: 50 }}/>
</MapView>
</View>
Good:
<View style={StyleSheet.absoluteFillObject}>
<MapView style={StyleSheet.absoluteFillObject} />
<View style={{ position: 'absolute', top: 100, left: 50 }}/>
</View>
This code sample shows where things can go wrong, and how to fix them. There's a screen where the map breaks because of errant child components in the MapView, and a screen where the map handles the child components correctly.
Instructions
To run the demo:
nvm use 10.20.1
npm install
You will need a Google Maps key that's installed in the android area of your React Native project.
Make sure your Android device is set up for USB debugging. In a terminal, navigate to the project root (where App.js resides). From the command line, run:
npx react-native run-android
While that loads, in another terminal window, run the Metro Server:
npx react-native start
You can see the behavior in this YouTube video. I've got a blog post that explains the error messages you might see when your React Native MapView has this issue.
