Segmented Control

A segmented control is a linear set of two or more segments, each of which functions as a button.

Pro component

Requires all-access to use the source code

import { Stack } from 'expo-router';
import * as React from 'react';
import { View } from 'react-native';

import { SegmentedControl } from '~/components/nativewindui/SegmentedControl';

const VALUES = ['One', 'Two', 'Three', 'Four'];

export default function SegmentedControlScreen() {
  const [selectedIndex, setSelectedIndex] = React.useState(0);
  return (
    <>
      <Stack.Screen options={{ title: 'Segmented Control' }} />
      <View className="flex-1 p-4">
        <SegmentedControl
          values={VALUES}
          selectedIndex={selectedIndex}
          onIndexChange={(index) => {
            setSelectedIndex(index);
          }}
        />
      </View>
    </>
  );
}

Unlock All Pro Screens & Components

Elevate your app with powerful, native-feeling components and templates. Build faster with beautiful ready-to-use designs.

Get all-access

Usage

import { SegmentedControl } from '~/components/nativewindui/SegmentedControl';

const [selectedIndex, setSelectedIndex] = React.useState(0);

return (
  <SegmentedControl
    values={['One', 'Two', 'Three', 'Four']}
    selectedIndex={selectedIndex}
    onIndexChange={(index) => {
      setSelectedIndex(index);
    }}
  />
);

Props

SegmentedControl

Inherits all the props from React Native's TextInput component.

Prop	Type	Default	Description
enabled	boolean	true	Determines if the segment control is enabled.
onIndexChange	(index: number) => void		Callback function triggered when the selected index changes.
onValueChange	(value: string) => void		Callback function triggered when the selected value changes.
selectedIndex	number		The currently selected index.
values	string[]		Array of strings representing the segment values.
materialTextClassName	string		Class name for the text style of the segments.
iosMomentary	boolean		If true, selection won't persist visually, but the callback will still work.

Segmented Control

Usage

Props

NativeWindUI