I’ve recently upgraded my React Native app to SDK 51 Expo. Since the upgrade, I’ve encountered an issue where React Native Maps has stopped working. The app crashes when using the PROVIDER_DEFAULT setting. When using the PROVIDER_GOOGLE the error below appears

 ERROR  react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS.

I am also using BottomSheetModal to enable search functionality within the maps. Here is the relevant portion of my code:

var mapStyle = [
    {
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#f5f5f5"
        }
      ]
    },
    {
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#616161"
        }
      ]
    },
    {
      "elementType": "labels.text.stroke",
      "stylers": [
        {
          "color": "#f5f5f5"
        }
      ]
    },
    {
      "featureType": "administrative.land_parcel",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#bdbdbd"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#eeeeee"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#757575"
        }
      ]
    },
    {
      "featureType": "poi.business",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#e5e5e5"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "geometry.fill",
      "stylers": [
        {
          "color": "#a7deb6"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#9e9e9e"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#ffffff"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road.arterial",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#757575"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#dadada"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#616161"
        }
      ]
    },
    {
      "featureType": "road.local",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#9e9e9e"
        }
      ]
    },
    {
      "featureType": "transit",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "transit.line",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#e5e5e5"
        }
      ]
    },
    {
      "featureType": "transit.station",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#eeeeee"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#c9c9c9"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "geometry.fill",
      "stylers": [
        {
          "color": "#a5b4da"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#9e9e9e"
        }
      ]
    }
  ]

//SetLocation Modal state
const [searchLocationModal, setSearchLocationModal] = useState(false);

const [isLoading, setIsLoading] = useState(false);

//geoLocation state
const { userLocation } = useSnapshot(locationState);

const DELTA_VALUE = 0.005

const initialRegion = {
    latitude: locationState.latitude,
    longitude: locationState.longitude,
    latitudeDelta: 0.005,
    longitudeDelta: 0.005,
}

const [markerLocation, setMarkerLocation] = useState({
    latitude: locationState.latitude,
    longitude: locationState.longitude,
    latitudeDelta: DELTA_VALUE,
    longitudeDelta: DELTA_VALUE,
})

const sheetRef = useRef<BottomSheet>(null)
//Second SnapPoint 45%
const snapPoints = ['38%', '38%']

const [addressSearch, setAddressSearch] = useState('');

const updateLocation = async () => {

    let currentUserID = firebase.default.auth().currentUser?.uid

    try {  
      if(currentUserID){
          await updateUser(currentUserID).then((doc) => {

              //Check if markerLocation is the same as saved LatLng
              doc.get().then((userDoc) => {
                  if (markerLocation.latitude != userDoc.data().location.lat && markerLocation.longitude != userDoc.data().location.long ){
                      doc.update({
                          "location.lat": markerLocation.latitude,
                          "location.long": markerLocation.longitude,
                      }).then(async () => {
                          await getSavedLocation().then(() => {setSearchLocationModal(false)})
                      })
                  } else {
                      console.log('Location is the same')
                  }
                      
              }).then(() => {
                findNearestPopular()
              })
          })
      } else {
        locationState.latitude = markerLocation.latitude
        locationState.longitude = markerLocation.longitude

        await getAddress({lat: markerLocation.latitude, long: markerLocation.longitude}).then(() => {
          setSearchLocationModal(false)
          console.log(locationState)
        }).then(() => {
          findNearestPopular()
        })            
      }
    } catch (error) {
      console.log(error.message)
    }
}

useEffect(() => {
    
    const timer = setTimeout(() => {
        if(addressSearch == ''){
            setMarkerLocation(initialRegion)
        } else 
        getLatLang(addressSearch).then((x) => {
            console.log('Bottom Sheet result: ' + x?.lat, x?.long)
            if (x?.lat && x?.long != undefined) {
                setMarkerLocation({
                    latitude: x?.lat,
                    longitude: x?.long,
                    latitudeDelta: DELTA_VALUE,
                    longitudeDelta: DELTA_VALUE
                })
            }

        })
    },500)

    return () => {clearTimeout(timer)}
  }, [locationState, addressSearch])

return (
    <>
    <Modal
    animationType="slide"
    visible={searchLocationModal}
    onRequestClose={() => {
        setSearchLocationModal(!searchLocationModal);
    }}
    >

<TouchableOpacity style={styles.modalCloseBtn} onPress={() => {setSearchLocationModal(!searchLocationModal)}}>
      <Entypo name="chevron-small-left" size={30} color="#37BD6B"/>
</TouchableOpacity>

    <MapView.Animated
    style={{height: '70%', width: '100%', zIndex: -1}}
    mapType={"standard"}
    provider={PROVIDER_DEFAULT}
        initialRegion={initialRegion}
        region={markerLocation}
        customMapStyle={mapStyle}
        
    >
        <Marker.Animated coordinate={markerLocation}></Marker.Animated>
    </MapView.Animated>
        <BottomSheet keyboardBehavior="interactive" ref={sheetRef} snapPoints={snapPoints} style={{}}>
        
            <React.Fragment>
                <View style={styles.currentLocationContainer}>
                    <View>
                        <MaterialIcons style={styles.locationIcon} name={'my-location'} size={25}/>
                    </View>
                    <View style={styles.currentLocationTxtGrp}>
                        <View>
                            <Text style={{fontWeight: '700', fontSize: 18, fontFamily: 'Gilroy-SemiBold', marginBottom: 4}}>Current Location</Text>
                        </View>
                            
                        <View>
                            <Text style={{fontWeight: '400', fontSize: 16, fontFamily: 'Gilroy-Medium'}}>{userLocation}</Text>
                        </View>
                    </View>
                </View>

                <View style={styles.searchContainer}>
                    <View style={styles.searchIconContainer}>
                        <AntDesign style={{paddingLeft: 15, color: "#B3B4B9"}} name="search1" size={19} />
                    </View>

                    <BottomSheetTextInput onChangeText={(value) => setAddressSearch(value)} style={styles.searchBar}/>
                </View>

                
                <TouchableOpacity onPress={updateLocation} >
                    <View style={styles.updateLocationContainer}>
                        <Text style={styles.updateLocation}>Update Location</Text>
                    </View>
                </TouchableOpacity>
                
            </React.Fragment>   
        </BottomSheet>

    </Modal>