Judefabi
commented
2 years ago solved it by navigating to mapviewdirections.js and editing the code there using this
diff --git a/node_modules/react-native-maps-directions/src/MapViewDirections.js b/node_modules/react-native-maps-directions/src/MapViewDirections.js index ac08d73..f04ef10 100644 --- a/node_modules/react-native-maps-directions/src/MapViewDirections.js +++ b/node_modules/react-native-maps-directions/src/MapViewDirections.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import MapView from 'react-native-maps'; +import { Polyline } from 'react-native-maps'; import isEqual from 'lodash.isequal';
const WAYPOINT_LIMIT = 10; @@ -305,7 +305,7 @@ class MapViewDirections extends Component { } = this.props;
return (- <MapView.Polyline coordinates={coordinates} {...props} />
- <Polyline coordinates={coordinates} {...props} /> ); }
bramus
//someone please edit this so that the directions will be shown. when I comment out the mapviewdirections part it works perfectly, for some reason I'm getting apViewDirections 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.
Check the render method of
MapViewDirections.Can't seem to solve it and I'm new to mapviewdirections
import {StyleSheet, Text, View, Dimensions} from 'react-native'; import MapView, {PROVIDER_GOOGLE} from 'react-native-maps'; import React from 'react'; import MapViewDirections from 'react-native-maps-directions';
const origin = {latitude: 37.3318456, longitude: -122.0296002}; const destination = {latitude: 37.771707, longitude: -122.4053769}; const GOOGLE_MAPS_APIKEY = '....';
const App = () => { return (
); };
export default App;
const styles = StyleSheet.create({ container: { width: Dimensions.get('window').width, height: Dimensions.get('window').height, justifyContent: 'flex-end', alignItems: 'center', }, map: { width: Dimensions.get('window').width, height: Dimensions.get('window').height, }, });