fix: get default props issue

GooglePlacesAutocomplete.js

@@ -2,9 +2,9 @@
 import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
 import Qs from 'qs';
+import 'react-native-get-random-values';
 import { v4 as uuidv4 } from 'uuid';
 import React, {
-  forwardRef,
   useMemo,
   useEffect,
   useImperativeHandle,
@@ -71,7 +71,58 @@ const defaultStyles = {
   powered: {},
 };
 
-export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
+const defaultProps = {
+  autoFillOnNotFound: false,
+  currentLocation: false,
+  currentLocationLabel: 'Current location',
+  debounce: 0,
+  disableScroll: false,
+  enableHighAccuracyLocation: true,
+  enablePoweredByContainer: true,
+  fetchDetails: false,
+  filterReverseGeocodingByTypes: [],
+  GooglePlacesDetailsQuery: {},
+  GooglePlacesSearchQuery: {
+    rankby: 'distance',
+    type: 'restaurant',
+  },
+  GoogleReverseGeocodingQuery: {},
+  isRowScrollable: true,
+  keyboardShouldPersistTaps: 'always',
+  listHoverColor: '#ececec',
+  listUnderlayColor: '#c8c7cc',
+  listViewDisplayed: 'auto',
+  keepResultsAfterBlur: false,
+  minLength: 0,
+  nearbyPlacesAPI: 'GooglePlacesSearch',
+  numberOfLines: 1,
+  onFail: () => { },
+  onNotFound: () => { },
+  onPress: () => { },
+  onTimeout: () => console.warn('google places autocomplete: request timeout'),
+  placeholder: '',
+  predefinedPlaces: [],
+  predefinedPlacesAlwaysVisible: false,
+  query: {
+    key: 'missing api key',
+    language: 'en',
+    types: 'geocode',
+  },
+  styles: {},
+  suppressDefaultStyles: false,
+  textInputHide: false,
+  textInputProps: {},
+  timeout: 20000,
+  isNewPlacesAPI: false,
+  fields: '*',
+};
+
+export const GooglePlacesAutocomplete = ({ ref, ...rest }) => {
+  const props = {
+    ...defaultProps,
+    ...rest,
+  };
+
   let _results = [];
   let _requests = [];
 
@@ -331,23 +382,23 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
         request.open(
           'GET',
           `${url}/v1/places/${rowData.place_id}?` +
-            Qs.stringify({
-              key: props.query.key,
-              sessionToken,
-              fields: props.fields,
-            }),
+          Qs.stringify({
+            key: props.query.key,
+            sessionToken,
+            fields: props.fields,
+          }),
         );
         setSessionToken(uuidv4());
       } else {
         request.open(
           'GET',
           `${url}/place/details/json?` +
-            Qs.stringify({
-              key: props.query.key,
-              placeid: rowData.place_id,
-              language: props.query.language,
-              ...props.GooglePlacesDetailsQuery,
-            }),
+          Qs.stringify({
+            key: props.query.key,
+            placeid: rowData.place_id,
+            language: props.query.language,
+            ...props.GooglePlacesDetailsQuery,
+          }),
         );
       }
 
@@ -571,9 +622,9 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
             const results =
               props.nearbyPlacesAPI === 'GoogleReverseGeocoding'
                 ? _filterResultsByTypes(
-                    responseJSON.predictions,
-                    props.filterReverseGeocodingByTypes,
-                  )
+                  responseJSON.predictions,
+                  props.filterReverseGeocodingByTypes,
+                )
                 : responseJSON.predictions;
 
             _results = results;
@@ -609,18 +660,18 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
       if (props.isNewPlacesAPI) {
         const keyQueryParam = props.query.key
           ? '?' +
-            Qs.stringify({
-              key: props.query.key,
-            })
+          Qs.stringify({
+            key: props.query.key,
+          })
           : '';
         request.open('POST', `${url}/v1/places:autocomplete${keyQueryParam}`);
       } else {
         request.open(
           'GET',
           `${url}/place/autocomplete/json?input=` +
-            encodeURIComponent(text) +
-            '&' +
-            Qs.stringify(props.query),
+          encodeURIComponent(text) +
+          '&' +
+          Qs.stringify(props.query),
         );
       }
 
@@ -735,8 +786,8 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
               backgroundColor: pressed
                 ? props.listUnderlayColor
                 : hovered
