callstack / callstack/react-native-paper

Multiline TextInput label is not visible in flat mode

Offen
#4,756 2 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
TypeScript
Sterne
14.5k
Forks
2.2k
Ø Merge
5 T. 23 Std.
Gemergte PRs (30 T.)
12

Beschreibung

## Bug Report Template

**Current Behaviour**
When focusing into a TextInput, in when `mode="flat"`, the label disappears. The label displays correctly when `multiline=false`, and this issue only occurs on iOS. This occured in the latest version (5.14.5), and also in 5.14.1.

Also, it seems like some letters like letter "i" in this "Uwagi" word is also cut by the same overlay.

**Expected Behaviour**
The label should be scaled down and visible as usual when the TextInput is focused, regardless of multiline setting or platform.

**How to Reproduce**

1. Use react-native-paper version 5.14.5.
2. Render a TextInput, with following settings on iOS.
- mode = "flat"
- mutliline = true
- label = "I am test field"
``
5. Focus the TextInput.
6. Observe that the label disappears.

_Screenshots:_

Screenshot 2024-08-21 at 14 10 38

Screenshot 2024-08-21 at 14 10 44

The "i" cut in "Uwagi" word,

![Image](https://github.com/user-attachments/assets/09a85913-0475-4256-84cf-455c1177380f)

**What Have You Tried So Far?**
I tried doing the same thing [as he did](https://github.com/callstack/react-native-paper/issues/4482), but it is not working.

### Your Environment

| software | version
| --------------------- | -------
| ios | 18.4
| android | x
| react-native | 0.79.2
| react-native-paper | 5.14.5
| node | 22
| npm or yarn | pnpm
| expo sdk | 53

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start by reproducing the issue with the React Native Paper TextInput entry point using mode="flat" and multiline on iOS, then compare the focused label behavior with multiline=false. Add a regression test for the iOS multiline flat-mode case; done means the scaled label remains visible and letters are not clipped when focused.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.