Issue
I'm building an iOS app with React Native and I'm trying to display a map. However, I'm running into a problem. Whenever I'm trying to display the MapView
element I get the following error:
Invariant Violation: 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 `Main`.
This error is located at:
in Main (at App.js:69)
in App (at renderApplication.js:35)
in RCTView (at View.js:113)
in View (at AppContainer.js:102)
in RCTView (at View.js:113)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
createFiberFromElementType
ReactNativeFiber-dev.js:974:90
createFiberFromElement
ReactNativeFiber-dev.js:954:20
reconcileSingleElement
ReactNativeFiber-dev.js:1403:26
reconcileChildFibers
ReactNativeFiber-dev.js:1457:40
reconcileChildrenAtPriority
ReactNativeFiber-dev.js:1634:54
reconcileChildren
ReactNativeFiber-dev.js:1631:12
finishClassComponent
ReactNativeFiber-dev.js:1669:12
updateClassComponent
ReactNativeFiber-dev.js:1659:12
beginWork
ReactNativeFiber-dev.js:1786:23
This is my Main
component, which is exactly the same as demonstrated in the MapView documentation on the React Native website (except that I set showsUserLocation
to false
, which not causing the error):
import React, { Component } from 'react';
import { MapView } from 'react-native';
class Main extends Component {
render() {
return (
<MapView
style={{height: 200, margin: 40}}
showsUserLocation={false}
/>
);
}
}
export default Main;
The error refers to line 69 in App.js
which is the return
statement in the render
method. For completeness, this is the App
class:
import React, { Component } from 'react';
import MainIOS from "./ios/Main";
class App extends Component<{}> {
render() {
return (<MainIOS />);
)
}
}
export default App;
How can I resolve this issue? I prefer not to use any 3rd party packages or libraries, rather just standard React Native components.
Solution
As it states in react-native docs for MapView (v0.38),
MapView
IMPORTANT: This component is now DEPRECATED and will be removed in January 2017 (React Native version 0.42). This component only supports iOS.
Please use
react-native-maps
by Airbnb instead of this component. Our friends at Airbnb have done an amazing job building a cross-platformMapView
component that is more feature complete. It is used extensively (over 9k installs / month).
Answered By - bennygenel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.