Text Label Overlaps Outline

[andrewaclark248]

Current behaviour

This issue was discovered in the following PR. Still seems to persists!!! https://github.com/callstack/react-native-paper/issues/3759

As you can see below the "Area Code" texts overlaps with the text input outline

My code

            <TextInput
                label="Area Code"
                mode="outlined"
            />

[lukewalczak]

Did you use the latest library version (5.10.6)?

[andrewaclark248]

@lukewalczak Yes, I am using the latest library (5.10.6)

[lukewalczak]

Please create a small github repo presenting an issue

[andrewaclark248]

@lukewalczak Below is the issue replciated in a sample repo

https://github.com/andrewaclark248/RNP-Test-Repo-2

[lukewalczak]

Based on the provided code, the issue appears to be related to how you're modifying the colors in the theme. Currently, you have the following code:

const theme = {
  ...MD3LightTheme,
  roundness: 2,
  colors: { 
    primary: 'rgb(29, 27, 30)',
    onPrimary: "white",
    secondary: "rgb(208, 193, 218)",
    onSecondary: "white"
  }
};

This setup means that your theme's color object will have only four properties. I assume that you intended to extend the current theme and use these four colors to override the default values. In that case, you're missing the step of spreading the MD3LightTheme.colors object. Here's the refactored code:

const theme = {
  ...MD3LightTheme,
  roundness: 2,
  colors: { 
    ...MD3LightTheme.colors, // you're missing that line
    primary: 'rgb(29, 27, 30)',
    onPrimary: "white",
    secondary: "rgb(208, 193, 218)",
    onSecondary: "white"
  }
};

[andrewaclark248]

@lukewalczak That solved my issue thanks

[JoshCarse]

This issue is back for custom label components in 5.12.3 but not 5.10.6. If you use a custom label, and even with no theme or the above commented theme it will still cross out the label.