[Android] Label not floating on first focus

[CoteViande]

When focusing an empty field, label would trigger both floatLabel() and sinkLabel() at the same time.

I don't know if this comes from non proper initialization of my Field, however I managed to fix it doing by editing TextFIeld.js and changing:

componentWillReceiveProps(nextProps: Object){
    if(this.props.text !== nextProps.value){
     [...]
    }
  }

to

componentWillReceiveProps(nextProps: Object){
    if(this.props.text !== undefined && this.props.text !== nextProps.value){
     [...]
    }
  }

[andrejunges]

I had the same issue, your solution worked 👍

[antoinerousseau]

same issue, but isn't it just a typo? props.text => state.text

why use a state anyway? why not just check current vs next props? cc @evblurbs

[rodrigocipriani]

@CoteViande Better this way

`

componentWillReceiveProps(nextProps: Object) {

if(this.props.text !== undefined && this.props.text !== nextProps.value){
    nextProps.value.length !== 0 ? this.refs.floatingLabel.floatLabel() : this.refs.floatingLabel.sinkLabel();
}

if (this.props.text !== nextProps.value) {
    this.setState({text: nextProps.value});
}

if (this.props.height !== nextProps.height) {
    this.setState({height: nextProps.height});
}

} `

Because when you clear input value by coding, animation starts in wrong moment. Sorry my english

[CoteViande]

I did not consider this case. Looks good :)

[niconistal]

I have the same issue, @rodrigocipriani solution worked! Any idea when this will be fixed? Can I help with something?

[antoinerousseau]

fyi I recreated my own simplified text input component inspired by this one, since I found this one buggy and not simple enough. feel free to check it out: MaterialTextField.js

[GitHubTracey]

Although bad practice for a maintained library, this hasn't seen action in a year, but is still pretty useful, so I used this function to override at runtime, and placed it at the top of my file after library definitions, where I used TextField:

//... import react-native items etc...
var TextField =  require("react-native-md-textinput").default;

//...

TextField.prototype.componentWillReceiveProps = function (nextProps) {
    if(this.props.text !== undefined && this.props.text !== nextProps.value){
        nextProps.value.length !== 0 ? this.refs.floatingLabel.floatLabel() : this.refs.floatingLabel.sinkLabel();
    }
    if (this.props.text !== nextProps.value) {
        this.setState({text: nextProps.value});
    }
    if (this.props.height !== nextProps.height) {
        this.setState({height: nextProps.height});
    }
};

The reason being that if you need to drop the node_modules, you won't have to re-add the code back in again later. Teaming Win! (Also reaaaaaaally bad programming practice here... but since this project isn't maintained, and I don't have time to deal with a fork, we take what we can get, right?)