CODEWITHSUNDEEP
react-nativereact-native-maps
vishal
vishal

Reputation: 11

Error in compiling react native map for web

I'm using react-native-maps for web and continuously getting an error which i'm unable to resolve. I have tried everything i found on internet.

This is the error i'm getting and this error is in react-native-map package.

./node_modules/react-native-maps/lib/components/MapCallout.js
SyntaxError: /home/vishal/Desktop/tracker-app/tracker/node_modules/react-native-maps/lib/components/MapCallout.js: Unexpected token (31:11)

  29 |   render() {
  30 |     const AIRMapCallout = this.getAirComponent();
> 31 |     return <AIRMapCallout {...this.props} style={[styles.callout, this.props.style]} />;
     |            ^
  32 |   }
  33 | }
  34 |

This is what i'm trying to show using react-native-map

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import MapView from "react-native-maps";

class Map extends Component {
  render() {
    return (
      <View style={styles.container}> 
        <Text>in map.js</Text>
        <MapView
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421
          }}
          style={styles.map}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  map: {
    width: "100%",
    height: "100%"
  }
})
export default Map;

Upvotes: 1

Views: 4046

Answers (1)

lagache
lagache

Reputation: 31

I ran into the same issue today and I solved it using react-native-web-maps: https://github.com/react-native-web-community/react-native-web-maps

Just need to be installed: npm install react-native-web-maps --save

And add an alias for it in your Webpack config: 'react-native-maps': 'react-native-web-maps'

Upvotes: 3

Related Questions