CODEWITHSUNDEEP
react-nativeexporeact-native-mapsgmsmapview
Vaibhav Verma
Vaibhav Verma

Reputation: 1037

MapView in react-native-map often zooms out completely to show entire world (rather than using initialRegion value) after upgdade from expo 45 to 46

I've been using react-native-maps in my app for the last two years.

Recently, we upgraded from Expo 45 to Expo 46, and now, the map sometimes completely zooms out to show the entire world (rather than using the value in initialRegion).

This happens even as we set the initialRegion to a fixed value like:

{"latitude": 33.745879288794235, "latitudeDelta": 0.0922, "longitude": -117.78628578420522, "longitudeDelta": 0.0411}

This is my MapView component:

<MapView 
  style={{width: windowWidth, height: windowHeight, justifyContent: 'center', alignItems: 'center'}} 
  provider={PROVIDER_GOOGLE}
  initialRegion={region}
  showsUserLocation={true}
  customMapStyle={mapStyle}
>

windowWidth and windowHeight are determined through useWindowDimensions from react-native.

This is my mapStyle:

export const mapStyle = [
    {
      "featureType": "administrative",
      "elementType": "geometry",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "transit",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    }
  ];

Here is my package.json:

{
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "android-build": "eas build --platform android"
  },
  "dependencies": {
    "@apollo/client": "^3.3.8",
    "@expo/config-plugins": "^5.0.0",
    "@foursquare/pilgrim-sdk-react-native": "^1.1.3",
    "@gorhom/bottom-sheet": "^2",
    "@react-native-async-storage/async-storage": "^1.17.9",
    "@react-native-community/datetimepicker": "6.2.0",
    "@react-native-community/hooks": "^2.6.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-picker/picker": "2.4.2",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/native": "^6.0.14",
    "@react-navigation/native-stack": "^6.9.2",
    "@react-navigation/stack": "^5.14.2",
    "@segment/analytics-react-native": "^2.7.0",
    "@segment/sovran-react-native": "^0.4.5",
    "@shopify/flash-list": "1.1.0",
    "apollo-link-ws": "^1.0.20",
    "axios": "^0.21.1",
    "expo": "~46.0.17",
    "expo-application": "~4.2.2",
    "expo-av": "~12.0.4",
    "expo-blur": "~11.2.0",
    "expo-clipboard": "~3.1.0",
    "expo-constants": "~13.2.4",
    "expo-contacts": "~10.3.0",
    "expo-dev-client": "~1.3.1",
    "expo-device": "~4.3.0",
    "expo-file-system": "~14.1.0",
    "expo-image-picker": "~13.3.1",
    "expo-linear-gradient": "~11.4.0",
    "expo-linking": "~3.2.2",
    "expo-location": "~14.3.0",
    "expo-media-library": "~14.2.0",
    "expo-notifications": "~0.16.1",
    "expo-sharing": "~10.3.0",
    "expo-sms": "~10.2.0",
    "expo-splash-screen": "~0.16.2",
    "expo-status-bar": "~1.4.0",
    "expo-store-review": "~5.3.0",
    "expo-system-ui": "~1.3.0",
    "expo-updates": "~0.14.7",
    "firebase": "8.2.3",
    "graphql": "^15.5.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.6",
    "react-native-confetti-cannon": "^1.5.2",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-google-mobile-ads": "^7.0.1",
    "react-native-google-places-autocomplete": "^2.2.0",
    "react-native-maps": "0.31.1",
    "react-native-paper": "^4.11.2",
    "react-native-progress": "^5.0.0",
    "react-native-purchases": "4.6.2",
    "react-native-reanimated": "~2.9.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-size-matters": "^0.4.0",
    "react-native-svg-transformer": "^1.0.0",
    "react-native-view-shot": "3.3.0",
    "react-native-web": "~0.18.7",
    "react-navigation": "^4.4.4",
    "sentry-expo": "~5.0.0",
    "subscriptions-transport-ws": "^0.9.18",
    "typescript": "^4.9.3"
  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@types/react": "~18.0.0",
    "@types/react-native": "~0.69.1"
  },
  "private": true,
  "name": "simmer2",
  "version": "1.0.0"
}

Upvotes: 2

Views: 306

Answers (1)

Rohit Parte
Rohit Parte

Reputation: 4036

To view a specific region, we can set region as below.

initialRegion is not working in my case as well

import MapView from 'react-native-maps';

<MapView
    style={{ width: '100%', height: '100%' }}
    region={{
    latitude: 18.978011851213232,
    longitude: 73.00188375636935,
    latitudeDelta: 0.4072879569531018,
    longitudeDelta: 0.03799382597208023
  }} />

Upvotes: 0

Related Questions