Question 32889 in React native Question posted in
The official React Native documentation can be found here.

Facing issue in TextInput of react-native-paper ,the label is using line-through effect when I set its background as transparent – React native

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

Tags:

3

Answers


  2. 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.

    Login or Signup to reply.
  3. 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>}
  ...
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search