React-native maps crashing in production (expo CLI) – React native

I am using react-native-maps 0.31.0 with expo CLI SDK version:46.0.0. It works fine in the expo development environment but when I build the app either by generating an APK or uploading it to the google play store it crashes.

I followed expo documentation, created an API key with android restrictions, added my package name and SHA-1 fingerprint, and enabled the maps SDK for Android, yet it still crashes.

Here’s my package.json

  {
  "name": "smart-taxi",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/html-elements": "^0.2.0",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/datetimepicker": "6.2.0",
    "@react-native-community/geolocation": "^3.0.1",
    "@react-native-picker/picker": "^2.4.8",
    "@react-navigation/drawer": "^6.5.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.0",
    "@reduxjs/toolkit": "^1.8.5",
    "@sentry/react-native": "4.2.2",
    "expo": "~46.0.13",
    "expo-application": "~4.2.2",
    "expo-build-properties": "~0.3.0",
    "expo-constants": "~13.2.4",
    "expo-device": "~4.3.0",
    "expo-firebase-recaptcha": "~2.3.0",
    "expo-font": "~10.2.0",
    "expo-keep-awake": "~10.2.0",
    "expo-linking": "~3.2.2",
    "expo-location": "~14.3.0",
    "expo-network": "~4.3.0",
    "expo-splash-screen": "~0.16.2",
    "expo-status-bar": "~1.4.0",
    "expo-updates": "~0.14.6",
    "firebase": "^9.10.0",
    "formik": "^2.2.9",
    "intl": "^1.2.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.6",
    "react-native-dotenv": "^3.3.1",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-google-places-autocomplete": "^2.4.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-maps": "0.31.1",
    "react-native-maps-directions": "1.8.0",
    "react-native-modal-picker": "^0.0.16",
    "react-native-modal-selector": "^2.1.2",
    "react-native-paper": "^4.12.5",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~3.15.0",
    "react-native-sendgrid": "^1.0.2",
    "react-native-svg": "12.3.0",
    "react-native-three-dots": "^1.0.0",
    "react-native-three-dots-loader": "^1.0.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.18.7",
    "react-native-webview": "11.23.0",
    "react-redux": "^8.0.4",
    "sentry-expo": "~5.0.0",
    "twrnc": "^3.4.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

and here’s my app.json

{
  "expo": {
    "name": "smart-taxi",
    "slug": "smart-taxi",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "y"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "My package name",
      "config": {
        "googleMaps": { "apiKey": "My API key" }
      },
      "versionCode": 2
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ],
    "extra": {
      "eas": {
        "projectId": "my projectID"
      }
    }
  }
}

and here’s how i used the MapView :

import React from "react";
import MapView, { Marker } from "react-native-maps";
import tw from "twrnc";
import UserLocationSvg from "../assets/svg/UserLocationSvg";
import NavFavourites from "../components/NavFavourites";
const HomeMap = ({ currentLocation, handleStep, currentLocationActive }) => {
  return (
    <>
      <MapView
        initialRegion={{
          latitude: 36.778259,
          longitude: -119.417931,
          latitudeDelta: 0.005,
          longitudeDelta: 0.005,
        }}
        mapType="mutedStandard"
        style={tw`w-screen h-[60%] `}
        zoomEnabled={true}
      >
        <Marker
          coordinate={{
            latitude: currentLocation.location.lat,
            longitude: currentLocation.location.lng,
            latitudeDelta: 0.005,
            longitudeDelta: 0.005,
          }}
          title="current"
          description={currentLocation.description}
          identifier="current"
        >
          <UserLocationSvg />
        </Marker>
      </MapView>

      <NavFavourites onSearch={() => handleStep("search")} />
    </>
  );
};

export default HomeMap;

I replaced the API key and package name with placeholders just for this question