callstack / callstack/react-native-paper
TextInput's text cropped by its borders
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### 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
Contributor guide
Assessment
This issue has not been assessed yet.