React-native-google-places-autocomplete: 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?

https://github.com/FaridSafi/react-native-google-places-autocomplete/commit/ccd62057d6804d3c6c4aa77de243396025238a5b

[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.