Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

[ravin-amplework]

Summary

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Reproducible sample code

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

Steps to reproduce

open screen in whic using app got app crash with error
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.

Expected result

map load successfully

Actual result

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.

React Native Maps Version

1.0.0

What platforms are you seeing the problem on?

Android, iOS (Google Maps)

React Native Version

0.68.2

What version of Expo are you using?

Not using Expo

Device(s)

iphone 12,android 11

Additional information

No response

[monholm]

Hi @ravin-amplework 👋. You will have to provide more than your import statements as Reproducible sample code for anyone to be able to track this down :)

[ravin-amplework]

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

<MapView
ref={mapRef}
provider={PROVIDER_GOOGLE}
// onPress={(e) => setMk(e.nativeEvent.coordinate)}
style={styles.map}>
<MapView.Marker
coordinate={{latitude: item?.lat || 0, longitude: item?.lng || 0}}
title={item?.name}
/>

this code perfectly working on version 0.30.2.

[ravin-amplework]

New renderer is also enable on main App.js file

import { enableLatestRenderer } from 'react-native-maps';

enableLatestRenderer();

[monholm]

Can you provide a repo or snack that experiences this?

[ravin-amplework]

To make sure is this issue with my project only, i created all new react native project but get same issue
react-native 0.68.2
Package.json

{
"name": "newproject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "17.0.2",
"react-native": "0.68.2",
"react-native-maps": "^1.0.2"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.67.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}

Code where using it
/**

• Sample React Native App
• https://github.com/facebook/react-native
• @Format
• @flow strict-local
  */

import React from 'react';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';

import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
const isDarkMode = useColorScheme() === 'dark';

const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};

return (

<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<View style={{flex: 1, overflow: 'hidden'}}>
<MapView
provider={PROVIDER_GOOGLE}
region={{
latitude:26.891026,
longitude: 75.793822,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
style={styles.map}>
<MapView.Marker
coordinate={{
latitude:26.891026,
longitude: 75.793822
}}
title={"test"}
/>



);
};
});

export default App;

[ravin-amplework]

if needed provide your email i'll invite you to this Test repo

[monholm]

Hi @ravin-amplework. I think I might have figured out the issue. Marker is no longer a member of MapView, so you can't use <MapView.Marker>. Instead, import the Marker component and use it like so:

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

const App = () => {
  return (
    <MapView
      provider={PROVIDER_GOOGLE}
      region={{
        latitude: 26.891026,
        longitude: 75.793822,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}>
      <Marker
        coordinate={{
          latitude: 26.891026,
          longitude: 75.793822,
        }}
        title={'test'}
      />
    </MapView>
  );
};
export default App;

This was part of the breaking changes made in v1.0.0, but was missed in the release notes.

[netsmertia]

Got the same issue. Thanks for the solution.