Search code examples
react-nativereact-native-textinputreact-native-stylesheet

Adding a value to a TextInput changes the font-weight for some reason


I'm trying to format the date while the user is typing but when I add the value field (value={this.state.dob}) the style changes for a bolder font-weight (and sometimes changes for the right font weight mid typing). It really seems to come from the value field I tried adding it to other Input from this page and it does the same thing.

  <TextInput
        placeholder="JJ/MM/AAAA"
        keyboardType={'number-pad'}
        onChangeText={(text) => this._onChangeDate(text)}
        name="dob"
        style={styles.textBox}
        value={this.state.dob} //Just removing this work but I can't liveformat the date anymore 
        maxLength={10}
   />

_onChangeDate = (value) => {
    this.setState({
        dob: this.liveFormatDate(value),
    })  

}

liveFormatDate returns a string add slashes when needed discards letters and so on

How it looks right now

How it should look like (when there are 6 characters it looks like this) I didn't modify the code between the two screeshots


Solution

  • The solution was to add the weight attribute in the style (font-weight: "normal"). Though I don't know why the font weight was changing constantly I don't know what was causing this.