React-native-paper: No way to change underline focused color on TextInput without affecting other colors

[lamecksilva]

I tried to change the cursor color in the textinput but it appears to underline, how to disable the underline? or leave it transparent?

[satya164]

Can you give some more info on what you did?

[lamecksilva]

I want remove this underline color from text input, but the prop "underlineColor" is not working

[raajnadar]

underlineColor prop is for text input when it is inactive.

[ferrannp]

Right now the underline when focused uses this logic:

https://github.com/callstack/react-native-paper/blob/master/src/components/TextInput.js#L547-L549

The problem is that you cannot change only that color without affecting the whole TextInput. Moreover, we need more docs on all this, see #775.

[tinni95]

still no solution for this??
I would like my textInput to have a customized underline color when focused, cannot change the purple, is there a way to change globally the color used by this plugin??

[poptocrack]

Any update on this issue?

[douglasjunior]

How to remove the underline without affect text colors?

[satya164]

If you don't want a material design themed input, use the input from React Native and apply the styling you want https://facebook.github.io/react-native/docs/textinput

[douglasjunior]

I just don't want to have the "underline", but the animated label and everything else I'd like to have.

Unfortunately not every design follows 100% of Material Design. (I have never worked on a project that follow 100% of the recommendations)

To whom it may concern, to "hide" the underline I followed this workaround.

const styles = StyleSheet.create({
    inputContainer: {
        borderRadius: 4,
        height: 55,
        overflow: 'hidden',
    },
    input: {
        borderRadius: 0,
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        height: 57,
        overflow: 'hidden',
        backgroundColor: '#fff',
    },
};
...
<View style={styles.inputContainer}>
       <TextInput
            mode="flat"
            label="Username"
            style={styles.input}
        />
</View>

Note that Input is 2 pixels bigger than View.

[react-native-copy-right]

You can use theme={{
colors: {
primary: color,
}
}}

[EhtishamAli786]

I just don't want to have the "underline", but the animated label and everything else I'd like to have.

Unfortunately not every design follows 100% of Material Design. (I have never worked on a project that follow 100% of the recommendations)

To whom it may concern, to "hide" the underline I followed this workaround.

const styles = StyleSheet.create({
    inputContainer: {
        borderRadius: 4,
        height: 55,
        overflow: 'hidden',
    },
    input: {
        borderRadius: 0,
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        height: 57,
        overflow: 'hidden',
        backgroundColor: '#fff',
    },
};
...
<View style={styles.inputContainer}>
       <TextInput
            mode="flat"
            label="Username"
            style={styles.input}
        />
</View>

Note that Input is 2 pixels bigger than View.

I know its not answer, but it solves

[notmarinho]

To change the Underline and Label color when focused, you need to pass the props theme, like this:

        <TextInput
            label='Password'
            underlineColor='#fff'
            theme={{colors: {text: 'green', primary: 'yellow'}}}
          />

• _Text_ is to change the values that you put in the input
• _Primary_ is to change the underline and the label color

[ilhamsa1]

any update?

[tinni95]

The problem

To change the Underline and Label color when focused, you need to pass the props theme, like this:

        <TextInput
            label='Password'
            underlineColor='#fff'
            theme={{colors: {text: 'green', primary: 'yellow'}}}
          />

• _Text_ is to change the values that you put in the input
• _Primary_ is to change the underline and the label color

the problem is when I want to have two different colors for the label and the underline when focused, which apparently is not possible 👎

[tinni95]

My workaround has been the following :

<TextInput label='Email' value={email} placeholder={"email"} onChangeText={text => setEmail(text)} style={{ backgroundColor: "white" }} selectionColor={Colors.primary} underlineColor={"white"} /> <View style={{ marginTop: -2,borderTopColor: "white", borderTopWidth: 10 }} />

I basically added a view after the textinput with the desired borderTopColor to cover the undesired one from the textinput

[jkjellan]

Following EhtishamAli786's advice (i.e. setting overflow: 'hidden'), but instead setting bottom margin of TextInput to -2 also works to hide the underline when in focus

[Evilbits]

+1 also looking for a way to solve this issue.

[belgamo]

I think changing only the underline color breaks the material's guidelines. But, here is a possible solution.

[douglasjunior]

I think changing only the underline color breaks the material's guidelines. But, here is a possible solution.

I never worked on a project that follows 100% of material design guildelines. There will always be something that needs to be customized.

The question is: In React Native we do not have the option to override a CSS class as we do on the web, so it is important that libraries offer a certain level of customization.

A simple property that allows customization of the style is enough.

[AbdelkhalekESI]

In addition to @douglasjunior solution, I have added a negative marginBottom value -3 to the text input and that's works perfectly!

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[xchwarze]

This issue is already open... please aprove https://github.com/callstack/react-native-paper/pull/1797 for close this

[dcangulo]

I need to hide the underline color as I will replace it with the progress bar.

Adding theme={{ colors: { primary: 'transparent' } }} will remove the underline but also the label which is not intended.

Here is my use case:
https://snack.expo.io/@dcangulo/password-with-progress-bar

[wobsoriano]

I need to hide the underline color as I will replace it with the progress bar.

Adding theme={{ colors: { primary: 'transparent' } }} will remove the underline but also the label which is not intended.

Here is my use case:
https://snack.expo.io/@dcangulo/password-with-progress-bar

Any update?

[rhuankarlus]

There isn't a way to completely remove the underline? Even with a container with hidden overflow I really need vertically grouped inputs with no underline at all.

[renanborgez]

The solution from @mateusmarinho1999 works very nicely, but feels kinda hacky for me. We are chaging the primary color of the input, and what if something else now/or in future start using the primary color?

Ideally some way to specifically change the color of the underline would be better

[xchwarze]

this is fixed in https://github.com/callstack/react-native-paper/pull/1797

[HassanHaiderIX]

this is fixed in #1797

is this working?

[renanborgez]

this is fixed in #1797

is this working?

@HassanHaiderIX
Yes, I'm currently using this on my code and works like a charm

[HassanHaiderIX]

this is fixed in #1797

is this working?

@HassanHaiderIX
Yes, I'm currently using this on my code and works like a charm

Sorry for being naive but I dont see that PR being merged. I am not sure
how can I hide underline color

[renanborgez]

this is fixed in #1797

is this working?

@HassanHaiderIX
Yes, I'm currently using this on my code and works like a charm

Sorry for being naive but I dont see that PR being merged. I am not sure
how can I hide underline color

sorry, I was not clear
I'm using but not from the release channel, I've just implemented that PR by myself on my code