SegmentedControl force every segment to have the same width (50/50, 33/33/33, ...)

[Dominik Tenelsen]

Description

There seems to be no way to set the width of each segment or let it automatically adjust width depending on the number of segments included. This leads to inconsistent appearance when using two SegmentedControl in the same view.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

Add two SegmentedControl components with labels (segments) at a different length.

Expected behavior

All Segments to have the same width

Actual behavior

Every segment has a different width which makes it look weird

More Info

Code snippet

<SegmentedControl segments={ [{ label: 'gesetzlich' }, { label: 'privat' }] } />
<SegmentedControl segments={ [{ label: 'Ja' }, { label: 'Nein' }] } />

Screenshots/Video

Environment

• React Native version: 0.71.14
• React Native UI Lib version: 7.14.0

Affected platforms

• Android
• iOS
• Web

[Dominik Tenelsen]

set segmentsStyle to width: `${100 / segments.length}%`