API Reference

Core Props

Prop	Type	Default	Description
tags	ITags	required	Current tags state object
updateState	(tags: ITags) => void	required	Function to update tags state
keysForTag	string	' '	Character(s) that trigger tag creation
suggestions	string[]	[]	Array of suggestions for autocomplete
label	string	undefined	Label text shown above the input
placeholder	string	'Enter tags...'	Input placeholder text
maxTags	number	undefined	Maximum number of tags allowed
disabled	boolean	false	Disable the input

Types

ITags Interface

interface ITags {
  tag: string;          // Current input value
  tagsArray: string[];  // Array of created tags
}

Event Props

Prop	Type	Description
onTagPress	(index: number, tag: string) => void	Called when a tag is pressed
onTagDelete	(index: number, tag: string) => void	Called when a tag is deleted
onFocus	() => void	Called when input is focused
onBlur	() => void	Called when input loses focus
onChangeText	(text: string) => void	Called when input text changes

Style Props

Prop	Type	Description
containerStyle	StyleProp<ViewStyle>	Main container style
inputContainerStyle	StyleProp<ViewStyle>	Input wrapper style
inputStyle	StyleProp<TextStyle>	Input text style
tagStyle	StyleProp<ViewStyle>	Tag container style
tagTextStyle	StyleProp<TextStyle>	Tag text style
deleteIconStyles	StyleProp<ImageStyle>	Delete icon style
labelStyle	StyleProp<TextStyle>	Label text style

Autocomplete Props

Prop	Type	Default	Description
maxSuggestions	number	5	Maximum suggestions to show
highlightMatchedText	boolean	false	Highlight matched text
caseSensitive	boolean	false	Case-sensitive matching
showAutocompleteBorder	boolean	true	Show borders between suggestions
autocompleteSuggestionStyle	StyleProp<ViewStyle>	-	Suggestion item style
autocompleteSuggestionTextStyle	StyleProp<TextStyle>	-	Suggestion text style

Custom Rendering Props

Prop	Type	Description
renderTag	(tag: string, index: number, onDelete: () => void) => ReactNode	Custom tag renderer
renderDeleteButton	(onDelete: () => void, tag: string, index: number) => ReactNode	Custom delete button
renderSuggestion	(suggestion: string, index: number, isHighlighted: boolean, onPress: () => void) => ReactNode	Custom suggestion renderer

Methods

Access these methods via a ref:

interface TagInputMethods {
  focus(): void;
  blur(): void;
  clear(): void;
  addTag(tag: string): void;
  removeTag(index: number): void;
  getTags(): string[];
}

Example usage:

const tagInputRef = useRef<TagInputMethods>(null);

// Later in your code
tagInputRef.current?.focus();