diff --git a/readme.md b/readme.md
index 513fead8..582b8daf 100644
--- a/readme.md
+++ b/readme.md
@@ -89,6 +89,7 @@ _onChange => form => console.log(form);
|validColor | PropTypes.string | Color that will be applied for valid text input. Defaults to: "{inputStyle.color}" |
|invalidColor | PropTypes.string | Color that will be applied for invalid text input. Defaults to: "red" |
|placeholderColor | PropTypes.string | Color that will be applied for text input placeholder. Defaults to: "gray" |
+| additionalInputsProps | PropTypes.objectOf(TextInput.propTypes) | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in [RN TextInput](https://facebook.github.io/react-native/docs/textinput.html).
#### NOTES
LiteCreditCardInput does not support `requiresName`, `requiresCVC`, and `requiresPostalCode` at the moment, PRs are welcome :party:
@@ -118,6 +119,7 @@ LiteCreditCardInput does not support `requiresName`, `requiresCVC`, and `require
|validatePostalCode | PropTypes.func | Function to validate postalCode, expects `incomplete`, `valid`, or `invalid` as return values|
|allowScroll | PropTypes.bool | enables horizontal scrolling on CreditCardInput
Defaults to `false` |
|cardBrandIcons | PropTypes.object | brand icons for CardView. see `./src/Icons.js` for details |
+| additionalInputsProps | PropTypes.objectOf(TextInput.propTypes) | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in [RN TextInput](https://facebook.github.io/react-native/docs/textinput.html).
##CardView
@@ -136,6 +138,23 @@ LiteCreditCardInput does not support `requiresName`, `requiresCVC`, and `require
|imageBack | PropTypes.number | Image for the credit-card |
|customIcons | PropTypes.object | brand icons for CardView. see `./src/Icons.js` for details |
+#### Note on additionalInputsProps
+
+additionalInputsProps gives you more control over the inputs in LiteCreditCardInput and CreditCardInput. An example object is as follows:
+```javascript
+addtionalInputProps = {
+ name: {
+ defaultValue: 'my name',
+ maxLength: 40,
+ },
+ postalCode: {
+ returnKeyType: 'go',
+ },
+};
+```
+
+The above would set the default value of the name field to `my name` and limit the input to a maximum of 40 character. In addition, it would set the returnKeyType of the postalcode field to `go`.
+
# Methods
## setValues
Set values into credit card form
diff --git a/src/CCInput.js b/src/CCInput.js
index 1c7cc77c..5ac05bfa 100644
--- a/src/CCInput.js
+++ b/src/CCInput.js
@@ -34,6 +34,7 @@ export default class CCInput extends Component {
onChange: PropTypes.func,
onBecomeEmpty: PropTypes.func,
onBecomeValid: PropTypes.func,
+ additionalInputProps: PropTypes.shape(TextInput.propTypes),
};
static defaultProps = {
@@ -48,6 +49,7 @@ export default class CCInput extends Component {
onChange: () => {},
onBecomeEmpty: () => {},
onBecomeValid: () => {},
+ additionalInputProps: {},
};
componentWillReceiveProps = newProps => {
@@ -66,13 +68,15 @@ export default class CCInput extends Component {
render() {
const { label, value, placeholder, status, keyboardType,
containerStyle, inputStyle, labelStyle,
- validColor, invalidColor, placeholderColor } = this.props;
+ validColor, invalidColor, placeholderColor,
+ additionalInputProps } = this.props;
return (
{ !!label && {label}}
this._focus(this.props.focused);
@@ -113,6 +117,7 @@ export default class CreditCardInput extends Component {
inputStyle, labelStyle, validColor, invalidColor, placeholderColor,
placeholders, labels, values, status,
onFocus, onChange, onBecomeEmpty, onBecomeValid,
+ additionalInputsProps,
} = this.props;
return {
@@ -127,6 +132,8 @@ export default class CreditCardInput extends Component {
status: status[field],
onFocus, onChange, onBecomeEmpty, onBecomeValid,
+
+ additionalInputProps: additionalInputsProps[field],
};
};
diff --git a/src/LiteCreditCardInput.js b/src/LiteCreditCardInput.js
index 5c25f856..0810e40d 100644
--- a/src/LiteCreditCardInput.js
+++ b/src/LiteCreditCardInput.js
@@ -6,6 +6,7 @@ import {
Image,
LayoutAnimation,
TouchableOpacity,
+ TextInput,
} from "react-native";
import Icons from "./Icons";
@@ -75,6 +76,8 @@ export default class LiteCreditCardInput extends Component {
validColor: PropTypes.string,
invalidColor: PropTypes.string,
placeholderColor: PropTypes.string,
+
+ additionalInputsProps: PropTypes.objectOf(PropTypes.shape(TextInput.propTypes)),
};
static defaultProps = {
@@ -86,6 +89,7 @@ export default class LiteCreditCardInput extends Component {
validColor: "",
invalidColor: "red",
placeholderColor: "gray",
+ additionalInputsProps: {},
};
componentDidMount = () => this._focus(this.props.focused);
@@ -108,6 +112,7 @@ export default class LiteCreditCardInput extends Component {
inputStyle, validColor, invalidColor, placeholderColor,
placeholders, values, status,
onFocus, onChange, onBecomeEmpty, onBecomeValid,
+ additionalInputsProps,
} = this.props;
return {
@@ -120,6 +125,7 @@ export default class LiteCreditCardInput extends Component {
status: status[field],
onFocus, onChange, onBecomeEmpty, onBecomeValid,
+ additionalInputProps: additionalInputsProps[field],
};
};