MapView - AndreiRadchenko/scenery GitHub Wiki

react-native-maps provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS.

No additional setup is required when testing your project using Expo Go. However, to deploy the app binary on app stores additional steps are required for Google Maps. For more information, see the instructions below.

Google cloud project | Expo project credentials

MapScreen.js

import { Marker, PROVIDER_GOOGLE } from 'react-native-maps';

import * as Styled from './MapScreen.styled';

export const MapScreen = ({ route }) => {
  const { location } = route.params.post;

  return (
    <Styled.MapContainer>
      <Styled.Map
        provider={PROVIDER_GOOGLE}
        zoomEnabled
        zoomControlEnabled
        region={{
          latitude: location.latitude
            ? Number.parseFloat(location.latitude)
            : +37.78825,
          longitude: location.longitude
            ? Number.parseFloat(location.longitude)
            : -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <Marker
          coordinate={{
            latitude: location.latitude
              ? Number.parseFloat(location.latitude)
              : +37.78825,
            longitude: location.longitude
              ? Number.parseFloat(location.longitude)
              : -122.4324,
          }}
          title={location.name}
        />
      </Styled.Map>
    </Styled.MapContainer>
  );
};

app.json with Google cloud / project Scenery / credentials / ApiKey with Maps SDK enabled

"android": {
      "config": {
        "googleMaps": {
          "apiKey": "API_KEY"
        }
      },
      "jsEngine": "hermes",
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "softwareKeyboardLayoutMode": "pan",
      "package": "com.andriiradchenko.scenery",
      "runtimeVersion": "1.0.0"
    },