Skip to content

eliseekn/react-native-openstreetmap-search-places

Repository files navigation

OpenStreetMapSearchPlace

NPM version NPM downloads

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.

About

A React Native component to search places using OpenStreetMap

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published