feat: add support for fetching extended place details upon place selection

Author: amitpdev

README.md

@@ -14,6 +14,7 @@ A customizable React Native TextInput component for Google Places Autocomplete u
 - Multi-language support
 - TypeScript support
 - Session token support for reduced billing costs
+- Extended place details fetching (Optional)
 
 ## Preview
 
@@ -185,6 +186,48 @@ const SessionTokenExample = () => {
 ```
 </details>
 
+<details>
+<summary>Example with Place Details Fetching</summary>
+
+```javascript
+const PlaceDetailsExample = () => {
+  const handlePlaceSelect = (place) => {
+    console.log('Selected place:', place);
+    
+    // Access detailed place information 
+    if (place.details) {
+      console.log('Address components:', place.details.addressComponents);
+      console.log('Geometry:', place.details.geometry);
+      console.log('Photos:', place.details.photos);
+      // And other fields you requested
+    }
+  };
+
+  const handleError = (error) => {
+    console.error('API error:', error);
+  };
+
+  return (
+    <GooglePlacesTextInput
+      apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+      onPlaceSelect={handlePlaceSelect}
+      onError={handleError}
+      fetchDetails={true}
+      detailsFields={[
+        'address_components',
+        'formatted_address',
+        'geometry',
+        'viewport',
+        'photos',
+        'place_id',
+        'types'
+      ]}
+    />
+  );
+};
+```
+</details>
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -202,6 +245,10 @@ const SessionTokenExample = () => {
 | includedRegionCodes | string[] | No | - | Array of region codes to filter results |
 | types | string[] | No | [] | Array of place types to filter |
 | 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 |
+| detailsFields | string[] | No | [] | Array of fields to include in the place details response |
 | **UI Customization** |
 | style | StyleProp | No | {} | Custom styles object |
 | showLoadingIndicator | boolean | No | true | Show/hide loading indicator |
@@ -211,25 +258,37 @@ hideOnKeyboardDismiss | boolean | No | false | Hide suggestions when keyboard is
 | **Event Handlers** |
 | onPlaceSelect | (place: Place \| null, sessionToken?: string) => void | Yes | - | Callback when place is selected |
 | onTextChange | (text: string) => void | No | - | Callback triggered on text input changes |
+| onError | (error: any) => void | No | - | Callback for handling API errors |
 
-## Session Tokens and Billing
+## Place Details Fetching
 
-This component implements automatic session token management to help reduce your Google Places API billing costs:
+You can automatically fetch detailed place information when a user selects a place suggestion by enabling the `fetchDetails` prop:
+
+```javascript
+<GooglePlacesTextInput
+  apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+  fetchDetails={true}
+  detailsFields={['formatted_address', 'geometry', 'viewport', 'photos']}
+  onPlaceSelect={(place) => console.log(place.details)}
+/>
+```
+
+When `fetchDetails` is enabled:
+1. The component fetches place details immediately when a user selects a place suggestion
+2. The details are attached to the place object passed to your `onPlaceSelect` callback in the `details` property
+3. Use the `detailsFields` prop to specify which fields to include in the response, reducing API costs
+
+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).
+
+## Session Tokens and Billing
 
-- A session token is automatically generated when the component mounts
-- The same token is used for all autocomplete requests in a session
-- When a place is selected, the token is passed to your `onPlaceSelect` callback
-- Session tokens are automatically reset:
-  - After a place is selected
-  - When the input is manually cleared using the clear button
-  - When the `clear()` method is called programmatically
+This component automatically manages session tokens to optimize your Google Places API billing:
 
-**How this reduces costs:**
-When you make a series of autocomplete requests followed by a place details request using the same session token, Google Places API charges you only once for the entire session rather than for each individual request.
+- A session token is generated when the component mounts
+- The same token is automatically used for all autocomplete requests and place details requests
+- The component automatically resets tokens after place selection, input clearing, or calling `clear()`
 
-To benefit from this billing optimization:
-1. Use the session token passed to your `onPlaceSelect` handler when making subsequent place details requests
-2. No configuration is required - the feature works automatically
+**Note:** This automatic session token management ensures Google treats your autocomplete and details requests as part of the same session, reducing your billing costs with no additional configuration needed.
 
 ## Methods
 
@@ -283,4 +342,4 @@ MIT
 
 Written by Amit Palomo
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

src/GooglePlacesTextInput.js

@@ -18,8 +18,13 @@ import {
   Platform,
 } from 'react-native';
 
-const DEFAULT_GOOGLE_API_URL =
-  'https://places.googleapis.com/v1/places:autocomplete';
+// Import the API functions
+import {
+  fetchPredictions as fetchPredictionsApi,
+  fetchPlaceDetails as fetchPlaceDetailsApi,
+  generateUUID,
+  isRTLText,
+} from './services/googlePlacesApi';
 
 const GooglePlacesTextInput = forwardRef(
   (
@@ -41,6 +46,10 @@ const GooglePlacesTextInput = forwardRef(
       forceRTL = undefined,
       style = {},
       hideOnKeyboardDismiss = false,
+      fetchDetails = false,
+      detailsProxyUrl = null,
+      detailsFields = [],
+      onError,
     },
     ref
   ) => {
@@ -49,6 +58,7 @@ const GooglePlacesTextInput = forwardRef(
     const [inputText, setInputText] = useState(value || '');
     const [showSuggestions, setShowSuggestions] = useState(false);
     const [sessionToken, setSessionToken] = useState(null);
+    const [detailsLoading, setDetailsLoading] = useState(false);
     const debounceTimeout = useRef(null);
     const inputRef = useRef(null);
 
@@ -103,51 +113,57 @@ const GooglePlacesTextInput = forwardRef(
         return;
       }
 
-      const processedText = biasPrefixText ? biasPrefixText(text) : text;
+      setLoading(true);
 
-      try {
-        setLoading(true);
-        const API_URL = proxyUrl ? proxyUrl : DEFAULT_GOOGLE_API_URL;
-        const headers = {
-          'Content-Type': 'application/json',
-        };
-        if (apiKey || apiKey !== '') {
-          headers['X-Goog-Api-Key'] = apiKey;
-        }
-
-        const body = {
-          input: processedText,
+      const { error, predictions: fetchedPredictions } =
+        await fetchPredictionsApi({
+          text,
+          apiKey,
+          proxyUrl,
+          sessionToken,
           languageCode,
-          ...(sessionToken && { sessionToken }),
-          ...(includedRegionCodes?.length > 0 && { includedRegionCodes }),
-          ...(types.length > 0 && { includedPrimaryTypes: types }),
-        };
-
-        const response = await fetch(API_URL, {
-          method: 'POST',
-          headers,
-          body: JSON.stringify(body),
+          includedRegionCodes,
+          types,
+          biasPrefixText,
         });
 
-        const data = await response.json();
-
-        if (data.suggestions) {
-          setPredictions(data.suggestions);
-          setShowSuggestions(true);
-        } else {
-          setPredictions([]);
-        }
-      } catch (error) {
-        console.error('Error fetching predictions:', error);
+      if (error) {
+        onError?.(error);
         setPredictions([]);
-      } finally {
-        setLoading(false);
+      } else {
+        setPredictions(fetchedPredictions);
+        setShowSuggestions(fetchedPredictions.length > 0);
+      }
+
+      setLoading(false);
+    };
+
+    const fetchPlaceDetails = async (placeId) => {
+      if (!fetchDetails || !placeId) return null;
+
+      setDetailsLoading(true);
+
+      const { error, details } = await fetchPlaceDetailsApi({
+        placeId,
+        apiKey,
+        detailsProxyUrl,
+        sessionToken,
+        languageCode,
+        detailsFields,
+      });
+
+      setDetailsLoading(false);
+
+      if (error) {
+        onError?.(error);
+        return null;
       }
+
+      return details;
     };
 
     const handleTextChange = (text) => {
       setInputText(text);
-      onPlaceSelect(null);
       onTextChange?.(text);
 
       if (debounceTimeout.current) {
@@ -159,14 +175,29 @@ const GooglePlacesTextInput = forwardRef(
       }, debounceDelay);
     };
 
-    const handleSuggestionPress = (suggestion) => {
+    const handleSuggestionPress = async (suggestion) => {
       const place = suggestion.placePrediction;
       setInputText(place.structuredFormat.mainText.text);
       setShowSuggestions(false);
       Keyboard.dismiss();
 
-      // Pass both the place and session token to parent
-      onPlaceSelect?.(place, sessionToken);
+      if (fetchDetails) {
+        // Show loading indicator while fetching details
+        setLoading(true);
+
+        // Fetch the place details - Note that placeId is already in the correct format
+        const details = await fetchPlaceDetails(place.placeId);
+
+        // Merge the details with the place data
+        const enrichedPlace = details ? { ...place, details } : place;
+
+        // Pass both the enriched place and session token to parent
+        onPlaceSelect?.(enrichedPlace, sessionToken);
+        setLoading(false);
+      } else {
+        // Original behavior when fetchDetails is false
+        onPlaceSelect?.(place, sessionToken);
+      }
 
       // Generate a new token after a place is selected
       setSessionToken(generateSessionToken());
@@ -305,7 +336,6 @@ const GooglePlacesTextInput = forwardRef(
                 setInputText('');
                 setPredictions([]);
                 setShowSuggestions(false);
-                onPlaceSelect?.(null);
                 onTextChange?.('');
                 setSessionToken(generateSessionToken());
                 inputRef.current?.focus();
@@ -323,7 +353,7 @@ const GooglePlacesTextInput = forwardRef(
           )}
 
           {/* Loading indicator - position adjusts based on showClearButton */}
-          {loading && showLoadingIndicator && (
+          {(loading || detailsLoading) && showLoadingIndicator && (
             <ActivityIndicator
               style={[styles.loadingIndicator, getIconPosition(45)]}
               size={'small'}
@@ -409,24 +439,4 @@ const styles = StyleSheet.create({
   },
 });
 
-const isRTLText = (text) => {
-  if (!text) return false;
-  // Hebrew: \u0590-\u05FF
-  // Arabic: \u0600-\u06FF, \u0750-\u077F (Arabic Supplement), \u0870-\u089F (Arabic Extended-B)
-  // Arabic Presentation Forms: \uFB50-\uFDFF, \uFE70-\uFEFF
-  const rtlRegex =
-    /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\u0870-\u089F\uFB50-\uFDFF\uFE70-\uFEFF]/;
-  return rtlRegex.test(text);
-};
-
-// Helper function to generate UUID v4
-const generateUUID = () => {
-  // RFC4122 version 4 compliant UUID
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    var r = (Math.random() * 16) | 0,
-      v = c === 'x' ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-};
-
 export default GooglePlacesTextInput;