react-native-placesearch v4.0.1

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 :wink:

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:

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:

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