There are no reviews yet. Be the first to send feedback to the community and the maintainers!
Repository Details
Tag input component for React Native
React-Native-Tags
A React Native component that allows you to input text and formats the text
into a tag when a space or comma is entered. Tapping on the tag will remove it.
Installation
npm install --save react-native-tags
yarn add react-native-tags
Usage
importReactfrom"react";import{TouchableOpacity,Text}from"react-native";importTagsfrom"react-native-tags";constMyTagInput=()=>(<TagsinitialText="monkey"textInputProps={{placeholder: "Any type of animal"}}initialTags={["dog","cat","chicken"]}onChangeTags={tags=>console.log(tags)}onTagPress={(index,tagLabel,event,deleted)=>console.log(index,tagLabel,event,deleted ? "deleted" : "not deleted")}containerStyle={{justifyContent: "center"}}inputStyle={{backgroundColor: "white"}}renderTag={({ tag, index, onPress, deleteTagOnPress, readonly })=>(<TouchableOpacitykey={`${tag}-${index}`}onPress={onPress}><Text>{tag}</Text></TouchableOpacity>)}/>);
Render Props
renderTag
If you would like to add new functionality or modify the way that the tags are
rendered then pass in a renderTag prop.
PropName
Description
tag
text of the tag
index
position in the array of tags
onPress
Removes the tag if deleteTagsOnPress and readonly is false