Multi segmented control for iOS & Android
npm install react-native-multi-segmented-controlMulti segmented control for iOS & Android
- 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"
with react-native ">=0.60.0"$3- Open your iOS project in Xcode and create empty Swift file and bridging header to enable Swift support `` dependencies { $3$ npm i react-native-multi-segmented-control -S $3$ cd ios && pod install && cd .. $3Modify android/build.gradle ` allprojects { |
Android | iOS
:---------------------------------------------:|:---------------------------------------------:
| 
`jsx
import * as React from 'react'
import { MultiSegmentedControl } from 'react-native-multi-segmented-control'
export const Control = () => (
values={['cat', 'dog', 'fox', 'pig', 'cow']}
onChange={({ nativeEvent }) => console.warn(nativeEvent.changedIndex)}
selectedIndices={[1, 2]}
/>
)
`
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.
| prop | type | default | desc |
|---|---|---|---|
| values | Array<string> | - | required |
| tintColor | string | - | |
| enabled | boolean | true | |
| selectedIndices | Array<number> | - | MultiSegmentedControl only |
| selectedIndex | number | - | SingleSegmentedControl only |
| onChange | (event: NativeSyntheticEvent<{ | - | |
| hideDivider | boolean | - | ios only |
| dividerColor | string | - | android only, no divider by default |
| minSelected | number | 0 | disabled when 0 |
| maxSelected | number | 0 | MultiSegmentedControl only, disabled when 0 |
| textStyle | TextStyle | - | supports color, fontFamily, fontWeight, fontStyle and fontSize |
| selectedTextStyle | TextStyle | textStyle | supports color, fontFamily, fontWeight, fontStyle and fontSize |