callstack / callstack/react-native-paper

Weird UI behavior of Text Input with Dark Mode

Ouverte
#3,122 14 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
repro provided TextInput
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

### Current behaviour

With Dark Mode on, some Text Input outlined are ok, others with same code have a white line on the label.
![photo5879971770990180747](https://user-images.githubusercontent.com/30288622/158751699-fd016729-c370-4d06-9b77-54ef7ca59dd5.jpg)
![photo5879971770990180746](https://user-images.githubusercontent.com/30288622/158751706-9841bbc1-22b8-4e0d-a2bb-3547eca67a15.jpg)

The code is the same for "Nome Garage*" and "Email":
```
setGarageDoc({...garageDoc, name: text})}
/>
```
```
setGarageDoc({ ...garageDoc, email: text })}
/>
```

The started value is undefined for both, I tried to change the order, modify the style, change the label name with so many tries and I still can't understand what is causing this behaviour.

This behaviour is shared in all part of my application where there is a Text Input oulined.

### Expected behaviour

I'd expect to not have a white line on Text Input label outlined in dark mode.

### Code sample

```




setGarageDoc({...garageDoc, name: text})}
/>
setGarageDoc({ ...garageDoc, email: text })}
/>


```
### What have you tried

This behaviour is all
### Your Environment

| software | version
| --------------------- | -------
| ios or android | android
| react-native | 0..67.3
| react-native-paper | 4.11.2
| node | 14.x
| npm or yarn | yarn
| expo sdk | no

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire le comportement décrit de TextInput en mode sombre sur Android avec react-native-paper 4.11.2, en utilisant les deux exemples de labels et le code SafeAreaView/Card fourni. Comparez le rendu des deux champs et inspectez l’implémentation de TextInput ainsi que le style lié au thème. Le travail est terminé lorsque les labels outlined sont rendus de manière cohérente, sans ligne blanche en mode sombre.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.