Allow text input container to be styled.

Author: peterp

README.md

@@ -40,17 +40,18 @@ 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)             |          |
-| inputStyle        | Style                                      |          |
-| tagContainerStyle | Style                                      |          |
-| tagTextStyle      | Style                                      |          |
+| 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                                      |          |

Tags/__tests__/__snapshots__/Tags-tests.js.snap

@@ -172,6 +172,7 @@ exports[`Tags should render props correctly 1`] = `
           "margin": 4,
           "minWidth": 100,
         },
+        undefined,
       ]
     }
   >

Tags/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { View, Text, TextInput, TouchableOpacity } from "react-native";
+import { View, TextInput, ViewPropTypes } from "react-native";
 
 import Tag from "./Tag";
 import styles from "./styles";
@@ -65,7 +65,8 @@ class Tags extends React.Component {
       onTagPress,
       readonly,
       maxNumberOfTags,
-      inputStyle
+      inputStyle,
+      inputContainerStyle
     } = this.props;
 
     return (
@@ -101,7 +102,7 @@ class Tags extends React.Component {
 
         {!readonly &&
           maxNumberOfTags > this.state.tags.length && (
-            <View style={[styles.textInputContainer]}>
+            <View style={[styles.textInputContainer, inputContainerStyle]}>
               <TextInput
                 value={this.state.text}
                 style={[styles.textInput, inputStyle]}
@@ -127,14 +128,15 @@ Tags.propTypes = {
   initialText: PropTypes.string,
   initialTags: PropTypes.arrayOf(PropTypes.string),
   onChangeTags: PropTypes.func,
-  containerStyle: PropTypes.object,
-  style: PropTypes.object,
-  inputStyle: PropTypes.object,
-  tagContainerStyle: PropTypes.object,
-  tagTextStyle: PropTypes.object,
   readonly: PropTypes.bool,
   maxNumberOfTags: PropTypes.number,
-  deleteOnTagPress: PropTypes.bool
+  deleteOnTagPress: PropTypes.bool,
+  containerStyle: ViewPropTypes.style,
+  style: ViewPropTypes.style,
+  inputContainerStyle: ViewPropTypes.style,
+  inputStyle: ViewPropTypes.style,
+  tagContainerStyle: ViewPropTypes.style,
+  tagTextStyle: ViewPropTypes.style
 };
 
 export { Tag };

package.json

@@ -14,8 +14,8 @@
   "author": "Peter Pistorius <peter.pistorius@gmail.com> (http://github.com/peterp/)",
   "license": "MIT",
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+    "react": ">= 16.0",
+    "react-native": ">= 0.44"
   },
   "devDependencies": {
     "babel-jest": "^22.4.3",