field values are null but text is still shown

Hi, I have a login form with a validation on it. Once a user passes validation, his credentials are checked on the server side. If the login fails, the component renders an error. I can see that the value state for these fields has been cleared and if I press the submit button again, the tcomb validation fails (as it is supposed to). However, the text is still shown in the text fields.

Here is my code, thanks:

'use strict';

var React = require('react-native');
var tcomb = require('tcomb-form-native');
var I18n = require("../modules/i18n");
var Buttons = require("./buttons");
var LoginActions = require('../actions/login_actions');
var LoginStore = require('../stores/login_store');

var {
  StyleSheet,
  View,
  Text
} = React;

var LoginForm = tcomb.struct({
  email: tcomb.Str,
  password: tcomb.Str
});

var loginOptions = {
  auto: 'placeholders',
  fields: {
    email: {
      keyboardType: 'email-address'
    },
    password: {
      password: true,
      secureTextEntry: true
    }
  }
};

var Form = tcomb.form.Form;
var Login = React.createClass({
  getInitialState() {
    return {
      loginFailed: LoginStore.get("loginFailed"),
      value: {
        email: null,
        password: null
      }
    };
  },

  componentDidMount() {
    LoginStore.addLoginInfoClearedListener(this.resetForm);
    LoginStore.addLoginStartedListener(this.loginToggled);
  },

  componentWillUnmount() {
    LoginStore.removeLoginInfoClearedListener(this.resetForm);
    LoginStore.removeLoginStartedListener(this.loginToggled);
  },

  loginToggled() {
    this.setState({
      loginFailed: LoginStore.get("loginFailed"),
      loginInProcess: LoginStore.get("loginInProcess")
    });
  },

  resetForm() {
    this.loginToggled();
    this.setState({
      value: {
        email: null,
        password: null
      }
    })
  },

  validateForm() {
    var value = this.refs.form.getValue();
    if (value) { LoginActions.login(value); }
  },

  render() {
    return (
      <View style={styles.container}>
        {this.renderLoginFailed()}
        <Form
          ref="form"
          type={LoginForm}
          options={loginOptions}
        />
        <Buttons onPress={this.validateForm} text={"login"} />
        {this.renderLoginInProcess()}
      </View>
    );
  },

  renderLoginFailed() {
    if (this.state.loginFailed) {
      return (
        <Text>Your login credentials are wrong</Text>
      );
    }
  },

  renderLoginInProcess() {
    if (this.state.loginInProcess) {
      return (
        <Text>Login in process...</Text>
      );
    }
  }
});

var styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    marginTop: 60,
    padding: 20,
    backgroundColor: '#ffffff',
  },
  title: {
    fontSize: 30,
    alignSelf: 'center',
    marginBottom: 30
  }
});

module.exports = Login;

gcanti / tcomb-form

field values are null but text is still shown #183