https://github.com/usmansbk/react-native-geodb
A simple and fully customizable GeoDB cities api component for iOS and Android React-Native apps
https://github.com/usmansbk/react-native-geodb
android cities geodb ios location places places-autocomplete react react-native search
Last synced: 6 months ago
JSON representation
A simple and fully customizable GeoDB cities api component for iOS and Android React-Native apps
- Host: GitHub
- URL: https://github.com/usmansbk/react-native-geodb
- Owner: usmansbk
- License: mit
- Created: 2019-10-13T02:45:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-26T15:02:51.000Z (over 5 years ago)
- Last Synced: 2025-04-18T05:14:18.315Z (6 months ago)
- Topics: android, cities, geodb, ios, location, places, places-autocomplete, react, react-native, search
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-geodb
- Size: 541 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-geodb
A simple and fully customizable GeoDB cities api component for iOS and Android React-Native apps
### Preview
### Installation
1. ```npm install react-native-geodb --save``` or ```yarn add react-native-geodb```
2. Get your [GeoDB Cities API key](http://geodb-cities-api.wirefreethought.com/) and [subscribe](https://rapidapi.com/wirefreethought/api/GeoDB%20Cities/pricing) to the free basic plan.
> ...Or Use the Free Instance (without passing any API KEY)
> The free instance allows up to 432,000 requests/day. However, it has significantly less cities (only cities with populations of greater than 20,0000).
### Example
```jsx
import GeoDBCitiesSearch from 'react-native-geodb';
console.log(data.city)}
emptyListImagePlaceholder={require('../../../assets/emptyList.png')}
query={{
key: GEODB_API_KEY,
api: 'geo',
types: 'cities'
}}
params={{
language: 'en',
limit: 10,
offset: 0
}}
renderLeftButton={() => }
renderItem={({ item }) => }
ListEmptyComponent={({ metadata, styles, source }) => }
styles={{...}}
/>
```
### Props
| Prop | type | default |
| ---- | ---- | ------- |
| styles | object (StyleSheet) | {...} |
| debounce | number | 200 |
| minLength | number | 2 |
| query | object (Query) | {...} |
| params | object (Params) | key/value of GeoDB search url params |
| onSelectItem | function | not used if renderItem is defined |
| onError | function | console.log |
| onResponse | function | console.log |
| hideTextInput | boolean | false |
| hidePoweredBy | boolean | false |
| showActivityIndicator | boolean | false |
| colors | array | []
## Query
| Key | Type | default |
| --- | ---- | ------- |
| api | string | "geo" |
| key | string | YOUR_API_KEY |
| version | string | "v1" |
| types | string | "cities" |
## Params
Checkout GeoDB guides for a complete list
| Key | Type | default |
| ---- | ---- | ------- |
| limit | number | 10 |
| languageCode | string | "en" |
| location | string | "lat,lon" |
### Styling
```GeoDBCitiesSearch``` can be easily customized to meet styles of your app. Pass styles props to ```GeoDBCitiesSearch``` with style object for different elements (keys for style object are listed below)
| key | type |
| ---- | ---- |
| contentContainer | object (View) |
| textInputContainer | object (View style) |
| textInput | object (style) |
| itemContainer | object (Veiw style) |
| itemContent | object (View style) |
| itemText | object (Text style) |
| emptyList | object (View style) |
| poweredContainer | object (View style) |
| powered | object (Image style) |
| poweredText | object (Text style) |
| separator | object (View style) |
| imagePlaceholder | object (Image style) |
### Geocoder
```js
import { Geocoder } from 'react-native-geodb';
// Returns a promise of nearby cities of the given location object
Geocoder({ lat: xxxx, lng: xxxx }, key).then(response => {
console.log(response);
});
```
### License
[MIT](LICENSE)
### Authors
- [Babakolo Usman Suleiman](https://www.twitter.com/usbkay)