react-native-multi-segmented-control

Multi segmented control for iOS & Android

Usage no npm install needed!

<script type="module">
  import reactNativeMultiSegmentedControl from 'https://cdn.skypack.dev/react-native-multi-segmented-control';
</script>

README

react-native-multi-segmented-control

npm version CircleCI js-standard-style Dependency Status devDependencies Status typings included npm

Multi segmented control for iOS & Android

Status

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:

    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:

...

allprojects {
  repositories {
    ...
+   maven { url 'https://jitpack.io' }
  }
}

Demo

Android iOS

Example

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

export const Control = () => (
  <MultiSegmentedControl
    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.

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