I've encountered a very strange error. I feel that I've exported the Home
component in a normal and conventional manner. Below, I've posted the .js
files that I think are relevant in order to rectify this error. Despite this, In my iOS
simulator, I'm still getting an error that says:
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.
Check the render method of 'Home'.
Here's Home.js
:
import React from 'react';
import Container from 'native-base';
import MapContainer from "../../../components/MapContainer/index";
class Home extends React.Component {
componentDidMount() {
this.props.setName();
}
render() {
const region = {
latitude: 3.146642,
longitude: 101.695845,
latitudeDelta: 0.8922,
longitudeDelta: 0.0421
}
return(
<Container>
<MapContainer region={region}/>
</Container>
);
}
}
export default Home;
Here's index.js
:
import React from 'react';
import View from 'native-base';
import styles from './MapContainerStyles';
import * as MapView from "react-native-maps/lib/components/ProviderConstants";
const MapContainer = ({region}) => {
return(
<View style={styles.container}>
<MapView
provider={MapView.PROVIDER_GOOGLE}
style={styles.map}
region={region}
>
</MapView>
</View>
);
}
export default MapContainer;
The problem isn't your export of Home
. We know that because Home
's render
is being called.
From the error, it looks like either Container
or MapContainer
isn't being imported correctly. I suspect it's that Container
is a named export, so you need to use a named import:
import { Container } from 'native-base';
Update: Yup, here's an example from the NativeBase documentation :
import {Container, Content, Text} from 'native-base';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.