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

Research direction

Start by reproducing the SegmentedButtons example on iOS with the listed Larger Text settings, then inspect the SegmentedButtons styling and labelStyle behavior. Done means the background and border colors remain consistent for selected and unselected buttons across the affected text sizes, with the relevant checks or tests passing.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.