Modal window opened by RNGooglePlaces.openAutocompleteModal() disappears as soon as the modal appears

[raaguln]

The modal window pops up briefly for barely a second and then slides back down, not allowing the user to be able to type any input. Not understanding why it's happening.

The component snippet -

<View>
   <Icon.Button
        name={getIcon('flag')}
        backgroundColor={color.lightPrimary}
        borderRadius={2}
        size={16}
        iconStyle={styles.icon}
        onPress={() => this.props.openSearchModal(1)}
   >
      <Text style={styles.text}>{direction.destinationName}</Text>
   </Icon.Button>
</View>

The action snippet -

export function openSearchModal(key) {
    return dispatch => {
        RNGooglePlaces.openAutocompleteModal()
            .then(place => {
                let data = {};
                data.latitude = place.latitude;
                data.longitude = place.longitude;
                if (key === 0) {
                    getRegion(
                        {
                            latitude: data.latitude,
                            longitude: data.longitude
                        },
                        null
                    ).then(result => {
                        dispatch(set_region(result));
                        dispatch(set_source(data, place.name));
                    });
                } else {
                    dispatch(set_destination(data, place.name));
                }
            })
            .catch(error => {
                //console.log(error.message);
            });
    };
}

No errors or warnings except this constant warning that keeps coming up, though I'm not sure if this is relevant to this issue -

Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info. (Saw setTimeout with duration 391329ms)

[tmjordan]

@beyondtheinferno verify your api key, and check that you have enabled the Places API on GCP

[raaguln]

@tmjordan Yes I have the API and Places API enabled. There are no restrictions on the API key as well

[tmjordan]

@beyondtheinferno that's weird, i experienced this issue once, when using a new api key which does not allow to use PlacePicker as it is deprecated

[tmjordan]

check your restrictions on your api key, if you have any restrictions make sure it matches with the bundle id of your app

[akiladevinda]

I have the same issue.. Any solution ?

[himanshuc3]

Similar issue. My modal in ios closes as soon as it opens. Also, I get the error illegal callback invocation from native module. This is in ios only, android's working fine.

[evaleirasclapps]

I fixed it by going to Google Console, and in the top of the screen from the Google APIs credential clicking in a message saying to upgrade my account.

[Doko-Demo-Doa]

Even with billing and restricted key, it still happens. Any idea?

I can still type in one or two letters, some results appeared, but then the modal suddenly closed.

Edit: Got it. Billing must be enabled:

https://developers.google.com/places/ios-sdk/client-migration

Reminder: To use the Places SDK for iOS, you must:
Include an API key with all API requests.
Enable billing on each of your projects.
Enable the Places API service for each of your projects.

[temitope]

thanks for a great library @tolu360 👍

I double checked the billing and the keys, they are all set.

However, the issue persists. I notice that there is no outgoing internet request made to the google API before the crash occurs (but after the popup starts). So perhaps that isnt the issue on my end. I suspect something to do with version mismatching but i cant quite find the issue.

• react-native@0.52.3

• react-native-google-places@3.1.0

• react-native-maps@0.25.0

• Xcode11 (Xcode 10.3 previously. the upgrade requires a change to RCTMethodModule.mm file. Tested both and had same behavior.)

after that moment of auto-self-closing the app is entirely frozen and must be rebuilt entirely to function again. No obvious error message is displayed. will dig deeper.

UPDATE:

tried the sample app, and got it working for RN@0.58 but not RN@0.52.3-0.53. For the sake of time i'm exploring the Place API route via direct Fetch call and parsing the JSON results. It's not that bad and not too far from parity since the placepicker had been deprecated. It's a bit easier to setup and protect keys in a way as it doesnt require a binary change. It will take less time than I've spent debugging for now. Hugely appreciate this library still for all the years I relied on it. Good stuff. thanks again @tolu360