callstack / callstack/react-native-paper

Multiline TextInput backgroundColor does not fully cover surface

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

描述

### Current behaviour
Multiline TextInput background color does not cover all the surface on iOS if background color have opacity.

### Expected behaviour
Multiline TextInput background color should cover all the surface on iOS.

### How to reproduce?
https://snack.expo.dev/@konstantin_bonn/textinput

### Preview
![Снимок экрана 2024-07-30 в 17 16 33](https://github.com/user-attachments/assets/156fb7dd-6ea3-4ff0-8607-9b7224bed635)

### What have you tried so far?
Try to apply contentStyle with the same color, but it just got worse.
Works fine if comment background in this workaround for iOS

```
{!isAndroid && multiline && !!label && !disabled && (
// Workaround for: https://github.com/callstack/react-native-paper/issues/2799
// Patch for a multiline TextInput with fixed height, which allow to avoid covering input label with its value.

)}
```

### Your Environment

| software | version
| --------------------- | -------
| ios | 17.2
| react-native | "0.73.6"
| react-native-paper | "^5.12.3"
| node | v20.5.0
| yarn | 1.22.19

贡献指南

打开贡献指南

调研方向

从链接的 Expo Snack 复现开始,检查 iOS 上 multiline TextInput 的渲染,包括所示的 patch-container workaround 及其对 backgroundColor 的处理。将受影响的半透明背景情况与预期完全覆盖的表面进行比较,然后使用该复现验证 iOS 上的行为。

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

评估

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

把新 issue 发到你的邮箱

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