Function BadgeExample

example/src/Examples/BadgeExample.tsx:17–72

()

import ScreenWrapper from '../ScreenWrapper';

const BadgeExample = () => {
  const [visible, setVisible] = React.useState<boolean>(true);
  const { isV3 } = useExampleTheme();

  return (
    <ScreenWrapper>
      <View style={[styles.row, styles.item]}>
        <Text style={styles.label} variant="bodyMedium">
          Show badges
        </Text>
        <Switch
          value={visible}
          onValueChange={(visible) => setVisible(visible)}
        />
      </View>
      <List.Section title="Text">
        <View style={styles.row}>
          <View style={styles.item}>
            <IconButton icon="palette-swatch" size={36} style={styles.button} />
            <Badge visible={visible} style={styles.badge}>
              12
            </Badge>
          </View>
          <View style={styles.item}>
            <IconButton icon="inbox" size={36} style={styles.button} />
            <Badge
              visible={visible}
              style={[
                styles.badge,
                {
                  backgroundColor: isV3
                    ? MD3Colors.primary80
                    : MD2Colors.blue500,
                },
              ]}
            >
              999+
            </Badge>
          </View>
        </View>
      </List.Section>
      <List.Section title="Dot">
        <View style={styles.row}>
          <View style={styles.item}>
            <IconButton icon="book-open" size={36} style={styles.button} />
            <Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
          </View>
          <View style={styles.item}>
            <IconButton icon="receipt" size={36} style={styles.button} />
            <Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
          </View>
        </View>
      </List.Section>
    </ScreenWrapper>
  );
};

BadgeExample.title = 'Badge';