callstack / callstack/react-native-paper

TextInput's text cropped by its borders

Abierto
#3,867 1 comentario 1 reacción 0 asignados Ver en GitHub
bug TextInput
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.