Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eliseekn/react-native-openstreetmap-search-places

A React Native component to search places using OpenStreetMap
https://github.com/eliseekn/react-native-openstreetmap-search-places

Last synced: about 1 month ago
JSON representation

A React Native component to search places using OpenStreetMap

Awesome Lists containing this project

README

        

# OpenStreetMapSearchPlace
[![NPM version](https://img.shields.io/npm/v/react-native-openstreetmap-search-places.svg?style=flat)](https://www.npmjs.com/package/react-native-openstreetmap-search-places)
[![NPM downloads](https://img.shields.io/npm/dm/react-native-openstreetmap-search-places.svg?style=flat)](https://npmjs.org/package/react-native-openstreetmap-search-places)

A React Native component to search places using OpenStreetMap

## Demo

## Requirements
```bash
node v20.13.1
```

## Installation
```bash
npm install react-native-openstreetmap-search-places
```
```bash
yarn add react-native-openstreetmap-search-places
```

## Usage

```tsx
import {useState} from 'react'
import {OpenStreetMapSearchPlace, LocationType} from 'react-native-openstreetmap-search-places'

const MyComponent = () => {
const [location, setLocation] = useState(undefined)

return (

)
}

export default MyComponent
```

## Props

| Property | Type | Required | Description |
|------------------------|----------------------|----------|----------------------------------------------------------------------------------------------------------------------|
| location | LocationType | True | Location data of searched value |
| setLocation | function | True | Set location value of searched value |
| lang | String | False | Language used to search places (default en) |
| noResultFoundText | String | False | Text to display when no result found |
| placeHolder | String | False | Input text component placeholder |
| searchPlaceHolder | String | False | Search input text placeholder |
| mode | String | True | Text input style display (eg: outlined or flat) |
| style | StyleProp | False | Input text component style |
| contentStyle | StyleProp | False | Input text component content style |
| outlineStyle | StyleProp | False | Input text component outline style |
| searchBarStyle | StyleProp | False | Search bar component style |
| searchBarInputStyle | StyleProp | False | Search input text component style |
| searchResultLabelStyle | StyleProp | False | Search result label style |
| modalStyle | StyleProp | False | Search results modal custom style |
| loaderColor | String | False | Loader color (default blue) |
| loaderSize | String or Number | True | Loader size (eg: 12, small or large) |
| loaderColor | String | True | Loader color |
| modalBgColor | String | True | Modal background color |
| dismissable | Boolean | True | Set if modal dismissable |
| icon | String | False | Input text component left icon. [(See icons list)](https://callstack.github.io/react-native-paper/docs/guides/icons) |
| iconSize | Number | False | Input text component left icon size |

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

## Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.