Formvalidation not working

Version

Tell us which versions you are using:

• tcomb-form-native master-branch
• react-native v0.23.1

Expected behaviour

Error message that field is empty

Actual behaviour

RegisterDetails.js page opens without validating the form of Register.js. There are no error messages

Steps to reproduce

I splitted the Form and started creating a FormLoader.

this is my FormLoader.js

export default class FormLoader extends React.Component {
    propTypes : {
        formType: PropTypes.string,
        form: PropTypes.object,
        style: Form.propType.style,
        value: PropTypes.object,
        onChange: PropTypes.func
    };

    render() {


        let options = {
            auto: 'none',
            fields: {},
            state: '',

        };

        let usernameOpt = {
            placeholder: 'Username',
            hasError: false,
            error: 'Please enter a Username'
        };

        let passwordOpt = {
            placeholder: 'Passwort',
            password: true,
            hasError: false,
            error: 'Please enter Password'
        };

        var max3 = s => s.length <= 3;
        var username = t.refinement(t.String, s=> max3(s));

        username.getValidationErrorMessage = s => {
            if(!s){
                return 'We need a name to proceed!';
            }
            if(!max3(s)){
                return 'test test test';
            }
        };

        let formType = this.props.formType;
        switch (formType) {
            case(REGISTER):
                formLoader = t.struct({
                    username: username,
                    password: t.String,
                });
                options.fields['username'] = usernameOpt;
                options.fields['password'] = passwordOpt;
                break;
        }

        return (
            <Form ref="form"
                  type={formLoader}
                  options={options}
                  value={this.props.value}
                  onChange={this.props.onChange}
                  isValid={true}
            />
        );
    }
}

and this is my Register.js

...
import {Actions} from "react-native-router-flux";
import FormLoader from "../../lib/FormLoader";
...

export default class Register extends React.Component {
    constructor() {
        super();
        this.onChange = this.onChange.bind(this);
        this.state = {
            user: {}
        }
    }

    _continueRegistration() {
        Actions.registerDetails(value);
    }

    onChange(value) {
        this.state.user = value;
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.input}>
                    <FormLoader ref="form"
                                formType={REGISTER}
                                value={this.state.user}
                                onChange={this.onChange}
                    />
                    <Button onPress={this._continueRegistration.bind(this)}>Continue</Button>
                </View>
            </View>
        );
    }
}

I would be happy if anyone can help me here…

[alvaromb]

With a custom refinement

const PasswordMinLength = t.refinement(t.String, value => {
  return value.length > 6
})
// Validate repeat password
const ConfirmPasswordEquality = t.refinement(t.String, value => {
  return value === this.state.value.password
})

const Form = t.struct({
  password: PasswordMinLength,
  confirm_password: ConfirmPasswordEquality,
})

Remember to save your Form state into the value object.

[alvaromb]

Inside FormLoader:

...
getValue () {
  return this.refs.form.getValue()
}
...