GooglePlacesAutocomplete styling on the list content of places is not working,not able to do wrapping the places react-native

Question

I m using GooglePlacesAutocomplete where while typing getting the list of places but some places text containing more than that,so I wanted to wrap the text there.

 <GooglePlacesAutocomplete
            placeholder='Where To ?'
            minLength={4}
            autoFocus={true}
            listViewDisplayed="auto"
            returnKeyType={'search'}
            fetchDetails={true}
            onPress={(data, details = null) => {
                props.notifyChange(details.geometry.location,data);
            }}
            query={{
                key: 'chghgdhgfhgfjhdhklkl',
                language: 'en',
            }}
            nearbyPlacesAPI= 'GooglePlacesSearch'
            debounce={200}
            styles={ styles }>
        </GooglePlacesAutocomplete>

and my styles for that is as follows

  const styles = StyleSheet.create({
textInputContainer:{
    backgroundColor: 'rgba(0,0,0,0)',
    borderTopWidth: 0,
    borderBottomWidth:0,
    zIndex:999,
    width:'90%',
},
textInput: {
    marginLeft: 0,
    marginRight: 0,
    height: 45,
    color: '#5d5d5d',
    fontSize: 16,
    borderWidth:1,
    zIndex:999,
  },
  predefinedPlacesDescription: {
    color: '#1faadb'
  },
  listView:{
      top:45.5,
      zIndex:10,
      position: 'absolute',
      color: 'black',
      backgroundColor:"white",
      width:'89%',
  },
  separator:{
    flex: 1,
    height: StyleSheet.hairlineWidth,
    backgroundColor: 'blue',
  },
  description:{
    flexDirection:"row",
    flexWrap:"wrap",
    fontSize:14,
    maxWidth:'89%',
  },

});

refer this link https://reactnativeexample.com/customizable-google-places-autocomplete-component-for-ios-and-android-react-native-apps/ but not able to find the solution.help would be appreciated

Answer 1

The width of the ListView showing the results has its width hardcoded to window.with. That is why you wrapping the text isn't working.

There is a potential workaround, and that would be to split the description into multiple lines. You can do this with the renderRow prop. Styling would need to be adjusted for your specific use case.

<GooglePlacesAutocomplete
            placeholder='Where To ?'
            minLength={4}
            autoFocus={true}
            listViewDisplayed="auto"
            returnKeyType={'search'}
            fetchDetails={true}
            onPress={(data, details = null) => {
                props.notifyChange(details.geometry.location,data);
            }}
            query={{
                key: 'chghgdhgfhgfjhdhklkl',
                language: 'en',
            }}
            nearbyPlacesAPI= 'GooglePlacesSearch'
            debounce={200}
            renderRow={(rowData) => {
            const title = rowData.structured_formatting.main_text;
            const address = rowData.structured_formatting.secondary_text;
            return (
             <View>
              <Text style={{ fontSize: 14 }}>{title}</Text>
              <Text style={{ fontSize: 14 }}>{address}</Text>
             </View>
             );
            }}
            styles={ styles }>
        </GooglePlacesAutocomplete>

You would need to add row to your styles and you can description from styles, because it is being overwritten by renderRow

row: {
 height: "100%",
},

Disclosure: I am the maintainer of this package.