OpenStreetMapSearchPlace

A React Native component to search places using OpenStreetMap

Demo

Requirements

node v20.13.1

Installation

npm install react-native-openstreetmap-search-places

yarn add react-native-openstreetmap-search-places

Usage

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

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) | | iconSize | Number | False | Input text component left icon size |

License

The MIT License (MIT). Please see License File for more information.

Changelog

Please see CHANGELOG for more information what has changed recently.