React-native-openstreetmap-search-places NPM

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