react-native-multi-segmented-control

Multi segmented control for iOS & Android

Status

- iOS & Android:
- based on attheodo/ATHMultiSelectionSegmentedControl & savvyapps/ToggleButtonLayout
- package exports two components - MultiSegmentedControl and SingleSegmentedControl
- only text segments are available
- react-native:
- supported versions ">= 0.60.0"

Installation

Demo

Android | iOS
:---------------------------------------------:|:---------------------------------------------:
|

Example

`jsx
import * as React from 'react'
import { MultiSegmentedControl } from 'react-native-multi-segmented-control'

export const Control = () => (
style={{ height: 55, width: '100%' }}
values={['cat', 'dog', 'fox', 'pig', 'cow']}
onChange={({ nativeEvent }) => console.warn(nativeEvent.changedIndex)}
selectedIndices={[1, 2]}
/>
)
`

Reference

MultiSegmentedControl and SingleSegmentedControl components support all of View props and share some common props. MultiSegmentedControl additionally has maxSelected and selectedIndices props, and SingleSegmentedControl has additional selectedIndex` prop.

(event: NativeSyntheticEvent<{
  selectedIndices: Array<number>,
  selectedValues: Array<string>,
  changedIndex: number,
  changedIndexSelected: boolean,
}>) => void