callstack / callstack/react-native-paper

Input component labels in outlined mode need some work

Open
#4,235 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour

1. When background and primary are close to each other we are not able to style text-color of labels on input-components separately from primary color in theme. It's weird that primary is used both in backgrounds and texts without escape hatches.
2. When placing a **rounded** `` with `mode="outlined"` and `outlineStyle={{borderColor:'transparent'}}` on a elevated ``, then the backgroundColor of the label gets a weird shape.

### Expected behaviour

I expect:
- The rounding of the input to hide the label background
- The label background to be styleable without creating a label element
- Each of the inputs parts to have to have escapeHatches for styling, such as these props, or a style function that takes it's state(focused, normal, disabled) `labelStyle`, `activeLabelStyle`, `inputStyle`, `activeInputStyle`,

### How to reproduce?

https://snack.expo.dev/t8WLJwSQ6

### Preview

### **Background is dark to show low contrast between background and primary text**
![IMG_2656](https://github.com/callstack/react-native-paper/assets/457653/25b938a3-03e3-4468-a8b6-a8d9c6035d76)
### **Background is set to red to highlight the weird shape of the label**
![IMG_2655](https://github.com/callstack/react-native-paper/assets/457653/9780026f-bb2e-45e4-b97d-7bcb872d1402)

### What have you tried so far?

Creating custom label components without getting it to work consistently across platforms (android & iOS)
### Your Environment

| software | version
| --------------------- | -------
| ios | 17.1.2
| android | 13
| react-native | 0.72.1
| react-native-paper | 5.11.4
| node | 18.13.0
| npm or yarn | 9.6.3
| expo sdk | any/not-applicable/47 in snack

Contributor guide

Open the contributing guide

Research direction

Start with the linked Snack reproduction and the outlined, rounded TextInput rendered on a Surface. Trace how the TextInput label background and colors are handled across focused and normal states on Android and iOS. Done means the rounded label background is visually correct and label and input colors can be styled independently through the component API.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
design, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.