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 and subscribe 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

import GeoDBCitiesSearch from 'react-native-geodb';

<GeoDBCitiesSearch
  debounce={200}
  placeholder="Search cities"
  placeholderTextColor="#f5f5f5"
  onSelectItem={(data) => console.log(data.city)}
  emptyListImagePlaceholder={require('../../../assets/emptyList.png')}
  query={{
    key: GEODB_API_KEY, // skip if you've set key already
    api: 'geo',
    types: 'cities'
  }}
  params={{
    language: 'en',
    limit: 10,
    offset: 0
  }}
  renderLeftButton={() => <CustomIconButton onPress={...}>}
  renderItem={({ item }) => <CustomSearchItem />}
  ListEmptyComponent={({ metadata, styles, source }) => <CustomEmptyList />}
  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

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

Authors

• Babakolo Usman Suleiman