feat: add support for Google Places Details API with CORS proxy for Expo Web

Author: amitpdev

README.md

@@ -202,7 +202,7 @@ const PlaceDetailsExample = () => {
 | biasPrefixText | string | No | - | Text to prepend to search query |
 | **Place Details Configuration** |
 | fetchDetails | boolean | No | false | Automatically fetch place details when a place is selected |
-| detailsProxyUrl | string | No | null | Custom proxy URL for place details requests |
+| detailsProxyUrl | string | No | null | Custom proxy URL for place details requests (Required on Expo web)|
 | detailsFields | string[] | No | ['displayName', 'formattedAddress', 'location', 'id'] | Array of fields to include in the place details response. see [Valid Fields](https://developers.google.com/maps/documentation/places/web-service/place-details#fieldmask) |
 | **UI Customization** |
 | style | StyleProp | No | {} | Custom styles object |
@@ -235,6 +235,23 @@ When `fetchDetails` is enabled:
 
 For a complete list of available fields, see the [Place Details API documentation](https://developers.google.com/maps/documentation/places/web-service/place-details#fieldmask).
 
+### Place Details on Expo Web
+
+**Important:** To use Google Places Details on Expo Web, you must provide a `detailsProxyUrl` prop that points to a CORS-enabled proxy for the Google Places Details API. This is required due to browser security restrictions.
+
+```javascript
+<GooglePlacesTextInput
+  apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+  fetchDetails={true}
+  detailsProxyUrl="https://your-backend-proxy.com/places-details"
+  onPlaceSelect={(place) => console.log(place.details)}
+/>
+```
+
+Without a proxy, the component will still work on Expo Web for place search, but place details fetching will fail with CORS errors.
+
+For a complete guide on setting up a proxy server for Expo Web, see [Expo Web Details Proxy Guide](./docs/expo-web-details-proxy.md).
+
 ## Session Tokens and Billing
 
 This component automatically manages session tokens to optimize your Google Places API billing:

docs/expo-web-details-proxy.md

@@ -0,0 +1,79 @@
+# Using Place Details with Expo Web
+
+## The CORS Issue with Google Places Details API
+
+When using the Google Places Details API in a web browser (including Expo Web), you'll encounter Cross-Origin Resource Sharing (CORS) restrictions. Google's Places API doesn't include the necessary CORS headers to allow direct browser requests, which results in errors like:
+
+```
+Access to fetch at 'https://places.googleapis.com/v1/places/...' has been blocked by CORS policy: 
+No 'Access-Control-Allow-Origin' header is present on the requested resource.
+```
+
+## Solution: Use a Proxy Server
+
+To work around this limitation, you need to set up a proxy server that:
+
+1. Receives requests from your Expo Web application
+2. Forwards them to the Google Places Details API
+3. Returns the response back to your application
+
+The proxy server adds the necessary CORS headers to make the browser happy.
+
+## Setting Up the Proxy Server
+
+We've included an example proxy server in the repository. Here's how to set it up:
+
+### 1. Install Dependencies
+
+Navigate to your project directory and install the required packages:
+
+```bash
+npm install express axios
+# or
+yarn add express axios
+```
+
+### 2. Copy the Proxy Server Code
+
+Copy the example proxy server code from `example/places-details-proxy.js` to your project. You can place it in your project root or in a server directory.
+
+### 3. Run the Proxy Server
+
+Start the proxy server:
+
+```bash
+node places-details-proxy.js
+```
+
+By default, the server will run at `http://localhost:3001`.
+
+### 4. Configure Your React Native Component
+
+Update your GooglePlacesTextInput component to use the proxy:
+
+```javascript
+<GooglePlacesTextInput
+  apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+  fetchDetails={true}
+  detailsProxyUrl="http://localhost:3001/places-details"
+  detailsFields={['formattedAddress', 'location']}
+  onPlaceSelect={handlePlaceSelect}
+/>
+```
+
+## Deploying to Production
+
+For production use:
+
+1. Deploy the proxy server to a hosting service (like Heroku, Vercel, AWS, etc.)
+2. Update your `detailsProxyUrl` to point to your deployed proxy
+
+## Security Considerations
+
+When implementing this in production:
+
+1. **Don't expose your Google API key**: Consider validating requests and using your API key on the server side only
+2. **Limit access**: Restrict who can use your proxy with authentication or origin checking
+3. **Monitor usage**: Keep track of API usage to avoid unexpected costs
+
+By following these steps, you can use Google Places Details API with Expo Web applications effectively.

example/places-details-proxy.js

@@ -0,0 +1,52 @@
+// Example of a minimal Express proxy for Google Places Details API (v1) with CORS support
+
+const express = require('express');
+const axios = require('axios');
+const app = express();
+
+// CORS middleware for all routes and preflight
+app.use((req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Methods', 'GET,OPTIONS');
+  res.header(
+    'Access-Control-Allow-Headers',
+    'Content-Type,X-Goog-Api-Key,X-Goog-SessionToken,X-Goog-FieldMask'
+  );
+  if (req.method === 'OPTIONS') {
+    return res.sendStatus(200);
+  }
+  next();
+});
+
+app.get('/places-details/:placeId', async (req, res) => {
+  const { placeId } = req.params;
+  const { languageCode } = req.query;
+
+  // Forward required headers
+  const headers = {};
+  if (req.header('X-Goog-Api-Key'))
+    headers['X-Goog-Api-Key'] = req.header('X-Goog-Api-Key');
+  if (req.header('X-Goog-SessionToken'))
+    headers['X-Goog-SessionToken'] = req.header('X-Goog-SessionToken');
+  if (req.header('X-Goog-FieldMask'))
+    headers['X-Goog-FieldMask'] = req.header('X-Goog-FieldMask');
+
+  let url = `https://places.googleapis.com/v1/places/${placeId}`;
+  if (languageCode) {
+    url += `?languageCode=${encodeURIComponent(languageCode)}`;
+  }
+
+  try {
+    const response = await axios.get(url, { headers });
+    res.json(response.data);
+  } catch (e) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
+const PORT = process.env.PORT || 3001;
+app.listen(PORT, () => {
+  console.log(
+    `Places Details proxy running on http://localhost:${PORT}/places-details/:placeId`
+  );
+});

src/GooglePlacesTextInput.js

@@ -309,6 +309,15 @@ const GooglePlacesTextInput = forwardRef(
       return { end: paddingValue };
     };
 
+    useEffect(() => {
+      if (Platform.OS === 'web' && fetchDetails && !detailsProxyUrl) {
+        console.warn(
+          'Google Places Details API does not support CORS. ' +
+            'To fetch place details on web, provide a detailsProxyUrl prop that points to a CORS-enabled proxy.'
+        );
+      }
+    }, [fetchDetails, detailsProxyUrl]);
+
     return (
       <View style={[styles.container, style.container]}>
         <View>

src/services/googlePlacesApi.js

@@ -73,7 +73,9 @@ export const fetchPlaceDetails = async ({
   }
 
   try {
-    const API_URL = detailsProxyUrl || `${DEFAULT_PLACE_DETAILS_URL}${placeId}`;
+    const API_URL = detailsProxyUrl
+      ? `${detailsProxyUrl}/${placeId}`
+      : `${DEFAULT_PLACE_DETAILS_URL}${placeId}`;
     const headers = {
       'Content-Type': 'application/json',
     };