Need help with segmented-control?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

react-native-segmented-control
268 Stars 50 Forks MIT License 211 Commits 48 Opened issues

Description

React Native SegmentedControl library

Services available

!
?

Need anything else?

Contributors list

@react-native-segmented-control/segmented-control

Supports iOS and Android and WebGithub Action Badge npm Lean Core Extracted

React Native SegmentedControl library. Use SegmentedControl to render a UISegmentedControl iOS.

For Android and Web, it has a js implementation that mocks iOS 13 style of UISegmentedControl.

For Expo Users: Expo SDK 38 or later is required for this package.

| iOS | Android | Web | | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | | | |

Supported React Native Version

| react-native-segmented-control | react-native | | ------------------------------ | ------------ | | v2.2.0 | >= 0.62 | | <= v2.2.0 | >= 0.57 |

This module is NOT supported for expo.

Getting started

Install the library using either Yarn:

yarn add @react-native-segmented-control/segmented-control

or npm:

npm install --save @react-native-segmented-control/segmented-control

Link

React Native 0.60+

The package is automatically linked when building the app. All you need to do is:

npx pod-install

For android, no linking is needed, as the module is implemented in js.

For React Native version 0.59 or older ### React Native <= 0.59

run react-native link @react-native-segmented-control/segmented-control

or you can follow the instructions to manually link this package.

Upgrading to React Native 0.60+

New React Native comes with autolinking feature, which automatically links Native Modules in your project. In order to get it to work, make sure you unlink Segmented Control first:

react-native unlink @react-native-segmented-control/segmented-control

Migrating from the core
react-native
module

This module was created when the segmentedControlIos was split out from the core of React Native. To migrate to this module you need to follow the installation instructions above and then change you imports from:

import {SegmentedControlIOS} from 'react-native';

to:

import SegmentedControl from '@react-native-segmented-control/segmented-control';

Usage

Start by importing the library:

Use

SegmentedControl
to render a UISegmentedControl iOS.

Programmatically changing selected index

The selected index can be changed on the fly by assigning the selectedIndex prop to a state variable, then changing that variable. Note that the state variable would need to be updated as the user selects a value and changes the index, as shown in the example below.

import SegmentedControl from '@react-native-segmented-control/segmented-control';

return ( { this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex}); }} /> );


Reference

Props

Inherits View Props.

enabled

If false the user won't be able to interact with the control. Default value is true.

| Type | Required | | ---- | -------- | | bool | No |


momentary

If true, then selecting a segment won't persist visually. The

onValueChange
callback will still work as expected.

| Type | Required | Platform | | ---- | -------- | -------- | | bool | No | iOS |


onChange

Callback that is called when the user taps a segment; passes the event as an argument

| Type | Required | | -------- | -------- | | function | No |


onValueChange

Callback that is called when the user taps a segment; passes the segment's value as an argument

| Type | Required | | -------- | -------- | | function | No |


selectedIndex

The index in

props.values
of the segment to be (pre)selected.

| Type | Required | | ------ | -------- | | number | No |


tintColor

Accent color of the control.

| Type | Required | | ------ | -------- | | string | No |


backgroundColor

Background color color of the control. (iOS 13+ only)

| Type | Required | Supported Version | | ------ | -------- | ----------------- | | string | No | iOS 13+ |


values

The labels for the control's segment buttons, in order.

| Type | Required | | ------- | -------- | | (string | number | Image)[] | No |

appearance

(iOS 13+ only) Overrides the control's appearance irrespective of the OS theme

| Type | Required | Platform | | --------------- | -------- | ----------------- | | 'dark', 'light' | No | iOS, Android, Web |

fontStyle

(iOS 13+ only) | Type | Required | Platform | | ------ | -------- | -------- | | object | No | iOS, Android, Web |

An object container

  • color
    : color of segment text
  • fontSize
    : font-size of segment text
  • fontFamily
    : font-family of segment text
  • fontWeight
    : font-weight of segment text

activeFontStyle

(iOS 13+ only) | Type | Required | Platform | | ------ | -------- | -------- | | object | No | iOS, Android, Web |

  • color
    : overrides color of selected segment text
  • fontSize
    : overrides font-size of selected segment text
  • fontFamily
    : overrides font-family of selected segment text
  • fontWeight
    : overrides font-weight of selected segment text

tabStyle

(Android and Web only) Styles the clickable surface which is responsible to change tabs | Type | Required | Platform | | ------ | -------- | -------- | | object | No | Android, Web |

Extends ViewStyles

Tips and Tricks

How can I increase the height of the tab ?

For android and IOS, simply pass

prop.style
:
{
  "height": number
}

For react-native-web, additionally pass :

{
  "paddingVertical": number,
  or
  "height": number
}

Adding padding makes text disappear on Android

If padding amount exceeds the fixed height of the container, it will shrink the text. So either increase the height or reduce your padding.

Maintainers

Contributing

Please see the

contributing guide
.

License

The library is released under the MIT licence. For more information see

LICENSE
.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.