callstack / callstack/react-native-paper

TextInput's text cropped by its borders

Đang mở
#3,867 1 bình luận 1 reaction 0 người được giao Xem trên GitHub
bug TextInput
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

### Current behaviour
Text input's text is cropped by its borders as you can see on screenshots. It's seems like an unexpected behaviour because it also affect react-native-paper-dates library inputs. Problem only affects android version. Also you can see very tall margin bottom in text inputs.

### Expected behaviour
Text input text is displaying properly.

### How to reproduce?

```

input: {
fontSize: 56,
textAlign: 'center',
minWidth: 102,
},
```

I improved it someway by providing padding and to the input.

```
input: {
fontSize: 56,
textAlign: 'center',
paddingTop: Platform.OS === 'ios' ? 0 : 8,
minWidth: 102,
height: 72,
},
```

As you can see on screenshot #2, it looks acceptable.
But I can't do the same to library's components, and it is also very inconvient.
Here's my theme config:

```
const {theme} = useMaterial3Theme({fallbackSourceColor: '#6750A4'});
const {LightTheme, DarkTheme} = adaptNavigationTheme({
reactNavigationLight: NavigationDefaultTheme,
reactNavigationDark: NavigationDarkTheme,
});

const CombinedDefaultTheme = merge(LightTheme, {
...MD3LightTheme,
colors: theme.light,
});
const CombinedDarkTheme = merge(DarkTheme, {
...MD3DarkTheme,
colors: theme.dark,
});
```

### Preview
![photo_2023-05-03_10-11-59 (3)](https://user-images.githubusercontent.com/104892842/235854078-53811656-852f-4678-9bf6-736f15af4b38.jpg)
![photo_2023-05-03_10-17-59](https://user-images.githubusercontent.com/104892842/235854177-1b57d350-fc95-410d-9599-76e5d8f009f1.jpg)
![photo_2023-05-03_10-11-59 (2)](https://user-images.githubusercontent.com/104892842/235853629-f57a02d8-b49b-4a1c-82ac-ffd74c8517cd.jpg)
![photo_2023-05-03_10-11-59](https://user-images.githubusercontent.com/104892842/235853635-39d51659-0a50-4e64-b5e6-05180e91698d.jpg)
![photo_2023-05-03_10-18-28](https://user-images.githubusercontent.com/104892842/235853637-774dc1ef-c109-45b1-9425-49e123bae7bb.jpg)

### What have you tried so far?
I addition to styling input, i tried to change font settings of my app to Sans-serif and Roboto (it's seems like it's a default font on my phone). But it doesn't help too.

### Your Environment

| software | version
| ------------------------| -------
| android | 12
| react-native | 0.71.7
| react-native-paper | ^5.7.0
| node | 16.16.0
| npm | 8.11.0
| expo sdk | ^48.0.0

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện vấn đề với ví dụ TextInput được cung cấp trên Android 12, sử dụng react-native-paper 5.7.0 và phần styling được hiển thị. Kiểm tra implementation của TextInput và hành vi rendering hoặc layout dành riêng cho Android, sau đó xác minh rằng văn bản lớn không còn bị cắt và margin phía dưới quá lớn đã được xử lý mà không yêu cầu thay đổi padding ở phía consumer.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
android, react-native
Lĩnh vực
frontend, mobile
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.