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

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.