feat: update component, example and readme

Author: amitpdev

README.md

@@ -1,24 +1,145 @@
-# react-native-google-places-textinput
+# React Native Google Places TextInput
 
-A customizable React Native component for Google Places Autocomplete TextInput using Places API (New)
+A customizable React Native TextInput component for Google Places Autocomplete using the Places API (New)
+
+## Features
+
+- 🎨 Fully customizable UI
+- 🌍 RTL support
+- ⌨️ Debounced search
+- 🔄 Loading indicators
+- 📱 Keyboard-aware
+- 🎯 TypeScript support
+- 🔍 Custom place types filtering
+- 🌐 Multi-language support
 
 ## Installation
 
-```sh
+```bash
 npm install react-native-google-places-textinput
+# or
+yarn add react-native-google-places-textinput
 ```
 
+## Prerequisites
+
+- Get a Google Places API key from the [Google Cloud Console](https://console.cloud.google.com/)
+- Enable Places API (New) in your Google Cloud Project
+
 ## Usage
 
+```javascript
+import GooglePlacesTextInput from 'react-native-google-places-textinput';
 
-```js
-import { multiply } from 'react-native-google-places-textinput';
+const YourComponent = () => {
+  const handlePlaceSelect = (place) => {
+    if (place) {
+      console.log('Selected place:', place);
+    }
+  };
 
-// ...
+  // Example with custom styles
+  const customStyles = {
+    container: {
+      width: '100%',
+      marginHorizontal: 0,
+    },
+    input: {
+      height: 45,
+      borderColor: '#ccc',
+      borderRadius: 8,
+    },
+    suggestionsContainer: {
+      backgroundColor: '#ffffff',
+      maxHeight: 250,
+    },
+    suggestionItem: {
+      padding: 15,
+    },
+    suggestionText: {
+      main: {
+        fontSize: 16,
+        color: '#333',
+      },
+      secondary: {
+        fontSize: 14,
+        color: '#666',
+      }
+    },
+    loadingIndicator: {
+      color: '#999',
+    },
+    placeholder: {
+      color: '#999',
+    }
+  };
 
-const result = await multiply(3, 7);
+  return (
+    <GooglePlacesTextInput
+      apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+      placeHolderText="Search for a place"
+      onPlaceSelect={handlePlaceSelect}
+      languageCode="en"
+      style={customStyles}
+    />
+  );
+};
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| apiKey | string | Yes | - | Your Google Places API key |
+| value | string | No | '' | Initial input value |
+| placeHolderText | string | No | - | Placeholder text for input |
+| languageCode | string | No | - | Language code (e.g., 'en', 'fr') |
+| 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 |
+| minCharsToFetch | number | No | 1 | Minimum characters before fetching |
+| onPlaceSelect | (place: Place \| null) => void | Yes | - | Callback when place is selected |
+| debounceDelay | number | No | 200 | Delay before triggering search |
+| showLoadingIndicator | boolean | No | true | Show/hide loading indicator |
+| style | StyleProp | No | {} | Custom styles object |
+
+## Methods
+
+The component exposes the following methods through refs:
+
+- `clear()`: Clears the input and suggestions
+- `focus()`: Focuses the input field
+
+```javascript
+const inputRef = useRef(null);
+
+// Usage
+inputRef.current?.clear();
+inputRef.current?.focus();
+```
+
+## Styling
+
+The component accepts a `style` prop with the following structure:
+
+```typescript
+type Styles = {
+  container?: ViewStyle;
+  input?: TextStyle;
+  suggestionsContainer?: ViewStyle;
+  suggestionItem?: ViewStyle;
+  suggestionText?: {
+    main?: TextStyle;
+    secondary?: TextStyle;
+  };
+  loadingIndicator?: {
+    color?: string;
+  };
+  placeholder?: {
+    color?: string;
+  };
+}
+```
 
 ## Contributing
 

example/App.js

@@ -0,0 +1,110 @@
+import { SafeAreaView, StyleSheet, View, Text } from 'react-native';
+import GooglePlacesTextInput from 'react-native-google-places-textinput';
+
+const App = () => {
+  const handleBasicPlaceSelect = (place) => {
+    console.log('Basic example selected place:', place);
+  };
+
+  const handleStyledPlaceSelect = (place) => {
+    console.log('Styled example selected place:', place);
+  };
+
+  // Custom styles example
+  const customStyles = {
+    container: {
+      width: '100%',
+      paddingHorizontal: 16,
+    },
+    input: {
+      height: 50,
+      borderWidth: 1.5,
+      borderColor: '#E0E0E0',
+      borderRadius: 12,
+      paddingHorizontal: 16,
+      fontSize: 16,
+      backgroundColor: '#F8F8F8',
+    },
+    suggestionsContainer: {
+      backgroundColor: '#FFFFFF',
+      borderRadius: 12,
+      marginTop: 8,
+      elevation: 3,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 8,
+    },
+    suggestionItem: {
+      padding: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: '#F0F0F0',
+    },
+    suggestionText: {
+      main: {
+        fontSize: 16,
+        color: '#333333',
+        fontWeight: '500',
+      },
+      secondary: {
+        fontSize: 14,
+        color: '#666666',
+        marginTop: 4,
+      },
+    },
+    loadingIndicator: {
+      color: '#666666',
+    },
+    placeholder: {
+      color: '#999999',
+    },
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Basic Example</Text>
+        <GooglePlacesTextInput
+          apiKey="YOUR_API_KEY_HERE"
+          placeHolderText="Search for a location"
+          onPlaceSelect={handleBasicPlaceSelect}
+          minCharsToFetch={2}
+          languageCode="en"
+        />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Styled Example</Text>
+        <GooglePlacesTextInput
+          apiKey="YOUR_API_KEY_HERE"
+          placeHolderText="Find places nearby"
+          onPlaceSelect={handleStyledPlaceSelect}
+          style={customStyles}
+          minCharsToFetch={2}
+          languageCode="en"
+          debounceDelay={300}
+          types={['restaurant', 'cafe']}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  section: {
+    marginVertical: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 12,
+    marginLeft: 16,
+    color: '#333333',
+  },
+});
+
+export default App;