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

[SiobhanCoady]

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:

<SegmentedButtons
    value={value}
    onValueChange={onValueChange}
    buttons={[
      {
        label: "Follow",
        value: "follow",
        showSelectedCheck: true
      },
      {
        label: "Hold",
        value: "hold",
        showSelectedCheck: true
      }
   ]}
/>

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