fix(web): add proxy url for web support

Author: EQuimper

example/src/App.tsx

@@ -1,14 +1,24 @@
-import { StyleSheet, View, Text, TextInput, ScrollView } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  Text,
+  TextInput,
+  ScrollView,
+  Platform,
+} from 'react-native';
 import { useGoogleAutocomplete } from '@appandflow/react-native-google-autocomplete';
 
 const API_KEY = '';
 
+const isWeb = Platform.OS === 'web';
+
 export default function App() {
   const { setTerm, locationResults, isSearching } = useGoogleAutocomplete(
     API_KEY,
     {
       language: 'en',
       minLength: 3,
+      proxyUrl: isWeb ? 'https://cors-anywhere.herokuapp.com/' : undefined,
     }
   );
 

src/GoogleAutocomplete.tsx

@@ -5,6 +5,9 @@ import {
 } from './services/google.service';
 import { useDebounce } from 'use-debounce';
 import { useIsMounted } from './useIsMounted';
+import { Platform } from 'react-native';
+
+const isWeb = Platform.OS === 'web';
 
 interface Options {
   /**
@@ -58,6 +61,11 @@ interface Options {
    * Enable strict mode to return search result only in the area defined by radius, lat and lng
    */
   strictBounds?: boolean;
+
+  /**
+   * Proxy url if you want to use the web, this is needed cause of CORS issue
+   */
+  proxyUrl?: string;
 }
 
 export const useGoogleAutocomplete = (apiKey: string, opts: Options = {}) => {
@@ -77,17 +85,25 @@ export const useGoogleAutocomplete = (apiKey: string, opts: Options = {}) => {
   const [searchError, setSearchError] = useState<Error | null>(null);
 
   const search = async (value: string) => {
+    if (isWeb && !opts.proxyUrl) {
+      throw new Error('A proxy url is needed for web');
+    }
+
     setIsSearching(true);
     try {
-      const results = await GoogleService.search(value, {
-        key: apiKey,
-        language,
-        types: queryTypes,
-        strictBounds: opts.strictBounds,
-        lat: opts.lat,
-        lng: opts.lng,
-        radius: opts.radius,
-      });
+      const results = await GoogleService.search(
+        value,
+        {
+          key: apiKey,
+          language,
+          types: queryTypes,
+          strictBounds: opts.strictBounds,
+          lat: opts.lat,
+          lng: opts.lng,
+          radius: opts.radius,
+        },
+        opts.proxyUrl
+      );
 
       setLocationResults(results.predictions);
     } catch (error) {

src/services/google.service.ts

@@ -112,7 +112,8 @@ const normalizeQuery = (query: Query): NormalizeQuery => {
 export class GoogleService {
   public static async search(
     term: string,
-    query: Query
+    query: Query,
+    proxyUrl?: string
   ): Promise<{
     predictions: GoogleLocationResult[];
     status: string;
@@ -123,7 +124,9 @@ export class GoogleService {
       query.strictBounds ? '&strictbounds' : ''
     }`;
 
-    const res = await fetch(url);
+    const _url = proxyUrl ? proxyUrl + url : url;
+
+    const res = await fetch(_url);
 
     if (!res.ok) {
       throw new Error(res.statusText);