Not work on react-native-web

[hiwyn]

I tried this simple example:

function TestGoogleAutoComplete() {
  return (
    <>
      <GoogleAutoComplete apiKey={GOOGLE_API_KEY}>
        {({ handleTextChange, locationResults }) => (
          <>
            {console.log("locationResults: ", locationResults)}
            <View>
              <TextInput
                placeholder="Search a place"
                style={{
                  height: 40,
                  width: 300,
                  borderWidth: 1,
                  paddingHorizontal: 16,
                }}
                onChangeText={handleTextChange}
              ></TextInput>
            </View>
          </>
        )}
      </GoogleAutoComplete>
    </>
  );
}

The console.log is working on expo go (on mobile)
But when i try to run on web it shows this error on the console.log:

Access to fetch at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?&input=rua%20&key=***&language=en&types=address' from origin 'http://localhost:19006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

it should work on web, right? u told on this part of the vídeo that should: https://youtu.be/UFiTL8lAktU?t=209
what should i do?

[EQuimper]

@hiwyn I don't have my pc with me now. But here can you update in your node_module/react-native-google-autocomplete those fetch https://github.com/AppAndFlow/react-native-google-autocomplete/blob/master/lib/services/Google.service.ts#L126 and https://github.com/AppAndFlow/react-native-google-autocomplete/blob/master/lib/services/Google.service.ts#L144

Add fetch(url, { mode: 'no-cors' }); and see if that fix your problem. If we I will update the lib. I just don't work with this lib on web.

I ask you to do it just because I can't fix it until tomorrow so if you need that now you can have this fix until.

[hiwyn]

There is no suck thing /lib/Google.service.ts
on node_modules its a dist version:
https://i.imgur.com/LJd50hk.png

i've tried:
GoogleAutoComplete.es6.js
line 117
line 135
also do 2 changes on GoogleAutoCOmplete.umd.min.js.map

but in the end on console shows Uncaught (in promise) Error
(i have no idea what i'm doing)

my project is a clean project created by expo init my-app (https://docs.expo.dev/get-started/create-a-new-app/)
running on web with expo start

[MiguelNiblock]

I'm also having this issue. Is there a solution so far?

[EQuimper]

The issue with the cors is not fix with fetch no-cors options. And also the other solution of using cors-anywhere don't work too. https://stackoverflow.com/questions/28359730/google-place-api-no-access-control-allow-origin-header-is-present-on-the-req

Look like the solution is to use the official sdk. I don't use react-native web, so this wasn't really in my plan to do.

@MiguelNiblock sorry about that

[hiwyn]

The issue with the cors is not fix with fetch no-cors options. And also the other solution of using cors-anywhere don't work too. https://stackoverflow.com/questions/28359730/google-place-api-no-access-control-allow-origin-header-is-present-on-the-req

Look like the solution is to use the official sdk. I don't use react-native web, so this wasn't really in my plan to do.

@MiguelNiblock sorry about that

A lot of people use RN WEB, even more now with expo, so pls at least put on the readme that u do not support rn-web so people don't waste time