diff --git a/README.md b/README.md
index 2fb971c..4c6dc57 100644
--- a/README.md
+++ b/README.md
@@ -41,18 +41,19 @@ const UselessComponent = () => (
## Props
-| PropName | Description | Default |
-| ------------------- | ------------------------------------------ | -------- |
-| initialText | The input element's text | |
-| initialTags | ['the', 'initial', 'tags'] | |
-| onChangeTags | Fires when tags are added or removed | |
-| maxNumberOfTags | The max number of tags that can be entered | infinity |
-| onTagPress | Fires when tags are pressed | |
-| readonly | Tags cannot be modified | false |
-| deleteTagOnPress | Remove the tag when pressed | true |
-| containerStyle | Style | |
-| style | Style (`containerStyle` alias) | |
-| inputContainerStyle | Style | |
-| inputStyle | Style | |
-| tagContainerStyle | Style | |
-| tagTextStyle | Style | |
+| PropName | Description | Default |
+| ------------------- | ------------------------------------------ | --------------- |
+| initialText | The input element's text | |
+| initialTags | ['the', 'initial', 'tags'] | |
+| createTagOnString | Triggers new tag creation | [",", ".", " "] |
+| onChangeTags | Fires when tags are added or removed | |
+| maxNumberOfTags | The max number of tags that can be entered | infinity |
+| onTagPress | Fires when tags are pressed | |
+| readonly | Tags cannot be modified | false |
+| deleteTagOnPress | Remove the tag when pressed | true |
+| containerStyle | Style | |
+| style | Style (`containerStyle` alias) | |
+| inputContainerStyle | Style | |
+| inputStyle | Style | |
+| tagContainerStyle | Style | |
+| tagTextStyle | Style | |
diff --git a/Tags/__tests__/Tags_enzyme-tests.js b/Tags/__tests__/Tags_enzyme-tests.js
index a22c620..280ae38 100644
--- a/Tags/__tests__/Tags_enzyme-tests.js
+++ b/Tags/__tests__/Tags_enzyme-tests.js
@@ -20,6 +20,16 @@ describe("Tags", () => {
expect(onChangeTags.mock.calls).toEqual([[["dog"]], [["dog", "cat"]]]);
});
+ it("should add a new tag when return is pressed", () => {
+ const onChangeTags = jest.fn();
+ const wrapper = shallow(
+
+ ).find("TextInput");
+ wrapper.simulate("ChangeText", "dog");
+ wrapper.simulate("SubmitEditing");
+ expect(onChangeTags.mock.calls).toEqual([[["dog"]]]);
+ });
+
it("should remove a tag when the text is empty", () => {
const onChangeTags = jest.fn();
const wrapper = shallow().find(
diff --git a/Tags/__tests__/__snapshots__/Tags-tests.js.snap b/Tags/__tests__/__snapshots__/Tags-tests.js.snap
index 78e7835..47bdffd 100644
--- a/Tags/__tests__/__snapshots__/Tags-tests.js.snap
+++ b/Tags/__tests__/__snapshots__/Tags-tests.js.snap
@@ -179,6 +179,7 @@ exports[`Tags should render props correctly 1`] = `
{
+ this.setState(
+ {
+ tags: [...this.state.tags, text.trim()],
+ text: " "
+ },
+ () => this.props.onChangeTags && this.props.onChangeTags(this.state.tags)
+ );
+ };
+
onChangeText = text => {
if (text.length === 0) {
// `onKeyPress` isn't currently supported on Android; I've placed an extra
@@ -39,22 +49,23 @@ class Tags extends React.Component {
);
} else if (
text.length > 1 &&
- (text.slice(-1) === " " || text.slice(-1) === ",") &&
+ this.props.createTagOnString.includes(text.slice(-1)) &&
!(this.state.tags.indexOf(text.slice(0, -1).trim()) > -1)
) {
- this.setState(
- {
- tags: [...this.state.tags, text.slice(0, -1).trim()],
- text: " "
- },
- () =>
- this.props.onChangeTags && this.props.onChangeTags(this.state.tags)
- );
+ this.addTag(text.slice(0, -1));
} else {
this.setState({ text });
}
};
+ onSubmitEditing = () => {
+ if (!this.props.createTagOnReturn) {
+ return;
+ }
+
+ this.addTag(this.state.text);
+ };
+
render() {
const {
containerStyle,
@@ -107,6 +118,7 @@ class Tags extends React.Component {
value={this.state.text}
style={[styles.textInput, inputStyle]}
onChangeText={this.onChangeText}
+ onSubmitEditing={this.onSubmitEditing}
underlineColorAndroid="transparent"
/>
@@ -119,6 +131,8 @@ class Tags extends React.Component {
Tags.defaultProps = {
initialTags: [],
initialText: " ",
+ createTagOnString: [",", " "],
+ createTagOnReturn: false,
readonly: false,
deleteOnTagPress: true,
maxNumberOfTags: Number.POSITIVE_INFINITY
@@ -127,6 +141,8 @@ Tags.defaultProps = {
Tags.propTypes = {
initialText: PropTypes.string,
initialTags: PropTypes.arrayOf(PropTypes.string),
+ createTagOnString: PropTypes.array,
+ createTagOnReturn: PropTypes.bool,
onChangeTags: PropTypes.func,
readonly: PropTypes.bool,
maxNumberOfTags: PropTypes.number,
diff --git a/package.json b/package.json
index 2e1d0c9..6f9cba4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-tags",
- "version": "1.5.0",
+ "version": "1.6.0",
"description": "Tag input component for React Native",
"main": "index.js",
"scripts": {