|
1 | | -# Contributing |
| 1 | +# react-native-apple-mapkit-directions |
2 | 2 |
|
3 | | -Contributions are always welcome, no matter how large or small! |
| 3 | +React Native wrapper for Apple MapKit Directions. |
| 4 | +You can get distance, expectedTravelTime, name, advisoryNotices or coordinates. |
4 | 5 |
|
5 | | -We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the [code of conduct](./CODE_OF_CONDUCT.md). |
6 | | - |
7 | | -## Development workflow |
8 | | - |
9 | | -To get started with the project, run `yarn` in the root directory to install the required dependencies for each package: |
10 | | - |
11 | | -```sh |
12 | | -yarn |
13 | | -``` |
14 | | - |
15 | | -> While it's possible to use [`npm`](https://github.com/npm/cli), the tooling is built around [`yarn`](https://classic.yarnpkg.com/), so you'll have an easier time if you use `yarn` for development. |
16 | | -
|
17 | | -While developing, you can run the [example app](/example/) to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app. |
18 | | - |
19 | | -To start the packager: |
20 | | - |
21 | | -```sh |
22 | | -yarn example start |
23 | | -``` |
24 | | - |
25 | | -To run the example app on Android: |
26 | | - |
27 | | -```sh |
28 | | -yarn example android |
29 | | -``` |
30 | | - |
31 | | -To run the example app on iOS: |
32 | | - |
33 | | -```sh |
34 | | -yarn example ios |
35 | | -``` |
36 | | - |
37 | | -Make sure your code passes TypeScript and ESLint. Run the following to verify: |
| 6 | +## Installation |
38 | 7 |
|
39 | 8 | ```sh |
40 | | -yarn typescript |
41 | | -yarn lint |
| 9 | +npm install react-native-apple-mapkit-directions |
42 | 10 | ``` |
43 | 11 |
|
44 | | -To fix formatting errors, run the following: |
| 12 | +or |
45 | 13 |
|
46 | 14 | ```sh |
47 | | -yarn lint --fix |
| 15 | +yarn add react-native-apple-mapkit-directions |
48 | 16 | ``` |
49 | 17 |
|
50 | | -Remember to add tests for your change if possible. Run the unit tests by: |
51 | | - |
52 | | -```sh |
53 | | -yarn test |
| 18 | +## Usage |
| 19 | + |
| 20 | +```js |
| 21 | +import { getAppleMapKitDirections } from 'react-native-maps-apple-directions'; |
| 22 | + |
| 23 | +// ... |
| 24 | +const origin = { |
| 25 | + latitude: 55.751244, |
| 26 | + longitude: 37.618423, |
| 27 | +}; |
| 28 | +const destination = { |
| 29 | + latitude: 59.9375, |
| 30 | + longitude: 30.308611, |
| 31 | +}; |
| 32 | +const transitType = MapKitTransit.AUTOMOBILE; |
| 33 | +const points = await getAppleMapKitDirections(origin, destination, transitType); |
54 | 34 | ``` |
55 | 35 |
|
56 | | -To edit the Objective-C or Swift files, open `example/ios/AppleMapkitDirectionsExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > react-native-apple-mapkit-directions`. |
57 | | - |
58 | | -To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `react-native-apple-mapkit-directions` under `Android`. |
59 | | - |
60 | | -### Commit message convention |
61 | | - |
62 | | -We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages: |
63 | | - |
64 | | -- `fix`: bug fixes, e.g. fix crash due to deprecated method. |
65 | | -- `feat`: new features, e.g. add new method to the module. |
66 | | -- `refactor`: code refactor, e.g. migrate from class components to hooks. |
67 | | -- `docs`: changes into documentation, e.g. add usage example for the module.. |
68 | | -- `test`: adding or updating tests, e.g. add integration tests using detox. |
69 | | -- `chore`: tooling changes, e.g. change CI config. |
70 | | - |
71 | | -Our pre-commit hooks verify that your commit message matches this format when committing. |
| 36 | +You can use it with react-native-maps |
| 37 | + |
| 38 | +```js |
| 39 | +import * as React from 'react'; |
| 40 | + |
| 41 | +import { StyleSheet } from 'react-native'; |
| 42 | +import MapView, { LatLng, Polyline } from 'react-native-maps'; |
| 43 | +import { |
| 44 | + getAppleMapKitDirections, |
| 45 | + MapKitTransit, |
| 46 | +} from 'react-native-maps-apple-directions'; |
| 47 | + |
| 48 | +export default function App() { |
| 49 | + const styles = StyleSheet.create({ |
| 50 | + map: { |
| 51 | + ...StyleSheet.absoluteFillObject, |
| 52 | + }, |
| 53 | + }); |
| 54 | + const origin = { |
| 55 | + latitude: 55.751244, |
| 56 | + longitude: 37.618423, |
| 57 | + }; |
| 58 | + const destination = { |
| 59 | + latitude: 59.9375, |
| 60 | + longitude: 30.308611, |
| 61 | + }; |
| 62 | + const transitType = MapKitTransit.AUTOMOBILE; |
| 63 | + const [state, setState] = React.useState<LatLng[]>(); |
| 64 | + React.useEffect(() => { |
| 65 | + const getPoints = async () => { |
| 66 | + try { |
| 67 | + const points = await getAppleMapKitDirections( |
| 68 | + origin, |
| 69 | + destination, |
| 70 | + transitType |
| 71 | + ); |
| 72 | + setState(points.coordinates); |
| 73 | + } catch (error) { |
| 74 | + console.log('error', error); |
| 75 | + } |
| 76 | + }; |
| 77 | + getPoints(); |
| 78 | + }, []); |
| 79 | + |
| 80 | + return ( |
| 81 | + <MapView style={styles.map}> |
| 82 | + {state && <Polyline coordinates={state} />} |
| 83 | + </MapView> |
| 84 | + ); |
| 85 | +} |
72 | 86 |
|
73 | | -### Linting and tests |
74 | | - |
75 | | -[ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/) |
76 | | - |
77 | | -We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing. |
78 | | - |
79 | | -Our pre-commit hooks verify that the linter and tests pass when committing. |
80 | | - |
81 | | -### Publishing to npm |
82 | | - |
83 | | -We use [release-it](https://github.com/release-it/release-it) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc. |
84 | | - |
85 | | -To publish new versions, run the following: |
86 | | - |
87 | | -```sh |
88 | | -yarn release |
89 | 87 | ``` |
90 | 88 |
|
91 | | -### Scripts |
92 | | - |
93 | | -The `package.json` file contains various scripts for common tasks: |
| 89 | +## Contributing |
94 | 90 |
|
95 | | -- `yarn bootstrap`: setup project by installing all dependencies and pods. |
96 | | -- `yarn typescript`: type-check files with TypeScript. |
97 | | -- `yarn lint`: lint files with ESLint. |
98 | | -- `yarn test`: run unit tests with Jest. |
99 | | -- `yarn example start`: start the Metro server for the example app. |
100 | | -- `yarn example android`: run the example app on Android. |
101 | | -- `yarn example ios`: run the example app on iOS. |
| 91 | +See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. |
102 | 92 |
|
103 | | -### Sending a pull request |
| 93 | +## License |
104 | 94 |
|
105 | | -> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github). |
| 95 | +MIT |
106 | 96 |
|
107 | | -When you're sending a pull request: |
| 97 | +--- |
108 | 98 |
|
109 | | -- Prefer small pull requests focused on one change. |
110 | | -- Verify that linters and tests are passing. |
111 | | -- Review the documentation to make sure it looks good. |
112 | | -- Follow the pull request template when opening a pull request. |
113 | | -- For pull requests that change the API or implementation, discuss with maintainers first by opening an issue. |
| 99 | +Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) |
0 commit comments