Function ChipExample

example/src/Examples/ChipExample.tsx:17–397

()

import ScreenWrapper from '../ScreenWrapper';

const ChipExample = () => {
  const [snackbarProperties, setSnackbarProperties] = React.useState({
    visible: false,
    text: '',
  });
  const { isV3 } = useExampleTheme();
  const customColor = isV3 ? MD3Colors.error50 : MD2Colors.purple900;

  return (
    <>
      <ScreenWrapper>
        <List.Section title="Flat chip">
          <View style={styles.row}>
            <Chip selected onPress={() => {}} style={styles.chip}>
              Simple
            </Chip>
            {isV3 && (
              <>
                <Chip
                  selected
                  showSelectedOverlay
                  onPress={() => {}}
                  style={styles.chip}
                >
                  With selected overlay
                </Chip>
                <Chip elevated onPress={() => {}} style={styles.chip}>
                  Elevated
                </Chip>
                <Chip compact style={styles.chip} onPress={() => {}}>
                  Compact chip
                </Chip>
              </>
            )}
            <Chip
              onPress={() => {}}
              onClose={() =>
                setSnackbarProperties({
                  visible: true,
                  text: 'Close button pressed',
                })
              }
              style={styles.chip}
              closeIconAccessibilityLabel="Close icon accessibility label"
            >
              Close button
            </Chip>
            <Chip
              icon="heart"
              onPress={() => {}}
              onClose={() =>
                setSnackbarProperties({
                  visible: true,
                  text: 'Heart icon close button pressed',
                })
              }
              style={styles.chip}
            >