https://github.com/iyegoroff/react-native-multi-segmented-control
Multi segmented control for iOS & Android
https://github.com/iyegoroff/react-native-multi-segmented-control
react-native segmented-control
Last synced: 3 months ago
JSON representation
Multi segmented control for iOS & Android
- Host: GitHub
- URL: https://github.com/iyegoroff/react-native-multi-segmented-control
- Owner: iyegoroff
- License: mit
- Created: 2019-08-16T23:24:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:58:38.000Z (over 2 years ago)
- Last Synced: 2025-02-03T10:42:13.130Z (4 months ago)
- Topics: react-native, segmented-control
- Language: Kotlin
- Size: 1.63 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-multi-segmented-control
[](https://badge.fury.io/js/react-native-multi-segmented-control)
[](https://circleci.com/gh/iyegoroff/react-native-multi-segmented-control)
[](https://github.com/standard/standard)
[](https://david-dm.org/iyegoroff/react-native-multi-segmented-control)
[](https://david-dm.org/iyegoroff/react-native-multi-segmented-control?type=dev)
[](package.json)
[](https://www.npmjs.com/package/react-native-multi-segmented-control)
Multi segmented control for iOS & Android
## Status
- iOS & Android:
- based on [attheodo/ATHMultiSelectionSegmentedControl](https://github.com/attheodo/ATHMultiSelectionSegmentedControl) & [savvyapps/ToggleButtonLayout](https://github.com/savvyapps/ToggleButtonLayout)
- package exports two components - `MultiSegmentedControl` and `SingleSegmentedControl`
- only text segments are available
- react-native:
- supported versions ">= 0.60.0"
## Installation
with react-native ">=0.60.0"
### 0. Setup Swift and Kotlin
- Open your iOS project in Xcode and create empty Swift file and bridging header to enable Swift support
- Modify `android/build.gradle`:
```diff
buildscript {
ext {
...
+ kotlinVersion = "1.3.50"
}
...
dependencies {
+ classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${kotlinVersion}")
...
```
### 1. Install latest version from npm
`$ npm i react-native-multi-segmented-control -S`
### 2. Install pods
`$ cd ios && pod install && cd ..`
### 3. Final step
Modify `android/build.gradle` again:
```diff
...
allprojects {
repositories {
...
+ maven { url 'https://jitpack.io' }
}
}
```
## Demo
Android | iOS
:---------------------------------------------:|:---------------------------------------------:
| 
## Example
```jsx
import * as React from 'react'
import { MultiSegmentedControl } from 'react-native-multi-segmented-control'
export const Control = () => (
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.
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<{
selectedIndices: Array<number>,
selectedValues: Array<string>,
changedIndex: number,
changedIndexSelected: boolean,
}>) => void
-
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