Polygon component not working

[obiwankenoobi]

The Polygon component from react-native-maps not working. when trying to add it to the app it throw an error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

simple example:

import React from "react";
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  TouchableOpacity
} from "react-native";

import MapView, {
  PROVIDER_GOOGLE,
  Polygon,
  ProviderPropType
} from "react-native-maps";

const { width, height } = Dimensions.get("window");

const ASPECT_RATIO = width / height;
const LATITUDE = 37.8025259;
const LONGITUDE = -122.4351431;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
let id = 0;

class PolygonCreator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      },
      polygons: [],
      editing: null,
      creatingHole: false
    };
  }

  finish() {
    const { polygons, editing } = this.state;
    this.setState({
      polygons: [...polygons, editing],
      editing: null,
      creatingHole: false
    });
  }

  onPress(e) {
    this.setState({
      polygons: [
        ...this.state.polygons,
        { latitude: e.latLng.lat(), longitude: e.latLng.lng() }
      ]
    });
  }

  render() {
    const mapOptions = {
      scrollEnabled: true
    };

    if (this.state.editing) {
      mapOptions.scrollEnabled = false;
      mapOptions.onPanDrag = e => this.onPress(e);
    }

    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={this.state.region}
          onPress={e => this.onPress(e)}
          {...mapOptions}
        >
          {this.state.polygons.map(polygon => {
            console.log("render", polygon);
            return (
              <Polygon
                key={polygon.id}
                coordinates={[
                  { latitude: 37.8025259, longitude: -122.4351431 },
                  { latitude: 37.7896386, longitude: -122.421646 },
                  { latitude: 37.7665248, longitude: -122.4161628 },
                  { latitude: 37.7734153, longitude: -122.4577787 },
                  { latitude: 37.7948605, longitude: -122.4596065 },
                  { latitude: 37.8025259, longitude: -122.4351431 }
                ]}
                strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
                strokeColors={[
                  "#7F0000",
                  "#00000000", // no color, creates a "long" gradient between the previous and next coordinate
                  "#B24112",
                  "#E5845C",
                  "#238C23",
                  "#7F0000"
                ]}
                strokeWidth={6}
              />
            );
          })}
        </MapView>
      </View>
    );
  }
}

PolygonCreator.propTypes = {
  provider: ProviderPropType
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "flex-end",
    alignItems: "center"
  },
  map: {
    ...StyleSheet.absoluteFillObject
  },
  bubble: {
    backgroundColor: "rgba(255,255,255,0.7)",
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20
  },
  latlng: {
    width: 200,
    alignItems: "stretch"
  },
  button: {
    width: 80,
    paddingHorizontal: 12,
    alignItems: "center",
    marginHorizontal: 10
  },
  buttonContainer: {
    flexDirection: "row",
    marginVertical: 20,
    backgroundColor: "transparent"
  }
});

export default PolygonCreator;

[pinturic]

The Polygon component has not been mapped yet