react-native-masked-text - npm Package Compare versions

Comparing version 1.5.3 to 1.6.0

lib/text-input-mask.js

@@ -11,2 +11,3 @@ import React, { Component } from 'react';
 let Input = TextInput
+let customTextInputProps = {}
 
@@ -17,2 +18,3 @@ export default class TextInputMask extends BaseTextComponent {
 		if (props.customTextInput) Input = props.customTextInput
+		if (props.customTextInputProps) customTextInputProps = props.customTextInputProps
 	}
@@ -57,2 +59,3 @@
 				{...this.props}
+				{...customTextInputProps}
 				onChangeText={(text) => this._onChangeText(text)}
@@ -59,0 +62,0 @@ value={this.state.value}

package.json

 {
   "name": "react-native-masked-text",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "Text and TextInput with mask for React Native applications",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -123,2 +123,57 @@ # react-native-masked-text
 
+#### 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 (
+      <View style={styles.container}>
+        <TextInputMask
+          ref={'myDateText'}
+          // here we set the custom component and their props.
+          customTextInput={Kaede}
+          customTextInputProps={{
+            style:{ width: '80%' },
+            label:'Birthday'
+          }}
+
+          type={'datetime'}
+          options={{
+            format: 'DD-MM-YYYY HH:mm:ss'
+          }}
+
+          // don't forget: the value and state!
+          onChangeText={birthday => this.setState({ birthday })}
+          value={this.state.birthday} />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+});
+```
+
 #### TextInput Props
@@ -353,2 +408,4 @@
 # 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))
 
@@ -355,0 +412,0 @@ ## 1.5.3

No alert changes

Improved metrics

Total package byte prevSize

62627

increased by2.79%

Lines of code

1458

increased by0.21%

Number of lines in readme file

467

increased by13.9%

No dependency changes