callstack / callstack/react-native-paper

TextInput's text cropped by its borders

Ouverte
#3,867 1 commentaire 1 réaction 0 personnes assignées Voir sur GitHub
bug TextInput
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire le problème avec l’exemple de TextInput fourni sur Android 12, en utilisant react-native-paper 5.7.0 et le style montré. Inspectez l’implémentation de TextInput ainsi que le comportement spécifique à Android du rendu ou de la mise en page, puis vérifiez que les textes de grande taille ne sont plus tronqués et que la marge inférieure excessive est corrigée sans nécessiter de modifications du padding côté consommateur.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
android, react-native
Domaine
frontend, mobile
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.