callstack / callstack/react-native-paper

iOS SegmentedButtons display color issue with decreased/increased phone text size

Abierto
#4,805 1 comentario 0 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

### Current behaviour

When changing the text size of my phone, certain text sizes cause a break in the background and border color in the SegmentedButtons component.

### Expected behaviour

Consistent SegmentedButtons styling no matter which phone text size is being used.

### How to reproduce?

On iOS: Settings > Accessibility > Display & Text Size > Larger Text
Select one of the following text size options:
Image
Image

Implementation:
```

```

### Preview

The button on the left has a band of lighter color, whether selected or not:

Image

Image

### What have you tried so far?

Explicitly setting a button labelStyle with the following (does not work for all phone text size options):
```
const { fontScale } = Dimensions.get('window');

const baseFontSize = theme.fonts.bodyMedium.fontSize || 14;
```
```
labelStyle: [styles.buttonLabel, { fontSize: Math.max(12, baseFontSize * fontScale) }]
```
```
const styles = StyleSheet.create({
buttonLabel: {
includeFontPadding: true,
textAlign: 'center',
textAlignVertical: 'center',
},
});
```

### Your Environment

| software | version
| --------------------- | -------
| ios | 18.6.2
| react-native | ^0.75.5
| react-native-paper | ^5.14.5

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.