React-native-web: Does it work with react-native-maps ?

[brunohkbx]

The problem
I'm trying to run web an expo-project which uses MapView and I've got this error:

TypeError: Object(...) is not a function
nativeComponent
node_modules/react-native-maps/lib/components/MapView.js:945
  942 | 
  943 | MapView.MAP_TYPES = MAP_TYPES;
  944 | 
> 945 | const nativeComponent = Component => requireNativeComponent(Component, MapView, {
  946 |   nativeOnly: {
  947 |     onChange: true,
  948 |     onMapReady: true,

Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

How to reproduce
Execute this piece of code

<MapView
  style={{ flex: 1 }}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>

Expected behavior
It should open a google-maps.

[pinturic]

Did you try this: ?
https://github.com/react-native-web-community/react-native-web-maps

[necolas]

cc @EvanBacon

[EvanBacon]

Could you move this issue to https://github.com/expo/expo/issues/. I added the Map shim to prevent crashing but unfortunately that left a lot of things unimplemented. The Google Maps web SDK is also pretty expensive so I haven't been in a rush to add support yet. You can look at the current implementation here: https://github.com/expo/expo/blob/master/packages/expo/src/Maps/MapView.web.tsx

[thiemo--bleeken]

ran into the same issue. where can i find the latest status? thanks!

[MOwais]

Is there a fix for this? I am getting the same error

[YajJackson]

I am dealing with this same issue.

Also @EvanBacon that link is dead.

[EvanBacon]

I've been very slowly adding web support here: https://github.com/expo/react-native-maps/pull/2

[Daniel-Georgiev]

Hey @EvanBacon, you are doing a sublime job!
Bad thing is I am still running into the same issue as the OP. I am getting the error on MapView import.
I'm using expo with the implementation that you've made.

[davidbaussart]

Hi @EvanBacon, thanks for working on this! I've tried to use a MapView with expo web, and also get an import error, similar to Bruno's:

/node_modules/react-native-maps/lib/components/MapView.js Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

I've been following the web setup documentation, unfortunately I did not manage to make it work. Do you know where can I find a working example? Thanks!

[pologonzalo]

Yeah, same issue that @davidbaussart is having, any solution?

[WickedBrat]

funny thing is that I'm not using react-native-maps in the project and am still getting the same project. The root of the problem appears to be something else.

[edi]

I'm having the same issue. Running a "bare-minimum" expo template, to which I've added the expo maps. Not sure what else I should do here.

Works just fine on iOS / Android, but the web part crashes.

[diegoboston]

The snack linked from here:
https://docs.expo.io/versions/latest/sdk/map-view/
also fails on Web.

(0 , g.requireNativeComponent) is not a function
Evaluating module://react-native-maps.js
Evaluating module://App.js.js
Loading module://App.js

[jebjiayoub]

Is there any solution to make web map work in web browser ? i'm still getting the following error :
" TypeError: Object(...) is not a function "

[diegoboston]

I have made some progress by changing the import to:
import {MapView} from 'expo';

Also, important:
Location.setApiKey();

You'll have to set up a billing account at Google to make it work.

[brymurod]

Hello @diegoboston Have you been able to make it work ?

[diegoboston]

@brymurod not yet. I thought my issue was with the Google API keys, but when I fixed that, nothing would render anyway. I believe the library is not fully implemented yet. @EvanBacon do you have a working example of maps for a web app?

BTW, react-native-web-community/react-native-web-maps doesn't seem to work either.

[arjun-bhatt]

also interested

[nikk15]

Curious if anyone made any progress on this? I've struck the same error.

/myProject/node_modules/react-native-maps/lib/components/MapView.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

[lcsalt]

I'm having the same issue, is there a solution for this yet?

[augustosamame]

+1

[vrinch]

any progress on this issue please?

[shubhamdeol]

@vrinch use https://github.com/expo/react-native-maps.git
yarn add https://github.com/expo/react-native-maps.git

[vrinch]

Does it work on expo web @shubhamdeol?

[shubhamdeol]

Does it work on expo web @shubhamdeol?

@vrinch yes, It does work

[vrinch]

@shubhamdeol it’s not working for expo web

[shubhamdeol]

I am using bare work flow, and it works for me.

[vrinch]

I am using bare work flow, and it works for me.

I guess there’s an issue with managed app

[YahyaBagia]

I am using bare work flow, and it works for me.

@shubhamdeol Could you please share with us how do you import MapView, Markers, PROVIDER_GOOGLE, MAP_TYPES ?

Never-mind, I actually got it working by importing it this way :
import MapView, { Marker, PROVIDER_GOOGLE, MAP_TYPES } from "react-native-maps";

I had added react-native-maps by
yarn add https://github.com/expo/react-native-maps.git

[vrinch]

@vrinch use https://github.com/expo/react-native-maps.git
yarn add https://github.com/expo/react-native-maps.git

it works on web, however when I try to load it in my mobile phone browser, I am getting a blank screen. No errors a all

[vrinch]

the maker works on system browsers, however, when I try to use markers on mobile browsers, it keeps showing a blank screen without any error whatsoever

[brymurod]

@vrinch Make sure you have added the code for location permission.

Similar to this:
Import:
import * as Permissions from 'expo-permissions';

Code:
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
this.setState({
errorMessage: 'Permission to access location was denied',
});
}
}

[vrinch]

@brymurod it should work without location permission if I’m inputting the location myself
What I’m trying to say is it currently works when I load up in the laptop browser, but doesn’t on mobile browser and it’s being caused by the marker

[flyskywhy]

npm install --save-dev react-app-rewired

Create a config-overrides.js in your project root

// used by react-app-rewired

const webpack = require('webpack');
const path = require('path');

module.exports = {
  webpack: function (config, env) {
    config.module.rules[1].use[0].options.baseConfig.extends = [
      path.resolve('.eslintrc.js'),
    ];

    const webAliases = {
      'react-native': path.resolve('web/aliases/react-native'),
    };
    Object.assign(config.resolve.alias, webAliases);

    config.plugins.push(
      new webpack.DefinePlugin({
        __DEV__: process.env.NODE_ENV !== 'production',
      }),
    );

    return config;
  },
  paths: function (paths, env) {
    paths.appIndexJs = path.resolve('index.web.js');
    paths.appSrc = path.resolve('.');
    paths.moduleFileExtensions.push('ios.js');
    return paths;
  },
};

Also create a web/aliases/react-native/index.js

// ref to https://levelup.gitconnected.com/react-native-typescript-and-react-native-web-an-arduous-but-rewarding-journey-8f46090ca56b

import {Text as RNText, Image as RNImage} from 'react-native-web';
// Let's export everything from react-native-web
export * from 'react-native-web';

// And let's stub out everything that's missing!
export const ViewPropTypes = {
  style: () => {},
};
RNText.propTypes = {
  style: () => {},
};
RNImage.propTypes = {
  style: () => {},
  source: () => {},
};

export const Text = RNText;
export const Image = RNImage;
// export const ToolbarAndroid = {};
export const requireNativeComponent = () => {};

Now you can just run react-app-rewired start instead of react-scripts start