react-native-input-suggestion

react-native-input-suggestion / Suggestion Input

A customizable React Native text input component that suggests and auto-fills text from a given suggestion string. It supports drag-to-fill, tap-to-fill, and auto-suggestion with various customization options like colors, styles, and fill modes.

---

✨ Features

• 🔍 Real-time suggestion and auto-fill as user types.
• 🔁 Two fill modes: textPress (tap) and textDrag (drag).
• 🎨 Fully customizable styles and colors.
• ⚖️ Configurable case-sensitivity.
• 🧹 Easily integrable in any form or input field.

---

📦 Installation

npm install react-native-suggestion-input
# or
yarn add react-native-suggestion-input

---

🧹 Usage Example

import React, { useState } from 'react';
import { View } from 'react-native';
import SuggestionInput from 'react-native-suggestion-input';

const App = () => {
  const [text, setText] = useState('');

  return (
    <View style={{ padding: 20 }}>
      <SuggestionInput
        value={text}
        onChangeText={setText}
        suggestion="Ants are tiny but their bite is strong"
        inputTextColor="black"
        suggestionTextColor="gray"
        placeholder="Type here..."
        textStyle={{ fontSize: 16, fontWeight: '500' }}
        fillType="textDrag"
        caseSensitive={false}
        containerStyle={{ borderColor: '#aaa', borderWidth: 1 }}
        showFillButton={true}
        maxLength={50}
      />
    </View>
  );
};

export default App;

---

⚙️ Props

Prop	Type	Default	Description
value	string	—	The current value of the input field.
onChangeText	(text: string) => void	—	Callback when text changes.
suggestion	string	—	Suggestion text to match and fill.
inputTextColor	string	'black'	Color of the user-entered text.
suggestionTextColor	string	'gray'	Color of the suggestion text.
placeholder	string	'Type here…'	Placeholder for the input.
textStyle	TextStyle	—	Style for the text input and suggestion.
fillType	'textPress' | 'textDrag'	'textPress'	Fill mode: tap or drag to fill.
caseSensitive	boolean	false	If true, matches suggestion case-sensitively.
containerStyle	ViewStyle	—	Style for the outer container.
showFillButton	boolean	false	Show a "Fill" button next to suggestion text.
...TextInputProps	TextInputProps	—	All other native TextInput props like maxLength, keyboardType, etc.

---

🧠 Benefits

• Improves data entry speed and accuracy.
• Mimics Gmail-style tab-to-complete experience.
• Enhances user experience with visual feedback and suggestion clarity.
• Allows full control over fill behavior, style, and interaction mode.

---

🧑‍💻 Author

Made with ❤️ by Antos Maman

• GitHub: @antosmamanktr
• Email: [e-mail]

---

📄 License

MIT License