callstack / callstack/react-native-paper
iOS SegmentedButtons display color issue with decreased/increased phone text size
- 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:
Implementation:
```
```
### Preview
The button on the left has a band of lighter color, whether selected or not:
### 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
Assessment
This issue has not been assessed yet.