A simple and fully customizable GeoDB cities api component for iOS and Android React-Native apps
MIT License
A simple and fully customizable GeoDB cities api component for iOS and Android React-Native apps
npm install react-native-geodb --save
or yarn add react-native-geodb
...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).
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,
api: 'geo',
types: 'cities'
}}
params={{
language: 'en',
limit: 10,
offset: 0
}}
renderLeftButton={() => <CustomIconButton onPress={...}>}
renderItem={({ item }) => <CustomSearchItem />}
ListEmptyComponent={({ metadata, styles, source }) => <CustomEmptyList />}
styles={{...}}
/>
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 | [] |
Key | Type | default |
---|---|---|
api | string | "geo" |
key | string | YOUR_API_KEY |
version | string | "v1" |
types | string | "cities" |
Checkout GeoDB guides for a complete list
Key | Type | default |
---|---|---|
limit | number | 10 |
languageCode | string | "en" |
location | string | "lat,lon" |
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) |
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);
});