feat: support TextInput props passthrough and suggestion text display control

Author: amitpdev

README.md

@@ -16,6 +16,8 @@ A customizable React Native TextInput component for Google Places Autocomplete u
 - Extended place details fetching (Optional)
 - Compatible with both Expo and non-Expo projects
 - Works with Expo Web
+- Supports all TextInput props (autoCapitalize, keyboardType, etc.)
+- Control suggestion text display (lines, ellipsis)
 
 ## Preview
 
@@ -201,6 +203,37 @@ const PlaceDetailsExample = () => {
 ```
 </details>
 
+<details>
+<summary>Example with TextInput props and suggestion text control</summary>
+
+```javascript
+const CustomizedExample = () => {
+  const handlePlaceSelect = (place) => {
+    console.log('Selected place:', place);
+  };
+
+  return (
+    <GooglePlacesTextInput
+      apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+      onPlaceSelect={handlePlaceSelect}
+      // TextInput props
+      autoCapitalize="words"
+      autoCorrect={false}
+      keyboardType="default"
+      returnKeyType="search"
+      textContentType="location"
+      // Limit suggestion text to single line with ellipsis
+      suggestionTextProps={{
+        mainTextNumberOfLines: 1,
+        secondaryTextNumberOfLines: 1,
+        ellipsizeMode: 'tail',
+      }}
+    />
+  );
+};
+```
+</details>
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -235,6 +268,10 @@ const PlaceDetailsExample = () => {
 | hideOnKeyboardDismiss | boolean | No | false | Hide suggestions when keyboard is dismissed |
 | scrollEnabled | boolean | No | true | Enable/disable scrolling in the suggestions list |
 | nestedScrollEnabled | boolean | No | true | Enable/disable nested scrolling for the suggestions list |
+| suggestionTextProps | SuggestionTextProps | No | {} | Control suggestion text display (lines, ellipsis). [Details](./docs/styling-guide.md#suggestion-text-display-control) |
+| accessibilityLabels | GooglePlacesAccessibilityLabels | No | {} | Custom accessibility labels |
+| **TextInput Props** |
+| ...restProps | TextInputProps | No | - | All TextInput props supported. [Details](./docs/styling-guide.md#textinput-props-support) |
 | **Error Handling & Debugging** |
 | onError | (error: any) => void | No | - | Callback when API errors occur |
 | enableDebug | boolean | No | false | Enable detailed console logging for troubleshooting |
@@ -326,7 +363,7 @@ type Styles = {
 }
 ```
 
-For detailed styling examples and a complete guide, see our [Styling Guide](./docs/styling-guide.md).
+For detailed styling examples, TextInput props usage, and suggestion text control, see our [Styling Guide](./docs/styling-guide.md).
 
 ## Contributing
 

docs/styling-guide.md

@@ -320,6 +320,99 @@ The component automatically handles RTL layouts based on the text direction. You
 />
 ```
 
+## TextInput Props Support
+
+All standard React Native `TextInput` props are supported and can be passed directly to the component:
+
+```javascript
+<GooglePlacesTextInput
+  apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+  onPlaceSelect={handlePlaceSelect}
+  // TextInput props
+  autoCapitalize="words"
+  autoCorrect={false}
+  keyboardType="default"
+  returnKeyType="search"
+  textContentType="location"
+  autoFocus={true}
+  maxLength={100}
+  editable={true}
+/>
+```
+
+**Common TextInput props:**
+- `autoCapitalize` - Control auto-capitalization behavior
+- `autoCorrect` - Enable/disable auto-correction
+- `keyboardType` - Set keyboard type (default, email-address, numeric, phone-pad, etc.)
+- `returnKeyType` - Customize the return key (done, search, next, go, etc.)
+- `textContentType` - Optimize keyboard suggestions (iOS: location, streetAddressLine1, etc.)
+- `autoFocus` - Auto-focus the input on mount
+- `maxLength` - Limit input length
+- `editable` - Make the input read-only
+- `secureTextEntry`, `multiline`, `selectTextOnFocus`, and many more
+
+See the [React Native TextInput documentation](https://reactnative.dev/docs/textinput#props) for a complete list.
+
+## Suggestion Text Display Control
+
+Control how suggestion text is displayed using the `suggestionTextProps` prop:
+
+```typescript
+type SuggestionTextProps = {
+  mainTextNumberOfLines?: number;        // Max lines for place name
+  secondaryTextNumberOfLines?: number;   // Max lines for address
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+}
+```
+
+### Example: Single-line suggestions
+
+```javascript
+<GooglePlacesTextInput
+  apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+  onPlaceSelect={handlePlaceSelect}
+  suggestionTextProps={{
+    mainTextNumberOfLines: 1,
+    secondaryTextNumberOfLines: 1,
+    ellipsizeMode: 'tail',
+  }}
+/>
+```
+
+### Example: Two-line place name, one-line address
+
+```javascript
+<GooglePlacesTextInput
+  apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+  onPlaceSelect={handlePlaceSelect}
+  suggestionTextProps={{
+    mainTextNumberOfLines: 2,
+    secondaryTextNumberOfLines: 1,
+    ellipsizeMode: 'tail',
+  }}
+/>
+```
+
+### Example: Middle ellipsis
+
+```javascript
+<GooglePlacesTextInput
+  apiKey="YOUR_GOOGLE_PLACES_API_KEY"
+  onPlaceSelect={handlePlaceSelect}
+  suggestionTextProps={{
+    mainTextNumberOfLines: 1,
+    ellipsizeMode: 'middle', // "Very Long Pla...staurant Name"
+  }}
+/>
+```
+
+**Use cases:**
+- Limit vertical space usage in compact UIs
+- Prevent long place names/addresses from wrapping
+- Create a cleaner, more uniform suggestion list
+- Control where the ellipsis appears
+- Or allow unlimited lines by omitting `numberOfLines`
+
 ## Combining with Other Style Systems
 
 If you're using a styling library like styled-components or Tailwind, you can still use this component by generating the style object:

src/GooglePlacesTextInput.tsx

@@ -93,9 +93,34 @@ interface GooglePlacesAccessibilityLabels {
   suggestionItem?: (prediction: PlacePrediction) => string;
 }
 
-type TextInputInheritedProps = Pick<TextInputProps, 'onFocus' | 'onBlur'>;
+interface SuggestionTextProps {
+  /**
+   * Maximum number of lines for the main text (place name)
+   * @default undefined (no limit)
+   */
+  mainTextNumberOfLines?: number;
+  /**
+   * Maximum number of lines for the secondary text (address)
+   * @default undefined (no limit)
+   */
+  secondaryTextNumberOfLines?: number;
+  /**
+   * Determines how text is truncated when it exceeds the number of lines
+   * @default 'tail'
+   */
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+}
 
-interface GooglePlacesTextInputProps extends TextInputInheritedProps {
+interface GooglePlacesTextInputProps
+  extends Omit<
+    TextInputProps,
+    | 'value'
+    | 'onChangeText'
+    | 'ref'
+    | 'style'
+    | 'placeholder'
+    | 'placeholderTextColor'
+  > {
   apiKey: string;
   value?: string;
   placeHolderText?: string;
@@ -124,6 +149,7 @@ interface GooglePlacesTextInputProps extends TextInputInheritedProps {
   onError?: (error: any) => void;
   enableDebug?: boolean;
   accessibilityLabels?: GooglePlacesAccessibilityLabels;
+  suggestionTextProps?: SuggestionTextProps;
 }
 
 interface GooglePlacesTextInputRef {
@@ -173,6 +199,8 @@ const GooglePlacesTextInput = forwardRef<
       onFocus,
       onBlur,
       accessibilityLabels = {},
+      suggestionTextProps = {},
+      ...restTextInputProps
     },
     ref
   ) => {
@@ -524,6 +552,8 @@ const GooglePlacesTextInput = forwardRef<
               style.suggestionText?.main,
               getTextAlign(),
             ]}
+            numberOfLines={suggestionTextProps.mainTextNumberOfLines}
+            ellipsizeMode={suggestionTextProps.ellipsizeMode || 'tail'}
           >
             {mainText.text}
           </Text>
@@ -534,6 +564,8 @@ const GooglePlacesTextInput = forwardRef<
                 style.suggestionText?.secondary,
                 getTextAlign(),
               ]}
+              numberOfLines={suggestionTextProps.secondaryTextNumberOfLines}
+              ellipsizeMode={suggestionTextProps.ellipsizeMode || 'tail'}
             >
               {secondaryText.text}
             </Text>
@@ -594,6 +626,7 @@ const GooglePlacesTextInput = forwardRef<
       <View style={[styles.container, style.container]}>
         <View>
           <TextInput
+            {...restTextInputProps}
             ref={inputRef}
             style={[styles.input, style.input, getPadding(), getTextAlign()]}
             placeholder={placeHolderText}
@@ -767,6 +800,7 @@ export type {
   PlacePrediction,
   PlaceStructuredFormat,
   GooglePlacesAccessibilityLabels,
+  SuggestionTextProps,
 };
 
 export default GooglePlacesTextInput;

src/index.ts

@@ -11,4 +11,6 @@ export type {
   GooglePlacesTextInputProps,
   GooglePlacesTextInputRef,
   GooglePlacesTextInputStyles,
+  GooglePlacesAccessibilityLabels,
+  SuggestionTextProps,
 } from './GooglePlacesTextInput';