Merge branch 'master' into master

Author: peterp

CONTRIBUTORS

@@ -1,3 +1,4 @@
 Federico Martín Alconada Verzini (https://github.com/fedealconada)
 Havens (https://github.com/havenS)
-Michael O'Connor Havens (https://github.com/seeocon)
+Dajaffe (https://github.com/dajaffe)
+Michael O'Connor Havens (https://github.com/seeocon)

README.md

@@ -11,7 +11,7 @@ into a tag when a space or comma is entered.
 ## Installation
 
 ```terminal
-npm install react-native-tags
+npm install --save react-native-tags
 ```
 
 ```terminal
@@ -20,7 +20,7 @@ yarn add react-native-tags
 
 ## Usage
 
-```javascript
+```jsx
 import React from "react";
 import Tags from "react-native-tags";
 
@@ -44,7 +44,8 @@ const UselessComponent = () => (
 | initialTags       | ['the', 'initial', 'tags']           |
 | onChangeTags      | Fires when tags are added or removed |
 | maxNumberOfTags        | integer: up to you (mandatory)          |
-| readonly          | Removes the TextInput                |
+| onTagPress        | Fires when tags are pressed          |
+| readonly          | Tags cannot be modified              |
 | containerStyle    | Style                                |
 | style             | Style (`containerStyle` alias)       |
 | inputStyle        | Style                                |

Tags/Tag.js

@@ -4,15 +4,28 @@ import { View, Text, TextInput, TouchableOpacity } from "react-native";
 
 import styles from "./styles";
 
-const Tag = ({ label, onPress, tagContainerStyle, tagTextStyle }) => (
-  <TouchableOpacity style={[styles.tag, tagContainerStyle]} onPress={onPress}>
-    <Text style={[styles.tagLabel, tagTextStyle]}>{label}</Text>
-  </TouchableOpacity>
-);
+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>
+    )
+  }
+}
 
 Tag.propTypes = {
   label: PropTypes.string.isRequired,
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  readonly: PropTypes.bool
 };
 
 export default Tag;

Tags/index.js

@@ -15,19 +15,6 @@ class Tags extends React.Component {
     };
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (
-      nextProps.initialTags === prevState.initialTags &&
-      nextProps.initialText === prevState.initialText
-    ) {
-      return null;
-    }
-    return {
-      tags: nextProps.initialTags,
-      text: nextProps.initialText
-    };
-  }
-
   componentWillReceiveProps(props) {
     const { initialTags = [], initialText = " " } = props;
 
@@ -92,7 +79,11 @@ class Tags extends React.Component {
           <Tag
             key={i}
             label={tag}
-            onPress={() => this.arraySplice(tag)}
+            onPress={e => {
+                     this.arraySplice(tag)
+                     this.props.onTagPress(i, tag, e)
+                    }}
+            readonly={this.props.readonly}
             tagContainerStyle={this.props.tagContainerStyle}
             tagTextStyle={this.props.tagTextStyle}
           />

Tags/styles.js

@@ -9,7 +9,7 @@ export default StyleSheet.create({
 
   textInputContainer: {
     flex: 1,
-    width: 100,
+    minWidth: 100,
     height: 32,
     margin: 4,
     borderRadius: 16,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tags",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Tag input component for React Native",
   "main": "index.js",
   "scripts": {