callstack / callstack/react-native-paper

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

Aperta
#4,805 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
bug
Lingua principale
TypeScript
Stelle
14.5k
Fork
2.2k
Merge medio
5g 23h
PR unite (30g)
12

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.