React Native Segmented Control

Increasing Tab Height

• Android and iOS: Pass height in the style prop.
• Web: Pass height or paddingVertical in the style prop.

Android Padding Warning

On Android, if the padding amount exceeds the fixed height of the container, the text will shrink. To avoid this, either increase the height or reduce the padding.

// Example style for height
{
  "height": 40
}

React Native 0.60+

Autolinking is supported. After installing, run:

npx pod-install

Android requires no additional linking as the module is implemented in JS.

React Native <= 0.59

Run the following command to link the package:

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

Upgrading to 0.60+

If you are upgrading a project that previously used manual linking, ensure you unlink the old version first:

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

Install the library using your preferred package manager:

pnpm

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

yarn

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

npm

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

Note for iOS/Expo users: This module requires custom native code and is NOT supported in the Expo Go app on iOS. You must use a custom development client or eject into the bare workflow.

This module replaces the segmentedControlIos component that was split out from the React Native core. To migrate, update your imports:

From:

import {SegmentedControlIOS} from 'react-native';

To:

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

To use the component, import SegmentedControl and provide a values array. To handle selection changes and programmatically control the index, manage the selectedIndex via component state and update it within the onChange callback.

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

// Inside your component
return (
  <SegmentedControl
    values={['One', 'Two']}
    selectedIndex={this.state.selectedIndex}
    onChange={(event) => {
      this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
    }}
  />
);

The SegmentedControl component is the primary entrypoint for this library. It is exported as the default export from the package. You can import it directly to render a segmented control UI in your React Native application.

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

// Usage within a component
<SegmentedControl
  values={['Option 1', 'Option 2']}
  selectedIndex={0}
  onValueChange={(value) => console.log(value)}
/>