react-native-placesearch

Installation

## 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 😉

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

Demo

Here's a simple example of default ui:

ANDROID	IOS

Usage

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

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

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

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
            />
    );
  }
}