Function CardExample

example/src/Examples/CardExample.tsx:21–209

()

type Mode = 'elevated' | 'outlined' | 'contained';

const CardExample = () => {
  const { colors, isV3 } = useExampleTheme();
  const [selectedMode, setSelectedMode] = React.useState('elevated' as Mode);
  const [isSelected, setIsSelected] = React.useState(false);
  const preferences = React.useContext(PreferencesContext);

  const modes = isV3
    ? ['elevated', 'outlined', 'contained']
    : ['elevated', 'outlined'];

  const TextComponent = isV3 ? Text : Paragraph;

  return (
    <ScreenWrapper contentContainerStyle={styles.content}>
      <View style={styles.preference}>
        {(modes as Mode[]).map((mode) => (
          <Chip
            key={mode}
            selected={selectedMode === mode}
            mode="outlined"
            onPress={() => setSelectedMode(mode)}
            style={styles.chip}
          >
            {mode}
          </Chip>
        ))}
      </View>
      <ScrollView
        style={[styles.container, { backgroundColor: colors?.background }]}
        contentContainerStyle={styles.content}
      >
        <Card style={styles.card} mode={selectedMode}>
          <Card.Cover
            source={require('../../assets/images/wrecked-ship.jpg')}
          />
          <Card.Title title="Abandoned Ship" />
          <Card.Content>
            <TextComponent variant="bodyMedium">
              The Abandoned Ship is a wrecked ship located on Route 108 in
              Hoenn, originally being a ship named the S.S. Cactus. The second
              part of the ship can only be accessed by using Dive and contains
              the Scanner.
            </TextComponent>
          </Card.Content>
        </Card>
        {isV3 && (
          <Card style={styles.card} mode={selectedMode}>
            <Card.Cover source={require('../../assets/images/bridge.jpg')} />
            <Card.Title
              title="Title variant"
              subtitle="Subtitle variant"
              titleVariant="headlineMedium"
              subtitleVariant="bodyLarge"
            />
            <Card.Content>
              <TextComponent variant="bodyMedium">
                This is a card using title and subtitle with specified variants.
              </TextComponent>