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

Question

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

Hmm i use the same pattern for formatting phone numbers as the user types and havent seen the same issue. How are you creating your styles? Are you using `StyleSheet.create`? — b.stevens.photo, Oct 08 '21 at 17:58
Hi I have solved the problem by adding a font-weight attribute in the style (font-weight:"normal" which is the default value if I'm not mistaken.) So the behaviour is really weird. — EnligthenedOctopus, Oct 26 '21 at 09:31

score 1 · Accepted Answer · edited Oct 27 '21 at 10:08

1

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.

edited Oct 27 '21 at 10:08

Hamed Hajiloo

964
1
10
31

answered Oct 26 '21 at 09:33

EnligthenedOctopus

11
2

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

1 Answers1