3

Facing issue in TextInput of react-native-paper ,The label is using line-through effect when I set its background as transparent. How to remove this line-through effect from the label text when the background color is set to transparent, when color is set as white its working fine ,but when I changed the color to transparent,issue arises.

Attached my style code and issue screenshot.

 inputStyleOutlined: {
   minHeight: moderateScale(38.4),
   color: COLORS.secondary,
   fontWeight: FONT_WEIGHT.fontWeight4,
   fontSize: moderateScale(FONT_SIZE.font_14),
   letterSpacing: moderateScale(0.2),
   width: "100%",
   backgroundColor: COLORS.transparent,
 }

enter image description here

Manish Kumar
  • 997
  • 2
  • 13
  • 30

3 Answers3

0

Have you referred this?

https://callstack.github.io/react-native-paper/docs/components/TextInput/TextInputAffix

please check and update enter image description here

komal harmale
  • 28
  • 9
0

From what I've been able to tell, react-native-paper is not designed to handle that. It seems to use the background color to appear on top of the outlined border (where the label is at the top). If we set it to any level of transparency, we can see the border underneath. Your best bet is to pass in a backgroundColor prop and set the backgroundColor explicitly to match whatever background is surrounding it.

Jeff Padgett
  • 2,380
  • 22
  • 34
0

Instead of string, you can pass label like this and add your own styling to it,

<TextInput
  value={value}
  label={
    <Text style={Styles.labelStyle}>{label}</Text>}
  ...
/>
Rohit S K
  • 1,178
  • 3
  • 13