feat: implement session token management to optimize Google Places API billing

Author: amitpdev

README.md

@@ -13,6 +13,7 @@ A customizable React Native TextInput component for Google Places Autocomplete u
 - RTL support
 - Multi-language support
 - TypeScript support
+- Session token support for reduced billing costs
 
 ## Preview
 
@@ -150,6 +151,40 @@ const StyledExample = () => {
 ```
 </details>
 
+<details>
+<summary>Example Using Session Token</summary>
+
+```javascript
+import { useRef } from 'react';
+
+const SessionTokenExample = () => {
+  const inputRef = useRef(null);
+  
+  const handlePlaceSelect = (place, sessionToken) => {
+    console.log('Selected place:', place);
+    console.log('Session token used:', sessionToken);
+    
+    // You can now use this same sessionToken when fetching place details
+    // to benefit from reduced billing (session matching)
+    fetchPlaceDetails(place.placeId, sessionToken);
+  };
+  
+  const fetchPlaceDetails = async (placeId, sessionToken) => {
+    // Your code to fetch place details using the same sessionToken
+    // ...
+  };
+
+  return (
+    <GooglePlacesTextInput
+      ref={inputRef}
+      apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+      onPlaceSelect={handlePlaceSelect}
+    />
+  );
+};
+```
+</details>
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -174,22 +209,43 @@ const StyledExample = () => {
 | forceRTL | boolean | No | undefined | Force RTL layout direction |
 hideOnKeyboardDismiss | boolean | No | false | Hide suggestions when keyboard is dismissed
 | **Event Handlers** |
-| onPlaceSelect | (place: Place \| null) => void | Yes | - | Callback when place is selected |
+| onPlaceSelect | (place: Place \| null, sessionToken?: string) => void | Yes | - | Callback when place is selected |
 | onTextChange | (text: string) => void | No | - | Callback triggered on text input changes |
 
+## Session Tokens and Billing
+
+This component implements automatic session token management to help reduce your Google Places API billing costs:
+
+- 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
+
+**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.
+
+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
+
 ## Methods
 
 The component exposes the following methods through refs:
 
 - `clear()`: Clears the input and suggestions
 - `focus()`: Focuses the input field
+- `getSessionToken()`: Returns the current session token
 
 ```javascript
 const inputRef = useRef(null);
 
 // Usage
 inputRef.current?.clear();
 inputRef.current?.focus();
+const token = inputRef.current?.getSessionToken();
 ```
 
 ## Styling

example/App.js

@@ -2,8 +2,9 @@ import { SafeAreaView, StyleSheet, View, Text } from 'react-native';
 import GooglePlacesTextInput from 'react-native-google-places-textinput';
 
 const App = () => {
-  const handleBasicPlaceSelect = (place) => {
+  const handleBasicPlaceSelect = (place, token) => {
     console.log('Basic example selected place:', place);
+    console.log('Session token generated for this session:', token);
   };
 
   const handleStyledPlaceSelect = (place) => {
@@ -28,6 +29,7 @@ const App = () => {
     suggestionsContainer: {
       backgroundColor: '#FFFFFF',
       borderRadius: 12,
+      maxHeight: 300,
       marginTop: 8,
       elevation: 3,
       shadowColor: '#000',
@@ -36,7 +38,8 @@ const App = () => {
       shadowRadius: 8,
     },
     suggestionItem: {
-      padding: 16,
+      paddingVertical: 10,
+      paddingHorizontal: 16,
       borderBottomWidth: 1,
       borderBottomColor: '#F0F0F0',
     },

src/GooglePlacesTextInput.js

@@ -48,10 +48,18 @@ const GooglePlacesTextInput = forwardRef(
     const [loading, setLoading] = useState(false);
     const [inputText, setInputText] = useState(value || '');
     const [showSuggestions, setShowSuggestions] = useState(false);
+    const [sessionToken, setSessionToken] = useState(null);
     const debounceTimeout = useRef(null);
     const inputRef = useRef(null);
 
+    const generateSessionToken = () => {
+      return generateUUID();
+    };
+
+    // Initialize session token on mount
     useEffect(() => {
+      setSessionToken(generateSessionToken());
+
       return () => {
         if (debounceTimeout.current) {
           clearTimeout(debounceTimeout.current);
@@ -81,10 +89,12 @@ const GooglePlacesTextInput = forwardRef(
         setInputText('');
         setPredictions([]);
         setShowSuggestions(false);
+        setSessionToken(generateSessionToken());
       },
       focus: () => {
         inputRef.current?.focus();
       },
+      getSessionToken: () => sessionToken,
     }));
 
     const fetchPredictions = async (text) => {
@@ -104,15 +114,19 @@ const GooglePlacesTextInput = forwardRef(
         if (apiKey || apiKey !== '') {
           headers['X-Goog-Api-Key'] = apiKey;
         }
+
+        const body = {
+          input: processedText,
+          languageCode,
+          ...(sessionToken && { sessionToken }),
+          ...(includedRegionCodes?.length > 0 && { includedRegionCodes }),
+          ...(types.length > 0 && { includedPrimaryTypes: types }),
+        };
+
         const response = await fetch(API_URL, {
           method: 'POST',
           headers,
-          body: JSON.stringify({
-            input: processedText,
-            languageCode,
-            ...(includedRegionCodes?.length > 0 && { includedRegionCodes }),
-            ...(types.length > 0 && { includedPrimaryTypes: types }),
-          }),
+          body: JSON.stringify(body),
         });
 
         const data = await response.json();
@@ -150,7 +164,12 @@ const GooglePlacesTextInput = forwardRef(
       setInputText(place.structuredFormat.mainText.text);
       setShowSuggestions(false);
       Keyboard.dismiss();
-      onPlaceSelect(place); // Notify parent with selected place
+
+      // Pass both the place and session token to parent
+      onPlaceSelect?.(place, sessionToken);
+
+      // Generate a new token after a place is selected
+      setSessionToken(generateSessionToken());
     };
 
     // Show suggestions on focus if text length > minCharsToFetch
@@ -288,6 +307,7 @@ const GooglePlacesTextInput = forwardRef(
                 setShowSuggestions(false);
                 onPlaceSelect?.(null);
                 onTextChange?.('');
+                setSessionToken(generateSessionToken());
                 inputRef.current?.focus();
               }}
             >
@@ -399,4 +419,14 @@ const isRTLText = (text) => {
   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;