Incompatible with Expo 53

[DevilBoy007]

Describe the bug

Importing package in Expo 53 app causes RenderError

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

1. quickstart expo app with

• npx create-expo-app@latest

2. start development build to ensure it works

• npx expo run:ios

3. install places autocomplete

• npx expo install react-native-google-places-autocomplete

4. import package and utilize component in app/(tabs)/index.tsx (see example code below)
5. rerun development build to see error

• npx expo run:ios

Please provide a FULLY REPRODUCIBLE example.

Click to expand!

import { Image } from 'expo-image';
import { StyleSheet } from 'react-native';

import ParallaxScrollView from '@/components/ParallaxScrollView';

import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

export default function HomeScreen() {
return (
  <ParallaxScrollView
    headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
    headerImage={
      <Image
        source={require('@/assets/images/partial-react-logo.png')}
        style={styles.reactLogo}
      />
    }>
    <GooglePlacesAutocomplete
      placeholder="Search"
      onPress={(data, details = null) => {
        console.log(data, details);
      }}
      query={{
        key:'YOUR-API-KEY',
        language: 'en',
      }}
      fetchDetails={true}
      />
  </ParallaxScrollView>
);
}

const styles = StyleSheet.create({
titleContainer: {
  flexDirection: 'row',
  alignItems: 'center',
  gap: 8,
},
stepContainer: {
  gap: 8,
  marginBottom: 8,
},
reactLogo: {
  height: 178,
  width: 290,
  bottom: 0,
  left: 0,
  position: 'absolute',
},
});

Please remember to remove you google API key from the code you provide here

Additional context

• Library Version: 2.5.7

• React Native Version: 0.79.2

• iOS

• [ ]
  If you are using expo please indicate here:

• I am using expo

Add any other context about the problem here, screenshots etc

[newyorksoul]

I've been encountering the same issue on Expo SDK 53.

[DevilBoy007]

@newyorksoul i was able to get around that error by providing an empty array to the predefinedPlaces prop:

<GooglePlacesAutocomplete
...
predefinedPlaces={[]}
/>

but now the search just doesn't return any results

[LucasPMM]

Same here

[sugashini-shra]

any solution ?

[azael20]

I was able to fix the errors and get it working properly again by adding the following properties, if I remove them it throws errors (including styles):

<GooglePlacesAutocomplete
   ...
   predefinedPlaces={[]}
   textInputProps={{}}
   styles={{}}
 />

[DevilBoy007]

@azael20 does it return results as you type? i am able to get the component to render without errors as you mentioned by providing props that would otherwise be undefined but as i mentioned in an earlier comment the results don't propagate as i enter text into the input box

[ycfreeman]

+1

broken on both android and ios
input box renders with the above hack, but the autocomplete dropdown doesn't work any more

[azael20]

@azael20 does it return results as you type? i am able to get the component to render without errors as you mentioned by providing props that would otherwise be undefined but as i mentioned in an earlier comment the results don't propagate as i enter text into the input box

Yes, it returns results. I'm testing with Expo Go, and I haven't tried Development Build. I'm sharing my complete code, just as it works for me.

UPDATE: I just tried it on an Android device and the problem persists, on iOS it was solved for me.

<GooglePlacesAutocomplete
        predefinedPlaces={[]}
        placeholder='Busca una dirección para agregar'
        ref={ref}
        keyboardShouldPersistTaps='handled'
        onPress={(data, details) => {}}
        onFail={(error) => console.error(error)}
        keepResultsAfterBlur
        fetchDetails
        minLength={2}
        enablePoweredByContainer={false}
        suppressDefaultStyles
        isRowScrollable={false}
        listViewDisplayed
        textInputProps={{}}
        renderRightButton={() => Platform.OS === 'android' && (
          <TouchableWithoutFeedback onPress={() => ref.current.clear()}>
            <View style={{ justifyContent: 'center', borderTopRightRadius: 10, borderBottomRightRadius: 10 }}>
              <Icon name="close" type="material-community" />
            </View>
          </TouchableWithoutFeedback>
        )}
        renderRow={(data) => {
          return (
            <View style={{ paddingHorizontal: 20, paddingVertical: 15, borderRadius: 10 }}>
              <Text style={{ fontFamily: 'Roboto_700Bold' }}>{data.structured_formatting.main_text}</Text>
              <Text style={{ fontFamily: 'Roboto_300Regular', fontSize: 12 }}>{data.structured_formatting.main_text}, {data.structured_formatting.secondary_text}</Text>
            </View>
          );
        }}
        styles={{}}
        query={{
          key: 'KEY',
          language: 'es',
          location: location ? `${location.coordinates.latitude},${location.coordinates.longitude}` : undefined,
          radius: 10000,
        }}
      />

[Wei102193]

same for me search just doesn't return any results

[pepemendez]

Seems like minLengh did the trick

[dylan-bakr]

@pepemendez are you using Expo Go or Development build??

[briazzi64]

Seems like minLengh did the trick

Adding predefinedPlaces={[]} and minLength={2} fixed the issue for me. I am using a development build @dylan-bakr

[Wei102193]

#973 (comment) this might be why, and it solved my issue.

[DevilBoy007]

@briazzi64 @Wei102193 how about on web? i get the error Cannot read properties of undefined (reading 'v1')