Package Exports

react-native-apple-mapkit-directions
react-native-apple-mapkit-directions/lib/commonjs/index.js
react-native-apple-mapkit-directions/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-apple-mapkit-directions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-apple-mapkit-directions

React Native wrapper for Apple MapKit Directions. You can get distance, expectedTravelTime, name, advisoryNotices or coordinates.

Installation

npm install react-native-apple-mapkit-directions

yarn add react-native-apple-mapkit-directions

Usage

import { getAppleMapKitDirections } from 'react-native-maps-apple-directions';

// ...
const origin = {
  latitude: 55.751244,
  longitude: 37.618423,
};
const destination = {
  latitude: 59.9375,
  longitude: 30.308611,
};
const transitType = MapKitTransit.AUTOMOBILE;
const points = await getAppleMapKitDirections(origin, destination, transitType);

You can use it with react-native-maps

import * as React from 'react';

import { StyleSheet } from 'react-native';
import MapView, { LatLng, Polyline } from 'react-native-maps';
import {
  getAppleMapKitDirections,
  MapKitTransit,
} from 'react-native-maps-apple-directions';

export default function App() {
  const styles = StyleSheet.create({
    map: {
      ...StyleSheet.absoluteFillObject,
    },
  });
  const origin = {
    latitude: 55.751244,
    longitude: 37.618423,
  };
  const destination = {
    latitude: 59.9375,
    longitude: 30.308611,
  };
  const transitType = MapKitTransit.AUTOMOBILE;
  const [state, setState] = React.useState<LatLng[]>();
  React.useEffect(() => {
    const getPoints = async () => {
      try {
        const points = await getAppleMapKitDirections(
          origin,
          destination,
          transitType
        );
        setState(points.coordinates);
      } catch (error) {
        console.log('error', error);
      }
    };
    getPoints();
  }, []);

  return (
    <MapView style={styles.map}>
      {state && <Polyline coordinates={state} />}
    </MapView>
  );
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library