CODEWITHSUNDEEP
react-native
Suv
Suv

Reputation: 21

How to change the label color of a react-native-material-textfield?

<TextField
              label={"Full Name"}
              autoFocus={true}
              lineWidth={3}
              activeLineWidth={3}
              baseColor={"red"}
              labelTextStyle={{color:"grey"}}
              textColor={"grey"}`enter code here`
            />

Currently labelTextStyle={{color:"black"}} does not work

Upvotes: 0

Views: 6025

Answers (2)

Rakhshanda khan
Rakhshanda khan

Reputation: 31

If you are using the library "react-native-material-textfield", then to change the color of the label you need to use 'baseColor' property. By using this property, I resolved my issue to change the color of the label. Below is my code snippet, 

    <TextField
          label = 'USERNAME/MOBILENO'
          tintColor = '#51bc8a'
          value = {username}
          textColor = '#51bc8a'
          baseColor = '#FFFFFF'
          onChangeText = { (username) => this.setState({ username }) }
    />

Upvotes: 3

Parker Ziegler
Parker Ziegler

Reputation: 1020

The labelTextStyle prop does work properly. Check out this example Snack. Your issue here is that this prop does not control the color of the label itself. That gets controlled by the baseColor (when the field is not active) or by the tintColor prop (when the field is active). textColor controls the color of the text input, but not the label.

Upvotes: 0

Related Questions