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

Research direction

Start by reproducing the issue with the provided TextInput example on Android 12, using react-native-paper 5.7.0 and the shown styling. Inspect the TextInput implementation and Android-specific rendering or layout behavior, then verify that large text is no longer cropped and the excessive bottom margin is resolved without requiring consumer padding changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, react-native
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.