callstack / callstack/react-native-paper

TextInput's text cropped by its borders

Open
#3,867 1 comment 1 reaction 0 assignees View on GitHub
bug TextInput
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
![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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.