# react-native-placesearch

> A simple package where you can easily search google places and customize package ui

Latest version **4.0.1** (published 2021-11-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-placesearch
pnpm add react-native-placesearch
yarn add react-native-placesearch
bun add react-native-placesearch
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2021-11-06 |
| First published | 2020-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 67.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | mdrajibsk8 |
| Maintainers | mdrajibsk8 |
| Keywords | react-native, react-native-placesearch, react-native-google-place-autocomplete, react-native-google-place-search, react-native-place-search-google |

## Links

- npm: https://www.npmjs.com/package/react-native-placesearch
- Repository: https://github.com/mdrajibsk8/react-native-placesearch-details/tree/main
- Issues: https://github.com/mdrajibsk8/react-native-placesearch-details/tree/main
- npm.io page: https://npm.io/package/react-native-placesearch

## Dependencies (3)

- [native-base](https://npm.io/package/native-base.md) ^2.13.8
- [@react-native-community/cli](https://npm.io/package/@react-native-community/cli.md) ^6.1.0
- [@react-native-community/toolbar-android](https://npm.io/package/@react-native-community/toolbar-android.md) ^0.2.1

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 4.0.1 (latest) — 2021-11-06
- 3.0.3 — 2021-02-14
- 3.0.2 — 2021-02-14
- 3.0.1 — 2021-02-14
- 3.0.0 — 2021-02-14
- 2.0.0 — 2020-09-10
- 1.1.0 — 2020-02-11
- 1.0.4 — 2020-02-10
- 1.0.3 — 2020-02-10
- 1.0.2 — 2020-02-10
- 1.0.1 — 2020-02-01
- 1.0.0 — 2020-02-01

## README

# react-native-placesearch

![npm](https://img.shields.io/npm/dt/react-native-placesearch?style=flat-square)   ![NPM](https://img.shields.io/npm/l/react-native-placesearch?style=flat-square)   ![npm](https://img.shields.io/npm/v/react-native-placesearch?style=flat-square)   ![npm collaborators](https://img.shields.io/npm/collaborators/react-native-placesearch?style=flat-square)

# Installation

```javascript
## NPM
$ npm install react-native-placesearch --save

## or with yarn
$ yarn add react-native-placesearch

```

## Required Package

`$ npm install react-native-vector-icons --save`

`$ If you having any knd of problem with this version you can still use version-3.0.3`

## Supporting the project

If you like my work, you can Buy Me a Coffee :wink:

<a href="https://www.buymeacoffee.com/mdrajibsk8" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" width="200" height="50" ></a>

## Video Link

`You want see more video regarding react-native visit my channel. Please make sure to subscribe to my channel, so you don't miss on my future video`

<a href="https://www.youtube.com/watch?v=KvnjOUFK0Cw" target="_blank"><img src="https://github.com/mdrajibsk8/React-Native-Push-Notification-Firebase7/blob/master/de1c91788be0d791135736995109272a.png?raw=true" alt="View Video" width="100" height="100" ></a>




### Demo

Here's a simple example of default ui:


<table>
  <tr>
    <td> <p align="center"><strong>ANDROID</strong></p></td>
    <td><p align="center"><strong>IOS</strong></p></td>
  </tr>
  <tr>
    <td><p align="center"><img src="https://github.com/mdrajibsk8/react-native-placesearch-details/blob/main/androidUi.jpeg?raw=true" alt="Developers' Sin" width="300" height="650"></p></td>
    <td><p align="center"><img src="https://github.com/mdrajibsk8/react-native-placesearch-details/blob/main/IOSui.png?raw=true" alt="Developers' Sin" width="300" height="650"></p></td>
  </tr>
</table>

## Usage
```javascript
import Placesearch from 'react-native-placesearch';

    <Placesearch 
    apikey="your api key" // required *
    SelectedAddress={(data)=>console.log(data)} // required *
    onClose={(data)=>console.log(data)}
    country ="country code" //optional
    coordinate={true} //optional
    removeImg = {true} //optional
    StatusBarColor="Your color code" //option *only for android
    StatusBarStyle="" //option  default "dark-content" *only for android
    ContainerBackgroundColor="Your color code" // optional
    InputContainer = {{'your style goes here'}} //optional
    MainContainer = {{'your style goes here'}} //optional
    ListStyle = {{'your style goes here'}} //optional
    ListTextStyle = {{'your style goes here'}} //optional
    ListIconStyle = {{'your style goes here'}} //optional
    ImgStyle = {{'your style goes here'}} //optional
    Img = {{'your style goes here'}} //optional
    textInput = {{'your style goes here'}} //optional
    placeHolder = {{'type any textInput placeholder as you like'}} //optional
    />

```

### Common props:

| Name             | Opt/Required  | Description                                                                                                                                                            |
| ---------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| apikey           | required   | Valid Google Place api key.                                                                                                                     |
| SelectedAddress           | required   | Accept function - to received the selected address.                                                                                                                     |
| country          | Optional   | Specfied country code if you want search result of specfied country.                                                                         |
| onlyCity      | Optional | Default false. If true you will get search result of only city name. |
| area      | Optional | Default false. If true then you can search against an area or city you just have to pass the coordinate of that area and radius. Example is shown below. |
| coordinate      | Optional | Default false. If true you will get lat lng of selected address |
| removeImg     | Optional | Default false. You can set it to true, if you want to remove background Image. |
| Changeheader  | Optional | Default false. You can set it to true, if you want to change the header the way you want and you have to pass another props called "CustomHeader". Example is show below. |
| ChangList  | Optional | Default false. You can set it to true, if you want to change the list style the way you want and you have to pass another props called "CustomList". Example is show below. |
|ContainerBackgroundColor | Optional | Accept string. |
| MainContainer         | optional  | Accept Object. The styles you want to set for the MainContainer.                      |
| InputContainer         | optional  | Accept Object. The styles you want to set for the InputContainer.                      |
| textInput         | optional  | Accept Object. The styles you want to set for the textInput.                      |
| ListStyle         | optional  | Accept Object. The styles you want to set for the address List.                      |
| ListIconStyle         | optional  | Accept Object. The styles you want to set for the List Icon.                      |
| ListTextStyle         | optional  | Accept Object. The styles you want to set for the List Text.                      |
| ImgStyle         | optional  | Accept Object. The styles you want to set for the Bottom Image.                      |
| Img         | optional  | Image url. if you want to change the bottom image.                      
                            

## Change Header
```javascript
import React, { Component } from 'react';
import { Text, View, TextInput } from 'react-native';
import { Icon } from 'native-base';
import {MY_API_KEY} from '@Constant/ApiKey'
import Placesearch from 'react-native-placesearch';

export default class GooglePlaceSearch extends Component {

  constructor(props) {
    super(props);
    this.state = {}
    this.child = React.createRef();
  } 


  KeyUp = () => {
    this.child.current.searchAddress();
  };

  chngText = (data) => {
    this.child.current.setAddress(data);
  };


  render() {
    return (
           <Placesearch 
            apikey={MY_API_KEY} // required *
            SelectedAddress={(data)=>console.log(data)} // required *
            country ="IN" //optional
            ref={this.child}
            Changeheader={true}
            CustomHeader={
            <View style={{flexDirection:'row',height:45,alignItems:'center'}}>
              <Icon name="search1" type="AntDesign" style={{marginLeft:20,fontSize:20}}/> 
              <TextInput 
                placeholder="Search for Places"
                underlineColorAndroid='transparent'
                autoFocus={true}
                onKeyPress={this.KeyUp}
                onChangeText={(value) => this.chngText(value)}
              />
            </View>
             }
            />
    );
  }
}

```


## Change List Style
```javascript
import React, { Component } from 'react';
import { Text, View, TextInput } from 'react-native';
import { Icon } from 'native-base';
import {MY_API_KEY} from '@Constant/ApiKey'
import Placesearch from 'react-native-placesearch';

export default class GooglePlaceSearch extends Component {

  constructor(props) {
    super(props);
    this.state = {}
  } 

  render() {
    return (
           <Placesearch 
            apikey={MY_API_KEY} // required *
            SelectedAddress={(data)=>console.log(data)} // required *
            country ="IN" //optional
            ChangList = {true}
            CustomList={(item) => 
                <View>
                <View style={{flexDirection:'row',alignItems:'center',paddingHorizontal:5,width:'100%',height:45}}>
                    <Icon name="location-pin" type="Entypo"/>
                    <Text>
                    {item.description}
                    </Text>
                </View>
                </View>
            }
            />
    );
  }
}

```

## Search against Area
```javascript
import React, { Component } from 'react';
import { Text, View, TextInput } from 'react-native';
import { Icon } from 'native-base';
import {MY_API_KEY} from '@Constant/ApiKey'
import Placesearch from 'react-native-placesearch';

export default class GooglePlaceSearch extends Component {

  constructor(props) {
    super(props);
    this.state = {}
  } 

  render() {
    return (
           <Placesearch 
            apikey={MY_API_KEY} // required *
            SelectedAddress={(data)=>console.log(data)} // required *
            country ="IN" //optional
            area={true}
            lat="22.5726"
            lng = "88.3639"
            radius="500" // in meters
            />
    );
  }
}

```

---
_Source: https://npm.io/package/react-native-placesearch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._