callstack / callstack/react-native-paper

Weird UI behavior of Text Input with Dark Mode

未关闭
#3,122 14 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
repro provided TextInput
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

### 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

贡献指南

打开贡献指南

调研方向

首先,使用 react-native-paper 4.11.2 在 Android 上复现所述的 TextInput 深色模式行为,并使用两个标签示例和提供的 SafeAreaView/Card 代码。比较两个输入框的渲染效果,并检查 TextInput 的实现和与主题相关的样式。当 outlined 标签在深色模式下能够一致地渲染且没有白线时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native
领域
mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。