diff --git a/README.md b/README.md index 44317603..da98ed3a 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,61 @@ const Textfield = MKTextField.textfield() placeholder="Enter text to see events" /> ``` +#### customTextInputProps + +Some custom inputs like [react-native-textinput-effects](https://github.com/halilb/react-native-textinput-effects) have to set properties in mount time. For these types of components we use this property. + +```jsx +import React from 'react'; +import { StyleSheet, View } from 'react-native'; + +import { TextInputMask } from 'react-native-masked-text'; +import { Kaede } from 'react-native-textinput-effects'; + +export default class App extends React.Component { + constructor(props) { + super(props) + + this.state = { + birthday: '' + } + } + + render() { + return ( + + this.setState({ birthday })} + value={this.state.birthday} /> + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + } +}); +``` + #### TextInput Props You can use the native props of TextInput, with this in mind: @@ -349,6 +404,8 @@ var money = MaskService.toMask('money', '123', { # Changelog +## 1.6.0 +* Add compatibility to [react-native-textinput-effects](https://github.com/halilb/react-native-textinput-effects) by using `customTextInputProps` (thanks to [Pablo](https://github.com/rochapablo)) ## 1.5.3 * Fix suffix backspace (thanks to [Thomas Kekeisen](https://github.com/blaues0cke)) diff --git a/lib/text-input-mask.js b/lib/text-input-mask.js index e1e08057..91a53f9b 100644 --- a/lib/text-input-mask.js +++ b/lib/text-input-mask.js @@ -8,11 +8,13 @@ import BaseTextComponent from './base-text-component'; const INPUT_TEXT_REF = '$input-text'; let Input = TextInput +let customTextInputProps = {} export default class TextInputMask extends BaseTextComponent { constructor(props) { super(props); if (props.customTextInput) Input = props.customTextInput + if (props.customTextInputProps) customTextInputProps = props.customTextInputProps } getElement() { @@ -52,6 +54,7 @@ export default class TextInputMask extends BaseTextComponent { ref={INPUT_TEXT_REF} keyboardType={this._getKeyboardType()} {...this.props} + {...customTextInputProps} onChangeText={(text) => this._onChangeText(text)} value={this.state.value} /> diff --git a/package.json b/package.json index 10c394bd..c1d70e85 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-masked-text", - "version": "1.5.3", + "version": "1.6.0", "description": "Text and TextInput with mask for React Native applications", "main": "index.js", "scripts": {