callstack / callstack/react-native-paper

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

Open
#4,805 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.