-                ? props.listHoverColor
-                : undefined,
+                  ? props.listHoverColor
+                  : undefined,
             },
           ]}
           onPress={() => _onPress(rowData)}
@@ -933,17 +984,17 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
             onFocus={
               onFocus
                 ? (e) => {
-                    _onFocus();
-                    onFocus(e);
-                  }
+                  _onFocus();
+                  onFocus(e);
+                }
                 : _onFocus
             }
             onBlur={
               onBlur
                 ? (e) => {
-                    _onBlur(e);
-                    onBlur(e);
-                  }
+                  _onBlur(e);
+                  onBlur(e);
+                }
                 : _onBlur
             }
             clearButtonMode={clearButtonMode || 'while-editing'}
@@ -958,7 +1009,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
       {props.children}
     </View>
   );
-});
+};
 
 GooglePlacesAutocomplete.propTypes = {
   autoFillOnNotFound: PropTypes.bool,
@@ -1017,52 +1068,6 @@ GooglePlacesAutocomplete.propTypes = {
   fields: PropTypes.string,
 };
 
-GooglePlacesAutocomplete.defaultProps = {
-  autoFillOnNotFound: false,
-  currentLocation: false,
-  currentLocationLabel: 'Current location',
-  debounce: 0,
-  disableScroll: false,
-  enableHighAccuracyLocation: true,
-  enablePoweredByContainer: true,
-  fetchDetails: false,
-  filterReverseGeocodingByTypes: [],
-  GooglePlacesDetailsQuery: {},
-  GooglePlacesSearchQuery: {
-    rankby: 'distance',
-    type: 'restaurant',
-  },
-  GoogleReverseGeocodingQuery: {},
-  isRowScrollable: true,
-  keyboardShouldPersistTaps: 'always',
-  listHoverColor: '#ececec',
-  listUnderlayColor: '#c8c7cc',
-  listViewDisplayed: 'auto',
-  keepResultsAfterBlur: false,
-  minLength: 0,
-  nearbyPlacesAPI: 'GooglePlacesSearch',
-  numberOfLines: 1,
-  onFail: () => {},
-  onNotFound: () => {},
-  onPress: () => {},
-  onTimeout: () => console.warn('google places autocomplete: request timeout'),
-  placeholder: '',
-  predefinedPlaces: [],
-  predefinedPlacesAlwaysVisible: false,
-  query: {
-    key: 'missing api key',
-    language: 'en',
-    types: 'geocode',
-  },
-  styles: {},
-  suppressDefaultStyles: false,
-  textInputHide: false,
-  textInputProps: {},
-  timeout: 20000,
-  isNewPlacesAPI: false,
-  fields: '*',
-};
-
 GooglePlacesAutocomplete.displayName = 'GooglePlacesAutocomplete';
 
-export default { GooglePlacesAutocomplete };
+export default { GooglePlacesAutocomplete };

package.json

@@ -32,6 +32,7 @@
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2",
     "qs": "~6.9.1",
+    "react-native-get-random-values": "^1.11.0",
     "uuid": "^10.0.0"
   },
   "devDependencies": {

yarn.lock

@@ -753,6 +753,11 @@ execa@^4.0.3:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+fast-base64-decode@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-base64-decode/-/fast-base64-decode-1.0.0.tgz#b434a0dd7d92b12b43f26819300d2dafb83ee418"
+  integrity sha512-qwaScUgUGBYeDNRnbc/KyllVU88Jk1pRHPStuF/lO7B0/RTRLj7U0lkdTAutlBblY08rwZDff6tNU9cjv6j//Q==
+
 fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -1480,6 +1485,13 @@ react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-native-get-random-values@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/react-native-get-random-values/-/react-native-get-random-values-1.11.0.tgz#1ca70d1271f4b08af92958803b89dccbda78728d"
+  integrity sha512-4BTbDbRmS7iPdhYLRcz3PGFIpFJBwNZg9g42iwa2P6FOv9vZj/xJc678RZXnLNZzd0qd7Q3CCF6Yd+CU2eoXKQ==
+  dependencies:
+    fast-base64-decode "^1.0.0"
+
 regexp.prototype.flags@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
@@ -1780,6 +1792,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+uuid@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
+  integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
+
 v8-compile-cache@^2.0.3:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"