Property 'map' does not exist on type 'MapView'

Question

I am using typescript and react-native-maps to create a react-native application. I am following one of their examples given here.

Before I try to call the methods I have to create a ref as shown in the example but I am getting the following error.

"Property 'map' does not exist on type 'Map'"

Here's my code.

import React, { Component } from "react";
import MapView, { Marker } from "react-native-maps";

export default class Map extends Component {
  constructor(props: any) {
    super(props);

    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      },
      coordinate: {
        latitude: LATITUDE,
        longitude: LONGITUDE
      }
    };
  }

  render() {
    return (
      <MapView
        // Getting that error in this line
        ref={map => { this.map = map; }}
        style={{ flex: 1 }}
        region={this.state["region"]}
      >
        <Marker coordinate={this.state["coordinate"]} />
      </MapView>
    );
  }
}

I tried some solutions that were given here but i suspect its not a solution for react-native?

Answer 1

It just means it can't find an existing property on your component called "map". So you can just add an initial empty property above your constructor to remove the error, like so:

import React, { Component } from "react";
import MapView, { Marker } from "react-native-maps";

export default class Map extends Component {

  map: MapView // just add this to remove the error

  constructor(props: any) {
    super(props);

    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      },
      coordinate: {
        latitude: LATITUDE,
        longitude: LONGITUDE
      }
    };
  }

  render() {
    return (
      <MapView
        // Getting that error in this line
        ref={map => { this.map = map; }}
        style={{ flex: 1 }}
        region={this.state["region"]}
      >
        <Marker coordinate={this.state["coordinate"]} />
      </MapView>
    );
  }
}