Skip to main content
Version: Next 🚧

Migrate from @react-native-segmented-control/segmented-control

- import SegmentedControl from '@react-native-segmented-control/segmented-control';
+ import { HorizontalList } from '@elik56a/react-native-pickers';

- <SegmentedControl
- values={['Day', 'Week', 'Month']}
- selectedIndex={index}
- onChange={(e) => setIndex(e.nativeEvent.selectedSegmentIndex)}
- />
+ <HorizontalList
+ items={[{ label: 'Day', value: 'day' }, { label: 'Week', value: 'week' }, { label: 'Month', value: 'month' }]}
+ value={view}
+ onChange={setView}
+ />
segmented-controlReact Native Pickers
values (strings)items ({ label, value, disabled?, icon? })
selectedIndexvalue (the item's value, not its index)
onChange(event) / onValueChange(label)onChange(value, item)
enabled={false}disabled: true on each item
tintColor / backgroundColortheme={{ colors: { primary, surface } }} or styles={{ thumb, container }}
—scrolls sideways when the items don't fit, variant="chips", renderItem, works on the web

HorizontalList has no native code, so it runs in Expo Go and on the web.

See all migration guides for other libraries, and Comparison for when another library is the better choice.