Logo

SegmentedButtons

Available in v5.x

Segmented buttons can be used to select options, switch views or sort elements.

Usage

import * as React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { SegmentedButtons } from 'react-native-paper';

const MyComponent = () => {
  const [value, setValue] = React.useState('');

  return (
    <SafeAreaView style={styles.container}>
      <SegmentedButtons
        value={value}
        onValueChange={setValue}
        buttons={[
          {
            value: 'walk',
            label: 'Walking',
          },
          {
            value: 'train',
            label: 'Transit',
          },
          { value: 'drive', label: 'Driving' },
        ]}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
});

export default MyComponent;

Props

Type: { value: string; icon?: IconSource; disabled?: boolean; accessibilityLabel?: string; onPress?: (event: GestureResponderEvent) => void; label?: string; showSelectedCheck?: boolean; style?: StyleProp<ViewStyle>; testID?: string; }[]

Buttons to display as options in toggle button. Button should contain the following properties:

  • value: value of button (required)
  • icon: icon to display for the item
  • disabled: whether the button is disabled
  • accessibilityLabel: acccessibility label for the button. This is read by the screen reader when the user taps the button.
  • onPress: callback that is called when button is pressed
  • label: label text of the button
  • showSelectedCheck: show optional check icon to indicate selected state
  • style: pass additional styles for the button
  • testID: testID to be used on tests
Type: 'regular' | 'small' | 'medium' | 'high'

Density is applied to the height, to allow usage in denser UIs

Edit this page