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], }; };