react-native-google-places-autocomplete 2.5.1 → 2.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/GooglePlacesAutocomplete.d.ts +3 -0
- package/GooglePlacesAutocomplete.js +32 -11
- package/README.md +64 -49
- package/package.json +1 -1
|
@@ -395,6 +395,9 @@ interface GooglePlacesAutocompleteProps {
|
|
|
395
395
|
keyboardShouldPersistTaps?: 'never' | 'always' | 'handled';
|
|
396
396
|
/** use the ListEmptyComponent prop when no autocomplete results are found. */
|
|
397
397
|
listEmptyComponent?: JSX.Element | React.ComponentType<{}>;
|
|
398
|
+
/** use the ListLoaderComponent prop when no results are loading. */
|
|
399
|
+
listLoaderComponent?: JSX.Element | React.ComponentType<{}>;
|
|
400
|
+
listHoverColor?: string;
|
|
398
401
|
listUnderlayColor?: string;
|
|
399
402
|
listViewDisplayed?: 'auto' | boolean;
|
|
400
403
|
/** minimum length of text to search */
|
|
@@ -16,11 +16,11 @@ import {
|
|
|
16
16
|
Image,
|
|
17
17
|
Keyboard,
|
|
18
18
|
Platform,
|
|
19
|
+
Pressable,
|
|
19
20
|
ScrollView,
|
|
20
21
|
StyleSheet,
|
|
21
22
|
Text,
|
|
22
23
|
TextInput,
|
|
23
|
-
TouchableHighlight,
|
|
24
24
|
View,
|
|
25
25
|
} from 'react-native';
|
|
26
26
|
|
|
@@ -140,18 +140,18 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
|
|
|
140
140
|
props.listViewDisplayed === 'auto' ? false : props.listViewDisplayed,
|
|
141
141
|
);
|
|
142
142
|
const [url] = useState(getRequestUrl(props.requestUrl));
|
|
143
|
+
const [listLoaderDisplayed, setListLoaderDisplayed] = useState(false);
|
|
143
144
|
|
|
144
145
|
const inputRef = useRef();
|
|
145
146
|
|
|
146
147
|
useEffect(() => {
|
|
147
|
-
// This will load the
|
|
148
|
-
// been rendered
|
|
148
|
+
// This will load the search results after the query object ref gets changed
|
|
149
149
|
_handleChangeText(stateText);
|
|
150
150
|
return () => {
|
|
151
151
|
_abortRequests();
|
|
152
152
|
};
|
|
153
153
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
154
|
-
}, []);
|
|
154
|
+
}, [props.query]);
|
|
155
155
|
useEffect(() => {
|
|
156
156
|
// Update dataSource if props.predefinedPlaces changed
|
|
157
157
|
setDataSource(buildRowsFromResults([]));
|
|
@@ -410,9 +410,11 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
|
|
|
410
410
|
request.ontimeout = props.onTimeout;
|
|
411
411
|
request.onreadystatechange = () => {
|
|
412
412
|
if (request.readyState !== 4) {
|
|
413
|
+
setListLoaderDisplayed(true);
|
|
413
414
|
return;
|
|
414
415
|
}
|
|
415
416
|
|
|
417
|
+
setListLoaderDisplayed(false);
|
|
416
418
|
if (request.status === 200) {
|
|
417
419
|
const responseJSON = JSON.parse(request.responseText);
|
|
418
420
|
|
|
@@ -481,6 +483,9 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
|
|
|
481
483
|
|
|
482
484
|
const _request = (text) => {
|
|
483
485
|
_abortRequests();
|
|
486
|
+
if (!url) {
|
|
487
|
+
return;
|
|
488
|
+
}
|
|
484
489
|
if (supportedPlatform() && text && text.length >= props.minLength) {
|
|
485
490
|
const request = new XMLHttpRequest();
|
|
486
491
|
_requests.push(request);
|
|
@@ -488,9 +493,11 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
|
|
|
488
493
|
request.ontimeout = props.onTimeout;
|
|
489
494
|
request.onreadystatechange = () => {
|
|
490
495
|
if (request.readyState !== 4) {
|
|
496
|
+
setListLoaderDisplayed(true);
|
|
491
497
|
return;
|
|
492
498
|
}
|
|
493
499
|
|
|
500
|
+
setListLoaderDisplayed(false);
|
|
494
501
|
if (request.status === 200) {
|
|
495
502
|
const responseJSON = JSON.parse(request.responseText);
|
|
496
503
|
if (typeof responseJSON.predictions !== 'undefined') {
|
|
@@ -625,12 +632,19 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
|
|
|
625
632
|
showsHorizontalScrollIndicator={false}
|
|
626
633
|
showsVerticalScrollIndicator={false}
|
|
627
634
|
>
|
|
628
|
-
<
|
|
629
|
-
style={
|
|
630
|
-
props.isRowScrollable ? { minWidth: '100%' } : { width: '100%' }
|
|
631
|
-
|
|
635
|
+
<Pressable
|
|
636
|
+
style={({ hovered, pressed }) => [
|
|
637
|
+
props.isRowScrollable ? { minWidth: '100%' } : { width: '100%' },
|
|
638
|
+
{
|
|
639
|
+
backgroundColor: pressed
|
|
640
|
+
? props.listUnderlayColor
|
|
641
|
+
: hovered
|
|
642
|
+
? props.listHoverColor
|
|
643
|
+
: undefined,
|
|
644
|
+
},
|
|
645
|
+
]}
|
|
632
646
|
onPress={() => _onPress(rowData)}
|
|
633
|
-
|
|
647
|
+
onBlur={_onBlur}
|
|
634
648
|
>
|
|
635
649
|
<View
|
|
636
650
|
style={[
|
|
@@ -642,7 +656,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
|
|
|
642
656
|
{_renderLoader(rowData)}
|
|
643
657
|
{_renderRowData(rowData, index)}
|
|
644
658
|
</View>
|
|
645
|
-
</
|
|
659
|
+
</Pressable>
|
|
646
660
|
</ScrollView>
|
|
647
661
|
);
|
|
648
662
|
};
|
|
@@ -770,7 +784,9 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
|
|
|
770
784
|
ItemSeparatorComponent={_renderSeparator}
|
|
771
785
|
renderItem={({ item, index }) => _renderRow(item, index)}
|
|
772
786
|
ListEmptyComponent={
|
|
773
|
-
|
|
787
|
+
listLoaderDisplayed
|
|
788
|
+
? props.listLoaderComponent
|
|
789
|
+
: stateText.length > props.minLength && props.listEmptyComponent
|
|
774
790
|
}
|
|
775
791
|
ListHeaderComponent={
|
|
776
792
|
props.renderHeaderComponent &&
|
|
@@ -865,6 +881,8 @@ GooglePlacesAutocomplete.propTypes = {
|
|
|
865
881
|
isRowScrollable: PropTypes.bool,
|
|
866
882
|
keyboardShouldPersistTaps: PropTypes.oneOf(['never', 'always', 'handled']),
|
|
867
883
|
listEmptyComponent: PropTypes.func,
|
|
884
|
+
listLoaderComponent: PropTypes.func,
|
|
885
|
+
listHoverColor: PropTypes.string,
|
|
868
886
|
listUnderlayColor: PropTypes.string,
|
|
869
887
|
// Must write it this way: https://stackoverflow.com/a/54290946/7180620
|
|
870
888
|
listViewDisplayed: PropTypes.oneOfType([
|
|
@@ -919,6 +937,7 @@ GooglePlacesAutocomplete.defaultProps = {
|
|
|
919
937
|
GoogleReverseGeocodingQuery: {},
|
|
920
938
|
isRowScrollable: true,
|
|
921
939
|
keyboardShouldPersistTaps: 'always',
|
|
940
|
+
listHoverColor: '#ececec',
|
|
922
941
|
listUnderlayColor: '#c8c7cc',
|
|
923
942
|
listViewDisplayed: 'auto',
|
|
924
943
|
keepResultsAfterBlur: false,
|
|
@@ -944,4 +963,6 @@ GooglePlacesAutocomplete.defaultProps = {
|
|
|
944
963
|
timeout: 20000,
|
|
945
964
|
};
|
|
946
965
|
|
|
966
|
+
GooglePlacesAutocomplete.displayName = 'GooglePlacesAutocomplete';
|
|
967
|
+
|
|
947
968
|
export default { GooglePlacesAutocomplete };
|
package/README.md
CHANGED
|
@@ -6,10 +6,23 @@
|
|
|
6
6
|
|
|
7
7
|
**Customizable Google Places autocomplete component for iOS and Android React-Native apps**
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
## Sponsor
|
|
10
|
+
|
|
11
|
+
<p align="center">
|
|
12
|
+
<br/>
|
|
13
|
+
<a href="https://bit.ly/3rneTTI" target="_blank">
|
|
14
|
+
<img src="https://raw.githubusercontent.com/FaridSafi/react-native-google-places-autocomplete/master/Assets/expensify-logo.png">
|
|
15
|
+
</a>
|
|
16
|
+
<br>
|
|
17
|
+
<p align="center">
|
|
18
|
+
The financial management super app for expenses, corporate cards, and more.
|
|
19
|
+
</p>
|
|
20
|
+
<a href="https://bit.ly/3rneTTI" target="_blank">
|
|
21
|
+
<p align="center">
|
|
22
|
+
Click to learn more
|
|
23
|
+
</p>
|
|
24
|
+
</a>
|
|
25
|
+
</p>
|
|
13
26
|
|
|
14
27
|
## Preview
|
|
15
28
|
|
|
@@ -221,51 +234,53 @@ export default GooglePlacesInput;
|
|
|
221
234
|
|
|
222
235
|
_This list is a work in progress. PRs welcome!_
|
|
223
236
|
|
|
224
|
-
| Prop Name | type
|
|
225
|
-
| ----------------------------- |
|
|
226
|
-
| autoFillOnNotFound | boolean
|
|
227
|
-
| currentLocation | boolean
|
|
228
|
-
| currentLocationLabel | string
|
|
229
|
-
| debounce | number
|
|
230
|
-
| disableScroll | boolean
|
|
231
|
-
| enableHighAccuracyLocation | boolean
|
|
232
|
-
| enablePoweredByContainer | boolean
|
|
233
|
-
| fetchDetails | boolean
|
|
234
|
-
| filterReverseGeocodingByTypes | array
|
|
235
|
-
| GooglePlacesDetailsQuery | object
|
|
236
|
-
| GooglePlacesSearchQuery | object
|
|
237
|
-
| GoogleReverseGeocodingQuery | object
|
|
238
|
-
| isRowScrollable | boolean
|
|
239
|
-
|inbetweenCompo|React.ReactNode|Insert a ReactNode in between the search bar and the search results Flatlist
|
|
240
|
-
| keepResultsAfterBlur | boolean
|
|
241
|
-
| keyboardShouldPersistTaps | string
|
|
242
|
-
| listEmptyComponent | function
|
|
243
|
-
|
|
|
244
|
-
|
|
|
245
|
-
|
|
|
246
|
-
|
|
|
247
|
-
|
|
|
248
|
-
|
|
|
249
|
-
|
|
|
250
|
-
|
|
|
251
|
-
|
|
|
252
|
-
|
|
|
253
|
-
|
|
|
254
|
-
|
|
|
255
|
-
|
|
|
256
|
-
|
|
|
257
|
-
|
|
|
258
|
-
|
|
|
259
|
-
|
|
|
260
|
-
|
|
|
261
|
-
|
|
|
262
|
-
|
|
|
263
|
-
|
|
|
264
|
-
|
|
|
265
|
-
|
|
|
266
|
-
|
|
|
267
|
-
|
|
|
268
|
-
|
|
|
237
|
+
| Prop Name | type | description | default value | Options |
|
|
238
|
+
| ----------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------- |
|
|
239
|
+
| autoFillOnNotFound | boolean | displays the result from autocomplete if the place details api return not found | false | true \| false |
|
|
240
|
+
| currentLocation | boolean | Will add a 'Current location' button at the top of the predefined places list | false | true \| false |
|
|
241
|
+
| currentLocationLabel | string | change the display label for the current location button | Current Location | Any string |
|
|
242
|
+
| debounce | number | debounce the requests (in ms) | 0 | |
|
|
243
|
+
| disableScroll | boolean | disable scroll on the results list | | |
|
|
244
|
+
| enableHighAccuracyLocation | boolean | use GPS or not. If set to true, a GPS position will be requested. If set to false, a WIFI location will be requested. use GPS or not. If set to true, a GPS position will be requested. If set to false, a WIFI location will be requested. | true | |
|
|
245
|
+
| enablePoweredByContainer | boolean | show "powered by Google" at the bottom of the search results list | true | |
|
|
246
|
+
| fetchDetails | boolean | get more place details about the selected option from the Place Details API | false | |
|
|
247
|
+
| filterReverseGeocodingByTypes | array | filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities | | |
|
|
248
|
+
| GooglePlacesDetailsQuery | object | "query" object for the Google Place Details API (when you press on a suggestion) | | |
|
|
249
|
+
| GooglePlacesSearchQuery | object | "query" object for the Google Places Nearby API (when you use current location to find nearby places) | `{ rankby: 'distance', type: 'restaurant' }` | |
|
|
250
|
+
| GoogleReverseGeocodingQuery | object | "query" object for the Google Geocode API (when you use current location to get the current address) | | |
|
|
251
|
+
| isRowScrollable | boolean | enable/disable horizontal scrolling of a list result https://reactnative.dev/docs/scrollview#scrollenabled | true |
|
|
252
|
+
| inbetweenCompo | React.ReactNode | Insert a ReactNode in between the search bar and the search results Flatlist |
|
|
253
|
+
| keepResultsAfterBlur | boolean | show list of results after blur | false | true \| false |
|
|
254
|
+
| keyboardShouldPersistTaps | string | Determines when the keyboard should stay visible after a tap https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps | 'always' | 'never' \| 'always' \| 'handled' |
|
|
255
|
+
| listEmptyComponent | function | use FlatList's ListEmptyComponent prop when no autocomplete results are found. | | |
|
|
256
|
+
| listLoaderComponent | function | show this component while results are loading. | | |
|
|
257
|
+
| listHoverColor | string | underlay color of the list result when hovered (web only) | '#ececec' | |
|
|
258
|
+
| listUnderlayColor | string | underlay color of the list result when pressed https://reactnative.dev/docs/touchablehighlight#underlaycolor | '#c8c7cc' | |
|
|
259
|
+
| listViewDisplayed | string | override the default behavior of showing the list (results) view | 'auto' | 'auto' \| true \| false |
|
|
260
|
+
| minLength | number | minimum length of text to trigger a search | 0 | |
|
|
261
|
+
| nearbyPlacesAPI | string | which API to use for current location | 'GooglePlacesSearch' | 'none' \| 'GooglePlacesSearch' \| 'GoogleReverseGeocoding' |
|
|
262
|
+
| numberOfLines | number | number of lines (android - multiline must be set to true) https://reactnative.dev/docs/textinput#numberoflines | 1 | |
|
|
263
|
+
| onFail | function | returns if an unspecified error comes back from the API | | |
|
|
264
|
+
| onNotFound | function | returns if the Google Places Details API returns a 'not found' code (when you press a suggestion). | | |
|
|
265
|
+
| onPress | function | returns when after a suggestion is selected | | |
|
|
266
|
+
| onTimeout | function | callback when a request timeout | `()=>console.warn('google places autocomplete: request timeout')` | |
|
|
267
|
+
| placeholder | string | placeholder text https://reactnative.dev/docs/textinput#placeholder | 'Search' | |
|
|
268
|
+
| predefinedPlaces | array | Allows you to show pre-defined places (e.g. home, work) | | |
|
|
269
|
+
| predefinedPlacesAlwaysVisible | boolean | Shows predefined places at the top of the search results | false | |
|
|
270
|
+
| preProcess | function | do something to the text of the search input before a search request is sent | | |
|
|
271
|
+
| query | object | "query" object for the Google Places Autocomplete API (link) | `{ key: 'missing api key', language: 'en', types: 'geocode' }` | |
|
|
272
|
+
| renderDescription | function | determines the data passed to each renderRow (search result) | | |
|
|
273
|
+
| renderHeaderComponent | function | use the `ListHeaderComponent` from `FlatList` when showing autocomplete results | | |
|
|
274
|
+
| renderLeftButton | function | add a component to the left side of the Text Input | | |
|
|
275
|
+
| renderRightButton | function | add a component to the right side of the Text Input | | |
|
|
276
|
+
| renderRow | function | custom component to render each result row (use this to show an icon beside each result). `data` and `index` will be passed as input parameters | | |
|
|
277
|
+
| requestUrl | object | used to set the request url for the library | | |
|
|
278
|
+
| returnKeyType | string | the return key text https://reactnative.dev/docs/textinput#returnkeytype | 'search' | |
|
|
279
|
+
| styles | object | See styles section below | | |
|
|
280
|
+
| suppressDefaultStyles | boolean | removes all default styling from the library | false | true \| false |
|
|
281
|
+
| textInputHide | boolean | Hide the Search input | false | true \| false |
|
|
282
|
+
| textInputProps | object | define props for the [textInput](https://reactnative.dev/docs/textinput), or provide a custom input component | | |
|
|
283
|
+
| timeout | number | how many ms until the request will timeout | 20000 | |
|
|
269
284
|
|
|
270
285
|
## Methods
|
|
271
286
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-google-places-autocomplete",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.3",
|
|
4
4
|
"description": "Customizable Google Places autocomplete component for iOS and Android React-Native apps",
|
|
5
5
|
"main": "GooglePlacesAutocomplete.js",
|
|
6
6
|
"types": "GooglePlacesAutocomplete.d.ts",
|