callstack / callstack/react-native-paper
iOS SegmentedButtons display color issue with decreased/increased phone text size
- 主要言語
- TypeScript
- スター
- 14.5k
- フォーク
- 2.2k
- 平均マージ
- 5日 23時間
- マージ済み PR(30日)
- 12
説明
### 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
コントリビューションガイド
評価
この issue はまだ評価されていません。