Merge pull request #35 from peterp/pp-add-tag-render-prop

Add ability to render tags with a render prop.

Author: peterp

.babelrc

@@ -1,3 +1,3 @@
 language: node_js
 node_js:
-  - "6"
+  - "10"

.travis.yml

@@ -23,9 +23,10 @@ yarn add react-native-tags
 
 ```jsx
 import React from "react";
+import { TouchableOpacity, Text } from "react-native";
 import Tags from "react-native-tags";
 
-const UselessComponent = () => (
+const MyTagInput = () => (
   <Tags
     initialText="monkey"
     textInputProps={{
@@ -38,26 +39,50 @@ const UselessComponent = () => (
     }
     containerStyle={{ justifyContent: "center" }}
     inputStyle={{ backgroundColor: "white" }}
+    renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
+      <TouchableOpacity key={`${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 |
+
 ## Props
 
-| PropName            | Description                                                                                    | Default         |
-| ------------------- | ---------------------------------------------------------------------------------------------- | --------------- |
-| initialText         | The input element's text                                                                       |                 |
-| textInputProps      | [forward props to the textInput](https://facebook.github.io/react-native/docs/textinput#props) |                 |
-| 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                                                                                          |                 |
+| PropName          | Description                                                                                    | Default         |
+| ----------------- | ---------------------------------------------------------------------------------------------- | --------------- |
+| initialText       | The input element's text                                                                       |                 |
+| textInputProps    | [forward props to the textInput](https://facebook.github.io/react-native/docs/textinput#props) |                 |
+| 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            |
+| renderTag         | Manage the rendering of your own `Tag`                                                         |                 |
+
+## Style modification props
+
+| PropName            | Description                    | Default |
+| ------------------- | ------------------------------ | ------- |
+| style               | Style (`containerStyle` alias) |         |
+| containerStyle      | Style                          |         |
+| inputContainerStyle | Style                          |         |
+| inputStyle          | Style                          |         |
+| tagContainerStyle   | Style                          |         |
+| tagTextStyle        | Style                          |         |

README.md

@@ -1,31 +1,20 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { View, Text, TextInput, TouchableOpacity } from "react-native";
+import { Text, TouchableOpacity } from "react-native";
 
 import styles from "./styles";
 
-const Tag = ({ label, onPress, tagContainerStyle, tagTextStyle, readonly }) => {
-  const tagText = <Text style={[styles.tagLabel, tagTextStyle]}>{label}</Text>;
-
-  if (readonly) {
-    return (
-      <View style={[styles.tag, tagContainerStyle]}>
-        {tagText}
-      </View>
-    )
-  } else {
-    return (
-      <TouchableOpacity style={[styles.tag, tagContainerStyle]} onPress={onPress}>
-        {tagText}
-      </TouchableOpacity>
-    )
-  }
-}
+const Tag = ({ label, onPress, tagContainerStyle, tagTextStyle }) => {
+  return (
+    <TouchableOpacity style={[styles.tag, tagContainerStyle]} onPress={onPress}>
+      <Text style={[styles.tagLabel, tagTextStyle]}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
 
 Tag.propTypes = {
   label: PropTypes.string.isRequired,
-  onPress: PropTypes.func,
-  readonly: PropTypes.bool
+  onPress: PropTypes.func.isRequired
 };
 
 export default Tag;

Tags/Tag.js

@@ -1,5 +1,7 @@
 import React from "react";
 import renderer from "react-test-renderer";
+import { Text } from "react-native";
+
 import Tags from "../../";
 
 describe("Tags", () => {
@@ -18,6 +20,24 @@ describe("Tags", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  describe("renderTag prop", () => {
+    it("allows me to render a custom tag with a function", () => {
+      const renderTag = jest.fn(({ tag }) => <Text key={tag}>{tag}</Text>);
+
+      const tree = renderer
+        .create(
+          <Tags
+            initialText=""
+            initialTags={["palm", "oil", "sucks"]}
+            onChangeTags={noop}
+            renderTag={renderTag}
+          />
+        )
+        .toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
   describe("textInputProps", () => {
     const tree = renderer
       .create(