|
1 |
| -# @react-native-community/geocoder |
| 1 | +# React Native Geocoder |
2 | 2 |
|
3 |
| -A multi-platform geocoder library for React Native apps. |
| 3 | +Multi-platform Geocoding library for React Native apps. |
| 4 | + |
| 5 | + |
| 6 | +[](https://circleci.com/gh/timwangdev/react-native-geocoder-reborn/tree/master) |
| 7 | +[](https://www.npmjs.com/package/@timwangdev/react-native-geocoder) |
| 8 | +[](https://www.npmjs.com/package/@timwangdev/react-native-geocoder) |
| 9 | + |
| 10 | +The project is originally forked from [devfd/react-native-geocoder](https://github.com/devfd/react-native-geocoder). Since 1.0 the project have been refactored and supports more features includes maximum results limit, search boundary and React hooks. |
| 11 | + |
| 12 | +**Please check the [Release page](https://github.com/timwangdev/react-native-geocoder-reborn/releases/tag/v1.0.0) for Version 1.0.0 Full Changelog and Migration Guide.** |
4 | 13 |
|
5 | 14 | ## Installation
|
6 | 15 |
|
7 | 16 | ```sh
|
8 |
| -npm install @react-native-community/geocoder |
| 17 | +npm install @timwangdev/react-native-geocoder |
| 18 | +``` |
| 19 | + |
| 20 | +or |
| 21 | + |
| 22 | +```sh |
| 23 | +yarn add @timwangdev/react-native-geocoder |
| 24 | +``` |
| 25 | + |
| 26 | +## Link |
| 27 | + |
| 28 | +### Autolinking with `react-native-cli` (requires `react-native` 0.60 or above) |
| 29 | + |
| 30 | +Please review [autolinking docs](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) for detials. |
| 31 | + |
| 32 | +If "Autolinking" is not available for you, please try the following: |
| 33 | + |
| 34 | +<details><summary>Use `react-native link`</summary> |
| 35 | + |
| 36 | +``` |
| 37 | +react-native link @timwangdev/react-native-geocoder |
| 38 | +``` |
| 39 | +</details> |
| 40 | + |
| 41 | +<details><summary>Manually</summary> |
| 42 | +If automatic linking fails you can follow the manual installation steps |
| 43 | + |
| 44 | +#### iOS (With CocoaPods) |
| 45 | + |
| 46 | +1. Add `pod 'react-native-geocoder', :path => '../node_modules/@timwangdev/react-native-geocoder/react-native-geocoder.podspec'` to your Podfile. |
| 47 | +2. Run `pod install`. |
| 48 | + |
| 49 | +#### iOS (Without CocoaPods) |
| 50 | + |
| 51 | +1. In the XCode's "Project navigator", right click on Libraries folder under your project ➜ `Add Files to <...>` |
| 52 | +2. Go to `node_modules` ➜ `@timwangdev/react-native-geocoder` and add `ios/RNGeocoder.xcodeproj` file |
| 53 | +3. Add `libGeocoder.a` to "Build Phases" -> "Link Binary With Libraries" |
| 54 | + |
| 55 | +#### Android |
| 56 | + |
| 57 | +1. In `android/setting.gradle` add: |
| 58 | + |
| 59 | +```gradle |
| 60 | +... |
| 61 | +include ':react-native-geocoder', ':app' |
| 62 | +project(':react-native-geocoder').projectDir = new File(rootProject.projectDir, '../node_modules/@timwangdev/react-native-geocoder/android') |
| 63 | +``` |
| 64 | + |
| 65 | +2. In `android/app/build.gradle` |
| 66 | + |
| 67 | +```gradle |
| 68 | +... |
| 69 | +dependencies { |
| 70 | + ... |
| 71 | + implementation project(':react-native-geocoder') |
| 72 | +} |
9 | 73 | ```
|
10 | 74 |
|
| 75 | +3. Register module (in MainApplication.java) |
| 76 | + |
| 77 | +```java |
| 78 | +import com.timwangdev.reactnativegeocoder.GeocoderPackage; // <--- Add this line |
| 79 | + |
| 80 | +public class MainActivity extends ReactActivity { |
| 81 | + ... |
| 82 | + @Override |
| 83 | + protected List<ReactPackage> getPackages() { |
| 84 | + ... |
| 85 | + packages.add(new GeocoderPackage()); // <--- Add this line |
| 86 | + |
| 87 | + return packages; |
| 88 | + } |
| 89 | + ... |
| 90 | +} |
| 91 | +``` |
| 92 | +</details> |
| 93 | + |
11 | 94 | ## Usage
|
12 | 95 |
|
13 | 96 | ```js
|
14 |
| -import Geocoder from "@react-native-community/geocoder"; |
| 97 | +import Geocoder from '@timwangdev/react-native-geocoder'; |
| 98 | + |
| 99 | +try { |
| 100 | + ... |
| 101 | + const position = { lat: 1.2, lng: -3.4 }; |
| 102 | + await Geocoder.geocodePosition(position); |
| 103 | + ... |
| 104 | + await Geocoder.geocodeAddress('Paris', { |
| 105 | + locale: 'fr', |
| 106 | + maxResult: 2 |
| 107 | + }); |
| 108 | + ... |
| 109 | +} catch(err) { |
| 110 | + console.log(err); |
| 111 | +} |
| 112 | +``` |
| 113 | + |
| 114 | +### Geocode Address |
15 | 115 |
|
16 |
| -// ... |
| 116 | +* `Geocoder.geocodeAddress(address: string, options?: GeocoderOptions)` |
17 | 117 |
|
18 |
| -const deviceName = await Geocoder.getDeviceName(); |
| 118 | +* Returns `Promise<GeocodingObject[]>` |
| 119 | + |
| 120 | +* Supports `regionIos` on iOS. |
| 121 | + |
| 122 | +* Supports `bounds` on Android and Google Maps API. |
| 123 | + |
| 124 | +### Geocode Position (Reverse Geocoding) |
| 125 | + |
| 126 | +* `Geocoder.geocodePosition(position: { lat: number, lng: number }, options?: GeocoderOptions)` |
| 127 | + |
| 128 | +* Returns `Promise<GeocodingObject[]>` |
| 129 | + |
| 130 | +### `GeocoderOptions` |
| 131 | + |
| 132 | +```typescript |
| 133 | +{ |
| 134 | + // Your Google Maps API key, required if when `fallbackToGoogle` or `forceGoogleOnIos` is set. |
| 135 | + apiKey?: string; |
| 136 | + |
| 137 | + // Preferred Locale for outputs, defaults to 'en' |
| 138 | + locale?: string; |
| 139 | + |
| 140 | + // (Not available for Google Maps) Maximum returned results, defaults to 5 |
| 141 | + maxResults?: number; |
| 142 | + |
| 143 | + // (Android and Google only) Set the bounds for address geocoding. |
| 144 | + bounds?: { |
| 145 | + sw: { lat: number, lng: number }, // Lower left corner |
| 146 | + ne: { lat: number, lng: number }, // Upper right corner |
| 147 | + }; |
| 148 | + |
| 149 | + // (iOS native only) Set circular region for address geocoding. |
| 150 | + regionIos?: { |
| 151 | + center: { lat: number, lng: number }, // Center of the circular region |
| 152 | + radius: number, // Radius of the circular region, unit: km |
| 153 | + };; |
| 154 | + |
| 155 | + // Should use Google Maps API if native query fails, defaults to false. |
| 156 | + fallbackToGoogle?: boolean; |
| 157 | + |
| 158 | + // Should always use Google Maps API on iOS, defaults to false. |
| 159 | + forceGoogleOnIos?: boolean; |
| 160 | +} |
19 | 161 | ```
|
| 162 | +Note: Platforms may have different implantations for locale preference. Here is [Google Maps API supported language list](https://developers.google.com/maps/faq#languagesupport). |
| 163 | + |
| 164 | +### `GeocodingObject` |
| 165 | + |
| 166 | +```typescript |
| 167 | +{ |
| 168 | + position: { lat: number, lng: number }; |
| 169 | + |
| 170 | + // The full formatted address |
| 171 | + formattedAddress: string; |
| 172 | + |
| 173 | + // Example: Yosemite Park, Eiffel Tower |
| 174 | + feature: string | null; |
| 175 | + |
| 176 | + streetNumber: string | null; |
| 177 | + |
| 178 | + streetName: string | null; |
| 179 | + |
| 180 | + postalCode: string | null; |
| 181 | + |
| 182 | + // City name |
| 183 | + locality: string | null; |
| 184 | + |
| 185 | + country: string; |
| 186 | + |
| 187 | + countryCode: string; |
| 188 | + |
| 189 | + adminArea: string | null; |
| 190 | + |
| 191 | + subAdminArea: string | null; |
| 192 | + |
| 193 | + subLocality: string | null; |
| 194 | +} |
| 195 | +``` |
| 196 | + |
| 197 | +### React Hooks Support |
| 198 | + |
| 199 | +```js |
| 200 | +import { useGeocodeAddress, useGeocodePosition } from '@timwangdev/react-native-geocoder'; |
| 201 | +``` |
| 202 | + |
| 203 | +* `useGeocodeAddress(address: string, options?: GeocoderOptions)` |
| 204 | + |
| 205 | + Returns `{ result: GeocodingObject[], error: Error, loading: boolean }` |
| 206 | + |
| 207 | +* `useGeocodePosition(position: { lat: number, lng: number }, options?: GeocoderOptions)` |
| 208 | + |
| 209 | + Returns `{ result: GeocodingObject[], error: Error, loading: boolean }` |
20 | 210 |
|
21 | 211 | ## License
|
22 | 212 |
|
|
0 commit comments