Improved example with validation, Fixed some bugs

Fixed some bugs and improved example with validation

Author: marcocesarato

Example/App.js

@@ -7,7 +7,7 @@ export default class App extends Component {
     constructor(props){
         super(props);
 
-        this.input = [];
+        this.textInput = [];
 
         this.state = {
             value: "Example of string",
@@ -17,13 +17,12 @@ export default class App extends Component {
     }
 
     render(){
-        this.input = [];
         return (
             <ScrollView style={styles.container}>
                 <Text style={styles.title}>Example{"\n"}react-native-input-validator</Text>
                 <TextInput
                     onRef={(r) => {
-                        this.input.push(r);
+                        this.textInput[0] = r;
                     }}
                     value={this.state.value}
                     style={styles.input}
@@ -32,7 +31,7 @@ export default class App extends Component {
                 </TextInput>
                 <TextInput
                     onRef={(r) => {
-                        this.input.push(r);
+                        this.textInput[1] = r;
                     }}
                     value={this.state.valueRequired}
                     required={true}
@@ -42,7 +41,7 @@ export default class App extends Component {
                 </TextInput>
                 <TextInput
                     onRef={(r) => {
-                        this.input.push(r);
+                        this.textInput[2] = r;
                     }}
                     value={this.state.value}
                     style={styles.input}
@@ -52,7 +51,7 @@ export default class App extends Component {
                 </TextInput>
                 <TextInput
                     onRef={(r) => {
-                        this.input.push(r);
+                        this.textInput[3] = r;
                     }}
                     value={this.state.valueNumber}
                     style={styles.input}
@@ -63,12 +62,14 @@ export default class App extends Component {
                 <TouchableOpacity
                     style={styles.button}
                     onPress={() => {
-                        this.input.map((item) => {
-                           console.log(item);
+                        console.log(this.textInput);
+                        this.textInput.map((item, i) => {
+                           console.log("TextInput " + i, item.isValid());
                         });
                     }}>
                     <Text>Validate</Text>
                 </TouchableOpacity>
+                <Text>Check validation on console.</Text>
             </ScrollView>
         );
     }

Example/package.json

@@ -12,7 +12,7 @@
     "react": "16.8.3",
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
-    "react-native-input-validator": "^1.0.7",
+    "react-native-input-validator": "^1.0.9",
     "react-native-web": "^0.11.4",
     "validator": "^11.1.0"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-input-validator",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "React native input with floating label and data validation",
   "main": "index.js",
   "scripts": {

src/InputValidator.js

@@ -31,6 +31,9 @@ class InputValidator extends Component {
      * @param prevState
      */
     componentDidUpdate(prevProps, prevState) {
+        if(typeof this.props.onRef === 'function') {
+            this.props.onRef(this._isMounted ? this : undefined);
+        }
         const props_value = this.parseValue(this.props.value);
         const state_value = this.parseValue();
         if (this.props.value == null){
@@ -45,6 +48,7 @@ class InputValidator extends Component {
      * Component did mount
      */
     componentDidMount() {
+        this._isMounted = true;
         if(typeof this.props.onRef === 'function') {
             this.props.onRef(this);
         }
@@ -54,7 +58,8 @@ class InputValidator extends Component {
     /**
      * Component did unmount
      */
-    componentDidUnmount() {
+    componentWillUnmount() {
+        this._isMounted = false;
         if(typeof this.props.onRef === 'function') {
             this.props.onRef(undefined);
         }
@@ -373,6 +378,7 @@ class InputValidator extends Component {
         }
 
         delete props.children;
+        delete props.onRef;
         delete props.ref;
 
         if (props.editable === false) {