Segmented Control

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

Installation

Before copy/pasting, add the following dependencies to your project:

Copy/paste the following code to the specified file path:

~/components/nativewindui/SegmentedControl.tsx
import RNSegmentedControl from '@react-native-segmented-control/segmented-control';
import { Platform } from 'react-native';

import { useColorScheme } from '~/lib/useColorScheme';

export function SegmentedControl(
  props: React.ComponentPropsWithoutRef<typeof RNSegmentedControl>
) {
  const { colorScheme, colors } = useColorScheme();
  return (
    <RNSegmentedControl
      backgroundColor={
        Platform.OS === 'android'
          ? colorScheme === 'dark'
            ? colors.background
            : colors.grey6
          : undefined
      }
      {...props}
    />
  );
}

Usage

index.tsx
import * as React from 'react';

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

function SegmentedControlsExample() {
  const [segment, setSegment] = React.useState(0);
  return (
    <SegmentedControl
      values={['red', 'green', 'blue']}
      selectedIndex={segment}
      onChange={(event) => {
        setSegment(event.nativeEvent.selectedSegmentIndex);
      }}
    />
  );
}
© Ronin Technologies LLC 2024