Setting Predefined Text

[pmusole2]

Describe the problem

I want to be able to populate the search bar with the previous search which under normal circumstances happens automatically but with my current setup I have to do it using a function.

Reproduction - (required - issue will be closed without this)

I have put the search bar in a modal. So I want to pass props to the modal component so that after a search and an onPress event if the modal with the search bar is opened again I can prepopulate it with the previous search text. According to the documentation, there is a "setAddressText" method which should help do what I am trying to achieve. But I am not quite sure how I can use the method in this component and there's is no descriptive example.

Steps to reproduce the behavior - a minimal reproducible code example, link to a snack or a repository.

So as you know once a modal is closed, it's unmounted from the app, the values reset. I have passed props to the modal and when I log the props to the console they are there but I haven't quite figured put how to pass a value to the search bar on the condition that a previous search was made. I hope I am making sense with what I am explaining.

Additional context

"react-native-google-places-autocomplete": "^1.8.0"
-React Native Version: [sdk-38.0.2]

• iOS
• Android
• Web

If you are using expo please indicate here:

• I am using expo version ~38.0.8

Add any other context about the problem here, screenshots etc

[bell-steven]

Have you tried the getDefaultValue prop yet?

 <GooglePlacesAutocomplete
        placeholder="Search"
        onPress={(data, details) => {
          console.log(data, details);
        }}
        query={{
          key: GOOGLE_PLACES_API_KEY,
          language: 'en',
        }}
        getDefaultValue={() => 'Previous Address'}
  />

Alternatively, you can use a ref and use setAddressText in componentDidMount or a useEffect.

import React, { useRef, useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const GOOGLE_PLACES_API_KEY = '';

const App = () => {
  const ref = useRef();

  useEffect(() => {
    ref?.current?.setAddressText('Previous Address');
  }, []);

  return (
    <View style={styles.container}>
      <GooglePlacesAutocomplete
        ref={ref}
        placeholder="Search"
        onPress={(data, details) => {
          console.log(data, details);
        }}
        query={{
          key: GOOGLE_PLACES_API_KEY,
          language: 'en',
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 10,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

export default App;

Let me know what worked for you.

[tgreco]

@bell-steven your post is no longer relevant as you removed the getDefaultValue prop.

What is the new way to do this?

ccd6205

[bell-steven]

@tgreco use a ref like my second example above. The changelog mentions this change.

[tgreco]

@tgreco use a ref like my second example above. The changelog mentions this change.

The second example is not working for me.

componentDidMount() { this._placeRef.current.setAddressText('Test'); console.log('Set address'); this.forceUpdate(); }

Nothing appears in the search text field at all.
@bell-steven

[bell-steven]

Please follow the example in the README. I just tested it, and it definitely works.

[tgreco]

@bell-steven have you tried this with a component using componentDidMount instead of useEffect?
It does not seem to work for me unless using a functional component.

[bell-steven]

I was using useEffect. You are probably not accessing the ref correctly in your componentDidMount

[a-ghorbani]

Has anyone been able to use setAddressText in componentDidMount?
@bell-steven can you please give an example how to use correctly in componentDidMount?

[tgreco]

Has anyone been able to use setAddressText in componentDidMount?
@bell-steven can you please give an example how to use correctly in componentDidMount?

Unfortunately this will only work in a functional component.
A class it will not work.

[TonioBDS]

Has anyone been able to use setAddressText in componentDidMount?
@bell-steven can you please give an example how to use correctly in componentDidMount?

Unfortunately this will only work in a functional component. A class it will not work.

Hello, is it planned to make it work in a class component? Indeed I struggled a long time before reading that it can't work in a class component. Unfortunately my GooglePlacesAutocomplete component is inside a long list of other components and I cannot imagine turning all of it into a functional component...
Did someone succeed to find a workaround in order to set a default address (I restore an address stored in a persistent store on my case) upon componentDidMount.
Many thanks

[Radilx]

What a terrible choice to remove getDefaultValue and not provide any alternatives!!!

For anyone who stumbles upon this, here's my solution:

  const [stepAddress, setStepAddress] = useState("Your Value Here");
  const [allowEmpty, setAllowEmpty] = useState(false);

  function handleTT(ipn){
     if (ipn.length > 0 || allowEmpty) {
       setStepAddress(ipn);
     } else {
       setAllowEmpty(true);
     }
  }

And then add this to your autocomplete component:

   textInputProps={{
      value: stepAddress,
      onChangeText: handleTT
}}

What a mess! Not only does this library not provide any way to set the default text, but it also tries to override whatever you put in and set it to an empty string "" every time it loads up (hence the convoluted handleTT function).

If anyone else has a better solution let me know. Yikes!

[ceduardogodoi]

I was able to setAddressText (to pre-populate it) with the value from another prop, like this:

// GooglePlacesAutocomplete wrapper component
import { Component, forwardRef } from 'react'
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'

class GooglePlacesAutocompleteWrapper extends Component {
  shouldComponentUpdate() {
    const { innerRef, defaultLocation } = this.props
    
    if (defaultLocation) {
      innerRef.current.setAddressText(`${defaultLocation.city}, ${defaultLocation.state}`)
      return true
    }
    
    return false
  }

  render() {
    return (
      <GooglePlacesAutocomplete
        ref={this.props.innerRef}
        {/* the props you need/want */}
      />
    )
  }
}

// forwarding wrapper ref to its parent
export const MyGooglePlacesAutocompleteComponent = forwardRef((props, ref) => {
  return <GooglePlacesAutocompleteWrapper {...props} innerRef={ref} />
})

// Parent component
import { createRef } from 'react'
import { MyGooglePlacesAutocompleteComponent } from '@components/MyGooglePlacesAutocompleteComponent'

export class ParentComponent extends Component {
  googlePlacesInputRef = createRef()

  render() {
    <MyGooglePlacesAutocompleteComponent
      ref={this.googlePlacesInputRef}
      defaultLocation={{
        city: 'New York',
        state: 'NY',
      }}
    />
  }
}