2

I am using the TextInput of React Native Paper (https://callstack.github.io/react-native-paper/text-input.html)

Is there a way to not show the label on the border line when we are focusing on a TextInput?

  <TextInput
                mode="outlined"
                label="Email"
                value={email}
                onChangeText={email => setEmail(email)}
                theme={{ colors: { primary: APP_COLORS.primary }}}
                selectionColor={APP_COLORS.primary}
                outlineColor={APP_COLORS.grey_low}
                left={<TextInput.Icon name={() => <AntDesign name="mail" size={22} color="black" />} />}
            />

enter image description here

colla
  • 717
  • 1
  • 10
  • 22

1 Answers1

0

The label "Email" in black in your picture appears to come from another component not included in your code snippet.

If you wish to keep the "Email" label in black, remove the "Email" label in red, but retain the outlined style of the TextInput, you can simply remove the label key of the component:

<TextInput
    mode="outlined"
    value={email}
    onChangeText={email => setEmail(email)}
    theme={{
        colors: { primary: APP_COLORS.primary }
    }}
    selectionColor={APP_COLORS.primary}
    outlineColor={APP_COLORS.grey_low}
    left={
        <TextInput.Icon name={() =>
            <AntDesign
                name="mail"
                size={22}
                color="black"
            />
        }/>
    }
/>
VengefulJalapeno
  • 71
  • 6
  • Thank for your answer, but I would like to remove the email label which is pink in the picture only when it is in focus. Is it possible? – colla Dec 05 '22 at 08:31
  • In react-native-paper 4.12.5, the email label in pink only appears when it is in focus. By removing the label key on the TextInput component, it no longer shows the pink label when it is in focus. Are you looking to display the pink label when it is not in focus? Is there an issue with removing the label key? You can use the placeholder key if you want to display a placeholder text. – VengefulJalapeno Dec 06 '22 at 00:33