react-native-openstreetmap-search-places
Version:
A React Native component to search places using OpenStreetMap
105 lines (88 loc) • 6.42 kB
Markdown
[](https://www.npmjs.com/package/react-native-openstreetmap-search-places)
[](https://npmjs.org/package/react-native-openstreetmap-search-places)
A React Native component to search places using OpenStreetMap
<img src="./Screenrecorder-2024-05-18-14-29-50-492.gif" width="250">
```bash
node v20.13.1
```
```bash
npm install react-native-openstreetmap-search-places
```
```bash
yarn add react-native-openstreetmap-search-places
```
```tsx
import {useState} from 'react'
import {OpenStreetMapSearchPlace, LocationType} from 'react-native-openstreetmap-search-places'
const MyComponent = () => {
const [location, setLocation] = useState<LocationType | undefined>(undefined)
return (
<OpenStreetMapSearchPlace
location={location}
setLocation={setLocation}
lang='en'
noResultFoundText='No result found'
placeHolder='Search place'
searchPlaceHolder='Enter address'
mode='outlined'
style={{
height: 61,
backgroundColor: '#C7E9FD'
}}
contentStyle={{fontFamily: 'Roboto'}}
outlineStyle={{
borderRadius: 14,
borderWidth: 0,
marginHorizontal: 2
}}
searchBarStyle={{
backgroundColor: '#C7E9FD',
borderRadius: 12,
borderWidth: 0,
marginTop: 2,
}}
searchBarInputStyle={{fontFamily: 'Roboto'}}
searchResultLabelStyle={{fontSize: 14}}
modalStyle={{borderRadius: 14}}
loaderColor='blue'
loaderSize='small'
modalBgColor='white'
dismissable
/>
)
}
export default MyComponent
```
| 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<TextStyle> | False | Input text component style |
| contentStyle | StyleProp<TextStyle> | False | Input text component content style |
| outlineStyle | StyleProp<ViewStyle> | False | Input text component outline style |
| searchBarStyle | StyleProp<TextStyle> | False | Search bar component style |
| searchBarInputStyle | StyleProp<TextStyle> | False | Search input text component style |
| searchResultLabelStyle | StyleProp<TextStyle> | False | Search result label style |
| modalStyle | StyleProp<ViewStyle> | 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.