Element type is invalid . React Native

user_15648347 0
Viewed 47

I know there are so many questions about this Error. And I have faced so many times with this error and answers over here helped me so Much to get Over that Error. But now I just wanted to use react-native-maps and in the documentation of react-native-maps they gave us this sample of code to run and see how things work. I copied this code and paste it into my App.js and ı got this problem. I tried to something to solve that but ı couldnt figure it out. I get this 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.

Check the render method of `ExpoRoot`

And here is My code :

import * as React from 'react';
import  MapView  from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';

export const App = () => {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});
react-native-maps react-native reactjs
1 Answers

As you said, this is a common error you can see while developing with React Native.

It occurs when the component name is wrong or the import path is entered incorrectly. To solve the problem, you need to check all the import statements and check if those are exported and imported correctly.

This usually happens when you export functions like the below.

export const HelloWorld = 'hello world';

Then import like below.

import HelloWorld from 'helloWorld';

I saw many people having similar mistakes. Hope you can check that out.

user_88415620
Related