How to set search image icon in react-native-google-places-autocomplete?

Question

How to set search image icon in react-native-google-places-autocomplete?

I want to know how i can set search image icon on left side in react-native-google-places-autocomplete.

I want output like this in below screen.So please help me.

But my design is like this.

Here is code of DiscoveryLocation.js file.

import React, { Component } from 'react'
    import { Text, View, TouchableOpacity, TextInput, StyleSheet, Image } from 'react-native'
    import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';
    import { RFPercentage, RFValue } from "react-native-responsive-fontsize";
    import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
    import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
    console.disableYellowBox = true;

    export default class DiscoveryLocation extends Component {
        render() {
            return (
                <View style={styles.container}>
                    <View style={styles.vwheader} >
                        <TouchableOpacity
                            onPress={() => { this.props.navigation.goBack() }}
                        >
                            <Image source={require('../../Images/left-arrow-red.png')} style={{ height: 25, width: 30, marginTop: 22, marginLeft: 15, }}
                            />
                        </TouchableOpacity>
                        <Text style={styles.txtdisloc}>Discovery Location </Text>
                    </View>

                    <View style={styles.mapcontainer}>

                        <MapView
                            provider={PROVIDER_GOOGLE}
                            style={styles.map}
                            region={{
                                latitude: 37.78825,
                                longitude: -122.4324,
                                latitudeDelta: 0.015,
                                longitudeDelta: 0.0121,
                            }}
                        >
                        </MapView>
                        <View style={{ marginTop: hp('12%'), }}>
                            <GooglePlacesAutocomplete
                                placeholder='Enter City, State, Country'
                                minLength={2} // minimum length of text to search
                                autoFocus={false}
                                fetchDetails={true}
                                onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                                    console.log(data);
                                    console.log(details);
                                }}
                                getDefaultValue={() => {
                                    return 'Mataram';
                                }}

                                query={{
                                    // available options: https://developers.google.com/places/web-service/autocomplete
                                    key: 'MY_API_KEY',
                                    language: 'en', // language of the results
                                    types: '(cities)' // default: 'geocode'
                                }}

                                styles={{
                                    textInputContainer: {
                                        width: wp('90%%'), height: hp('7%'), borderRadius: 11, borderTopWidth: 0,
                                        borderBottomWidth: 0
                                    },
                                    textInput: {
                                        marginLeft: 0,
                                        marginRight: 0,
                                        backgroundColor: 'D3D3D3'
                                    },
                                    description: {
                                        fontWeight: 'bold',
                                    },
                                    predefinedPlacesDescription: {
                                        color: '#1faadb'
                                    },
                                    powered: {

                                    },


                                }}
                                filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
                                predefinedPlacesAlwaysVisible={true}
                            />
                        </View>
                    </View>

                    <View style={{ marginTop: 10, marginBottom: 10 }}>
                        <TouchableOpacity style={styles.btn}>
                            <Text style={styles.txtbtn}>Confirm Location</Text>
                        </TouchableOpacity>
                    </View>

                </View>
            );
        }
    }

Answer 1

I know this is late, but for the future ref There are props to add icons in GooglePlacesAutocomplete

  renderLeftButton={()  => <Image source={require('path/custom/left-icon')} />}
  renderRightButton={() => <Text>Custom text after the input</Text>}

Here is the link for tutorial