react-nativegeojsonreact-native-mapsmapview

ERROR Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components)


I'm trying to test the Geojson library but I'm stuck on this error.

I am sent below my app.js and package.json codes that was copied from this repository.

App.js

import React from 'react';
import MapView, {Geojson} from 'react-native-maps';

const myPlace = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Point',
        coordinates: [64.165329, 48.844287],
      }
    }
  ]
};

const Map = props => (
  <MapView>
    <Geojson 
      geojson={myPlace} 
      strokeColor="red"
      fillColor="green"
      strokeWidth={2}
    />
  </MapView>
);

package.json

{
  "name": "geojsonvalidation",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~48.0.6",
    "expo-app-loading": "^2.1.1",
    "expo-asset": "^8.9.1",
    "expo-font": "^11.1.1",
    "expo-status-bar": "~1.4.4",
    "geojson": "^0.5.0",
    "react": "18.2.0",
    "react-native": "0.71.3",
    "react-native-maps": "1.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

I'm just trying to validate a possible future solution.


Solution

  • Consider to export your main comp:

    import React from 'react';
    import MapView, {Geojson} from 'react-native-maps';
    
    const myPlace = {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'Point',
            coordinates: [64.165329, 48.844287],
          }
        }
      ]
    };
    
    const Map = props => (
      <MapView>
        <Geojson 
          geojson={myPlace} 
          strokeColor="red"
          fillColor="green"
          strokeWidth={2}
        />
      </MapView>
    );
    
    export default Map; // <——- add this line