Undefined is not an object (evaluating '_react.PropTypes.string')

[anteburazer]

Hi @perscrew

I followed the documentation from the readme file. This is the error I got: Undefined is not an object (evaluating '_react.PropTypes.string').

Do you have any idea what's going on here? I suppose that this package imports PropTypes from react and not from prop-types.

I use react-native v0.48.3 and react v16.0.0-beta.5

Thanks

[fcostaprojects]

Hi @anteburazer, @perscrew

React in version 16.0.0 moved the Prop Type to a separate package.

Temporary solution:

node_modules/react-native-form-validator/index.js

import React, { Component, PropTypes } from 'react';

replace to

import React, { Component } from 'react';
import PropTypes from 'prop-types';

node_modules/react-native-form-validator/package.json ..... .... "dependencies": { ........ "prop-types" : "15.6.0" }

After update, in terminal =$ npm install

Hi @perscrew, please update this version of react-native-form-validator, to new version the react-native

Thanks

[gregseed]

Any clue when this will be fixed?

[fcostaprojects]

Hi @gregseed, was fixed in PR #8, but not yet generated new release version.

[harshada-bhanose]

When will the fix be available?

[ghost]

import React, { Component } from 'react'; import { View, Text, TextInput, TouchableHighlight } from 'react-native'; import ValidationComponent from '../../validator/index';

export default class App extends ValidationComponent {

constructor(props) { super(props); // this.state = {name : "My name", email: "[email protected]", number:"56", date: "2017-03-01"}; this.state = { name: "", email: "", number: "", date: "" }; }

_onPressButton = () => { this._validateForm(); }; onChangeTextName = (text) => { this.setState({ name: text }); this.validate({ name: { minlength: 3, maxlength: 7, required: true } });

} onChangeTextEmail = (text) => { this.setState({ email: text }); this.validate({ email: { email: true } });

} onChangeTextDigit = (text) => { this.setState({ number: text }); this.validate({ number: { numbers: true } });

} onChangeTextDate = (text) => { this.setState({ date: text }); this.validate({ date: { date: 'YYYY-MM-DD' } });

}

_validateForm() { this.validate({ name: { minlength: 3, maxlength: 7, required: true }, email: { email: true }, number: { numbers: true }, date: { date: 'YYYY-MM-DD' } }); }

render() {

return (
  <View style={{ paddingVertical: 30 }}>
    <Text>Name</Text>
    <TextInput ref="name" onChangeText={(name) => this.onChangeTextName(name)} value={this.state.name} />
    <Text>{(this.isFieldInError('name') && this.getErrorsInField('name'))?this.getErrorsInField('name'):''}</Text>

    <Text>Email</Text>
    <TextInput ref="email" onChangeText={(email) => this.onChangeTextEmail(email)} value={this.state.email} />
    <Text>{(this.isFieldInError('email') && this.getErrorsInField('email'))?this.getErrorsInField('email'):''}</Text>
    <Text>Number</Text>
    <TextInput ref="number" onChangeText={(number) => this.onChangeTextDigit(number)} value={this.state.number} />
    <Text>{(this.isFieldInError('number') && this.getErrorsInField('number'))?this.getErrorsInField('number'):''}</Text>
    <Text>DoB</Text>
    <TextInput ref="date" onChangeText={(date) => this.onChangeTextDate(date)} value={this.state.date} />
    <Text>{(this.isFieldInError('date') && this.getErrorsInField('date'))?this.getErrorsInField('date'):''}</Text>
   
    <TouchableHighlight onPress={this._onPressButton}>
      <Text>Submit</Text>
    </TouchableHighlight>

    
  </View>
);

}

}

[ghost]

Use this _onPressButton = () => { this.validate({ name: { minlength: 3, maxlength: 7, required: true }, email: { email: true }, number: { numbers: true }, date: { date: 'YYYY-MM-DD' } }); }

Instead of _onPressButton(){ this.validate({ name: { minlength: 3, maxlength: 7, required: true }, email: { email: true }, number: { numbers: true }, date: { date: 'YYYY-MM-DD' } }); }