Search code examples
react-nativeazure-maps

Using Azure Maps with React Native

I have to build a mobile application that would work with both Android and iOS, so that's why I'm not using the Azure Maps Android SDK.

So I just wanna know if it is possible to use the Azure maps in React Native. I've tried with this repo: https://github.com/WiredSolutions/react-azure-maps which is a react wrapper for the Azure Maps. This repo is working perfectly on the web app, using react, but it doesn't seem to work on the mobile app, because when I'm trying to import these packages:

import {AzureMap, AzureMapsProvider, IAzureMapOptions} from 'react-azure-maps';

import {AuthenticationType} from 'azure-maps-control';

it's throwing an Cannot create URL for blob! exception in the react-azure-maps.umd.js and in the atlas.min.js files.

The version installed in package.json are:

    "azure-maps-control": "^2.0.31",
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-azure-maps": "^0.1.4",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-web": "~0.13.7",
    "typescript": "^3.7.5"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
Solution

  • There is no solution to this problem yet, because, as the other answers said, iOS is not supported. Also, there are no libraries for react native that are supporting Azure Maps.

    My workaround was to use React Native Maps as the map provider, and just do a backend call to the Azure Maps route provider.

    In this way, I just draw the route provided by Azure Maps on the React Native Map.

    Hopefully this will help some other people that are trying to use Azure Maps.