📱 React Native Intermediate

What is react-native-maps?

Why Interviewers Ask This

This question targets practical, hands-on experience with React Native. Interviewers want to see if you've worked with these concepts in real projects, not just read about them. Strong answers include concrete examples.

Answer

react-native-maps integrates native Google Maps (Android) and Apple Maps/Google Maps (iOS) into React Native apps. It renders real native map views for the best performance and UX. Installation: npm install react-native-maps. Google Maps requires a Google Maps API key configured in AndroidManifest.xml. Basic map: import MapView, { Marker, Callout, Circle, Polyline } from "react-native-maps"; <MapView style={{ flex: 1 }} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }} mapType="standard" // "satellite", "hybrid", "terrain" showsUserLocation={true} showsMyLocationButton={true} onPress={event => console.log(event.nativeEvent.coordinate)} onRegionChangeComplete={region => console.log(region)} > <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} title="My Location" description="I am here" onPress={() => {}} > {/* Custom marker: */} <View style={styles.customMarker} /> </Marker> <Circle center={{ latitude: 37.78825, longitude: -122.4324 }} radius={500} fillColor="rgba(0,100,255,0.2)" strokeColor="rgba(0,100,255,0.5)" /> </MapView>. Camera control: const mapRef = useRef(null); mapRef.current.animateToRegion(newRegion, 1000); // Smooth animation mapRef.current.fitToCoordinates(coords, { edgePadding: { top: 50, right: 50, bottom: 50, left: 50 } });. Expo alternative: expo-location for location, and react-native-maps works in bare workflow. Expo Maps is a newer alternative.

Common Mistake

A common mistake is memorizing definitions without understanding implications. When asked this question, go one level deeper — explain what happens when this concept is misused or ignored.