@@ -23,6 +23,7 @@ yarn add react-native-tags
2323
2424``` jsx
2525import React from " react" ;
26+ import { TouchableOpacity , View } from " react-native"
2627import Tags from " react-native-tags" ;
2728
2829const UselessComponent = () => (
@@ -38,26 +39,48 @@ const UselessComponent = () => (
3839 }
3940 containerStyle= {{ justifyContent: " center" }}
4041 inputStyle= {{ backgroundColor: " white" }}
42+ renderTag= {({ tag, index, onPress, deleteTagOnPress, readonly }) => (
43+ < TouchableOpacity key= {` ${ tag} -${ index} ` } onPress= {onPress}>< Text > {tag}< Text >< / TouchableOpacity>
44+ )}
4145 / >
4246);
4347```
4448
49+ ## Render Props
50+
51+ ### ` renderTag `
52+
53+ If you would like to add new functionality or modify the way that the tags are
54+ rendered then pass in a renderTag prop.
55+
56+ | PropName | Description |
57+ | -------- | ------------------------------------------------------------ |
58+ | tag | text of the tag |
59+ | index | position in the array of tags |
60+ | onPress | Removes the tag if ` deleteTagsOnPress ` and readonly is false |
61+
4562## Props
4663
47- | PropName | Description | Default |
48- | ------------------- | ---------------------------------------------------------------------------------------------- | --------------- |
49- | initialText | The input element's text | |
50- | textInputProps | [ forward props to the textInput] ( https://facebook.github.io/react-native/docs/textinput#props ) | |
51- | initialTags | [ 'the', 'initial', 'tags'] | |
52- | createTagOnString | Triggers new tag creation | [ ",", ".", " "] |
53- | onChangeTags | Fires when tags are added or removed | |
54- | maxNumberOfTags | The max number of tags that can be entered | infinity |
55- | onTagPress | Fires when tags are pressed | |
56- | readonly | Tags cannot be modified | false |
57- | deleteTagOnPress | Remove the tag when pressed | true |
58- | containerStyle | Style | |
59- | style | Style (` containerStyle ` alias) | |
60- | inputContainerStyle | Style | |
61- | inputStyle | Style | |
62- | tagContainerStyle | Style | |
63- | tagTextStyle | Style | |
64+ | PropName | Description | Default |
65+ | ----------------- | ---------------------------------------------------------------------------------------------- | --------------- |
66+ | initialText | The input element's text | |
67+ | textInputProps | [ forward props to the textInput] ( https://facebook.github.io/react-native/docs/textinput#props ) | |
68+ | initialTags | [ 'the', 'initial', 'tags'] | |
69+ | createTagOnString | Triggers new tag creation | [ ",", ".", " "] |
70+ | onChangeTags | Fires when tags are added or removed | |
71+ | maxNumberOfTags | The max number of tags that can be entered | infinity |
72+ | onTagPress | Fires when tags are pressed | |
73+ | readonly | Tags cannot be modified | false |
74+ | deleteTagOnPress | Remove the tag when pressed | true |
75+ | renderTag | Manage the rendering of your own ` Tag ` | |
76+
77+ ## Style modification props
78+
79+ | PropName | Description | Default |
80+ | ------------------- | ------------------------------ | ------- |
81+ | style | Style (` containerStyle ` alias) | |
82+ | containerStyle | Style | |
83+ | inputContainerStyle | Style | |
84+ | inputStyle | Style | |
85+ | tagContainerStyle | Style | |
86+ | tagTextStyle | Style | |
0 commit comments