callstack / callstack/react-native-paper
TextInput's text cropped by its borders
- 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





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