enhanced tags

src/components/basicUIElements/view/chip/chipStyle.js

@@ -1,19 +1,39 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
-  textInput: {
+  wrapper: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
     color: '$primaryBackgroundColor',
-    fontSize: 10,
     backgroundColor: '#c1c5c7',
     borderRadius: 50,
-    height: 20,
+    height: 25,
     padding: 5,
     paddingHorizontal: 10,
     minWidth: 50,
     marginRight: 8,
+  },
+  textInput: {
     fontFamily: '$editorFont',
+    fontSize: 10,
   },
   isPin: {
     backgroundColor: '$primaryBlue',
   },
+  removeIcon: {
+    marginLeft: 5,
+    width: 25,
+    height: 25,
+    borderRadius: 25 / 2,
+    position: 'absolute',
+    right: 2,
+  },
+  iconStyle: {
+    color: '$primaryLightGray',
+  },
+  textInputWithButton: {
+    marginRight: 15,
+  },
 });

src/components/basicUIElements/view/chip/chipView.js

@@ -1,18 +1,30 @@
-import React, { Fragment } from 'react';
+import React from 'react';
+import { View } from 'react-native';
 import { TextInput } from '../../../textInput';
+import { IconButton } from '../../../iconButton';
 
 import styles from './chipStyle';
 
 const Chip = props => (
-  <Fragment>
+  <View style={[styles.wrapper, props.isPin && styles.isPin]}>
     <TextInput
+      style={[styles.textInput, props.removeButton && styles.textInputWithButton]}
       allowFontScaling
-      style={[styles.textInput, props.isPin && styles.isPin]}
       onChangeText={text => props.handleOnChange(text)}
       onBlur={() => props.handleOnBlur()}
       {...props}
     />
-  </Fragment>
+    {props.removeButton && (
+      <IconButton
+        style={styles.removeIcon}
+        iconStyle={styles.iconStyle}
+        size={16}
+        iconType="MaterialIcons"
+        name="close"
+        onPress={props.handleOnRemoveButtonPress && props.handleOnRemoveButtonPress}
+      />
+    )}
+  </View>
 );
 
 export default Chip;

src/components/editorElements/tagArea/view/tagAreaView.js

@@ -106,6 +106,8 @@ export default class TagAreaView extends Component {
               }}
               isPin={i === 0 && chips[1]}
               placeholderTextColor="#fff"
+              removeButton={i !== 0}
+              handleOnRemoveButtonPress={() => this._handleTagRemove(i)}
               editable={!isPreviewActive}
               maxLength={50}
               placeholder="tags"