Merge pull request #1 from kyo504/apply-working-code

Apply working code

README.md

@@ -1 +1,64 @@
-# react-native-taginput
+
+## react-native-taginput
+
+Tag input component fro React Native
+
+## ChangeLog
+- v0.1.0
+ - Initial working version
+
+## Installation
+
+1. Run `npm install react-native-taginput --save`
+2. `import TagInput from 'react-native-taginput`
+
+## Basic usage
+
+```javascript
+import TagInput from 'react-native-taginput';
+
+class App extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <TagInput
+          ref='tagInput'
+          initialTags={initialTags}
+          suggestions={this.state.data.suggestions}
+          containerStyle={styles.taginput}
+          onChange={this._onChange.bind(this)}
+          onUpdateLayout={this._onUpdateLayout.bind(this)}
+        />
+      </View>
+    );
+  }
+}
+```
+
+## Examples
+
+> Add example link
+
+## Props
+
+| Prop | Type | Description |
+:------------ |:---------------:| :-----|
+| initialTags | array | |
+| suggestions | array | |
+| containerStyle | style |  |
+| inputContainerStyle | style |  |
+| listStyle | style |  |
+| placeholder | string |  |
+| onUpdateTags | function | |
+| onUpdateLayout | function | |
+
+
+## Contribution
+**Issues** and **Pull requests** are welcome. Please add a screenshot of bug and code snippet.
+
+## About
+This is inspired by [react-native-autocomplete-input](https://github.com/l-urence/react-native-autocomplete-input).
+
+---
+
+**MIT Licensed**

Tag.js

@@ -1,68 +1,48 @@
-
-
-import React, { Component } from 'react';
+import React, { PropTypes } from 'react';
 import {
   StyleSheet,
   View,
   Text,
-  TouchableWithoutFeedback
+  TouchableHighlight,
 } from 'react-native';
 
-class Tag extends Component {
-
-  static propTypes = {
-    text: React.PropTypes.string.isRequired,
-    onPress: React.PropTypes.func,
-  }
-
-  static defaultProps = {
-    text: 'none',
-    onPress: () => {},
-  }
+const Tag = ({
+  text,
+  tagContainer,
+  onPress,
+}) => {
+  const styles = StyleSheet.create({
+    container: {
+      justifyContent: 'center',
+      backgroundColor: 'gray',    
+      paddingHorizontal: 5,
+      margin: 2,
+      borderRadius: 3,
+      height:20,
+    },
+    text: {
+      fontSize: 10,
+      color: '#ffffff'
+    },
+  })
+
+  return (
+    <TouchableHighlight style={[styles.container, tagContainer]} onPress={onPress}>
+      <Text style={styles.text}>{text}</Text>
+    </TouchableHighlight>
+  );
+}
 
-  render() {    
-    return (
-      <View style={[styles.container, ]}>
-        <Text style={styles.text}>{this.props.text}</Text>
-        <TouchableWithoutFeedback onPress={() => this.props.onPress()}>
-          <View style={styles.delete}>
-            <Text style={styles.deleteText}>X</Text>
-          </View>
-        </TouchableWithoutFeedback>
-      </View>
-    )
-  }
+Tag.propTypes = {
+  text: PropTypes.string,
+  tagContainer: View.propTypes.style,
+  onPress: PropTypes.func,
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    backgroundColor: 'gray',    
-    paddingHorizontal: 5,
-    margin: 5,
-    borderRadius: 5,
-    alignItems: 'center',
-    height:30,
-  },
-  text: {
-    fontSize: 16,
-    color: '#ffffff'
-  },
-  delete: {
-    justifyContent:'center',
-    alignItems: 'center',
-    width: 14,
-    height: 14,
-    borderColor: 'white',
-    borderWidth: 0.5,
-    borderRadius: 7,
-    right:0,
-    marginLeft:5,
-  },
-  deleteText: {
-    fontSize: 12,
-    color: '#ffffff'
-  }
-});
+Tag.defaultProps = {
+  text: 'none',
+  tagContainer: null,
+  onPress: () => {},
+}
 
-export default Tag;
+export default Tag;