Card

The Card component is a versatile container for displaying content in a structured manner. It can include headers, bodies, footers, and supports various visual styles like shadows, radii, and blur effects.

Installation

$ cbui-cli install card

To get started, please make sure you have installed cbui-cli globally and authenticated your account. This will ensure you can access all the necessary features.

View documents

Import

index.tsx

import { Card, CardHeader, CardBody, CardFooter, CardContext, useCardContext } from '@/crossbuildui/card';
// Ensure 'expo-blur' is installed and configured.
// import { View, Text, Image } from 'react-native'; // For content
// import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; // For icons

The Card component and its sub-components (CardHeader, CardBody, CardFooter) can utilize expo-blur for blur effects. If you plan to use the isBlurred or isFooterBlurred props, ensure expo-blur is installed and properly configured in your Expo project.

Basic Usage

Compose a card using CardHeader, CardBody, and CardFooter as children of the main Card component.

index.tsx

<Card>
  <CardHeader>
    <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Card Title</Text>
  </CardHeader>
  <CardBody>
    <Text>This is the main content of the card. It can contain text, images, or any other components.</Text>
  </CardBody>
  <CardFooter>
    <Button size="sm">Learn More</Button>
  </CardFooter>
</Card>

Shadows & Radius

Control the card's elevation and corner rounding with the shadow and radius props.

index.tsx

<View style={{ flexDirection: 'row', justifyContent: 'space-around', flexWrap: 'wrap' }}>
  <Card shadow="sm" radius="sm" style={{ width: 150, margin: 10 }}>
    <CardBody><Text>Small Shadow, Small Radius</Text></CardBody>
  </Card>
  <Card shadow="md" radius="md" style={{ width: 150, margin: 10 }}>
    <CardBody><Text>Medium Shadow (Default), Medium Radius (Default)</Text></CardBody>
  </Card>
  <Card shadow="lg" radius="lg" style={{ width: 150, margin: 10 }}>
    <CardBody><Text>Large Shadow, Large Radius</Text></CardBody>
  </Card>
  <Card shadow="none" radius="none" style={{ width: 150, margin: 10 }}>
    <CardBody><Text>No Shadow, No Radius</Text></CardBody>
  </Card>
</View>

Pressable Card

Make the card interactive by setting isPressable to true. You can handle press events with onPress and control background changes with changeBgOnPress.

index.tsx

const [count, setCount] = useState(0);

<Card
  isPressable
  onPress={() => setCount(count + 1)}
  style={{ alignItems: 'center', padding: 20 }}
>
  <Text>Press me!</Text>
  <Text>Pressed: {count} times</Text>
</Card>

// Without background change on press
<Card isPressable changeBgOnPress={false} onPress={() => console.log('Pressed!')}>
  <CardBody><Text>Pressable, no BG change</Text></CardBody>
</Card>

Blurred Card

Apply a blur effect to the entire card using isBlurred and adjust its intensity with blurIntensity. You can also specifically blur the footer using isFooterBlurred on the Card component.

index.tsx

// Whole card blurred
<Card isBlurred blurIntensity={20} style={{ width: 200 }}>
  <CardHeader><Text style={{color: 'white', fontWeight: 'bold'}}>Blurred Card</Text></CardHeader>
  <CardBody><Text style={{color: 'white'}}>Content inside a blurred card.</Text></CardBody>
</Card>

// Card with blurred footer (controlled by Card prop)
<Card isFooterBlurred blurIntensity={30} style={{ width: 200, marginTop: 10 }}>
  <CardHeader><Text>Normal Header</Text></CardHeader>
  <CardBody><Text>Normal Body</Text></CardBody>
  <CardFooter>
    <Text style={{color: 'white'}}>Blurred Footer Content</Text>
  </CardFooter>
</Card>

Blurred Sections

Apply blur effects to individual sections (CardHeader, CardBody, CardFooter) by setting the isBlurred prop directly on them. Note: If the entire Card has isBlurred=, the footer will also blur unless isBlurred= is explicitly set on the CardFooter itself.

index.tsx

// Card with only header blurred
<Card style={{ width: 250, marginVertical: 10 }}>
  <CardHeader isBlurred blurIntensity={25}>
    <Text style={{ fontWeight: 'bold', color: 'white' }}>Blurred Header</Text>
  </CardHeader>
  <CardBody>
    <Text>This body is not blurred.</Text>
  </CardBody>
</Card>

// Card with only body blurred
<Card style={{ width: 250, marginVertical: 10 }}>
  <CardHeader>
    <Text style={{ fontWeight: 'bold' }}>Normal Header</Text>
  </CardHeader>
  <CardBody isBlurred blurIntensity={25}>
    <Text style={{ color: 'white' }}>This body is blurred.</Text>
    <Text style={{ color: 'white', marginTop: 5 }}>More blurred content.</Text>
  </CardBody>
  <CardFooter>
    <Text>Normal Footer</Text>
  </CardFooter>
</Card>

// Card with only footer blurred (controlled by CardFooter prop)
<Card style={{ width: 250, marginVertical: 10 }}>
  <CardHeader><Text style={{ fontWeight: 'bold' }}>Normal Header</Text></CardHeader>
  <CardBody><Text>Normal Body</Text></CardBody>
  <CardFooter isBlurred blurIntensity={25}>
    <Text style={{ color: 'white' }}>This footer is blurred.</Text>
  </CardFooter>
</Card>

Full Width

Make the card span the full width of its parent container by setting fullWidth=.

index.tsx

<Card fullWidth>
  <CardHeader><Text style={{fontWeight: 'bold'}}>Full Width Card</Text></CardHeader>
  <CardBody><Text>This card spans the entire width of its parent.</Text></CardBody>
</Card>

Disabled State

Disable the card, affecting its appearance and interactivity if pressable, using the disabled prop.

index.tsx

<Card isPressable disabled onPress={() => console.log('Should not log')}>
  <CardHeader><Text>Disabled Pressable Card</Text></CardHeader>
  <CardBody><Text>This card looks and acts disabled.</Text></CardBody>
</Card>

<Card disabled style={{marginTop: 10}}>
  <CardHeader><Text>Disabled Non-Pressable Card</Text></CardHeader>
  <CardBody><Text>Content is visually dimmed.</Text></CardBody>
</Card>

Complex Layout Example

Cards can be used to build more complex UI elements by combining them with other components and custom styling.

index.tsx

<Card shadow="lg" radius="lg" style={{ marginVertical: 10 }}>
  <CardHeader style={{ flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#eee' }}>
    <Image source={{ uri: 'https://i.pravatar.cc/40?u=a042581f4e29026024d' }} style={{ width: 40, height: 40, borderRadius: 20, marginRight: 10 }} />
    <View>
      <Text style={{ fontWeight: 'bold' }}>User Name</Text>
      <Text style={{ fontSize: 12, color: 'gray' }}>Posted 2 hours ago</Text>
    </View>
  </CardHeader>
  <CardBody>
    <Image source={{ uri: 'https://picsum.photos/seed/picsum/400/200' }} style={{ width: '100%', height: 150, borderRadius: 8, marginBottom: 10 }} resizeMode="cover" />
    <Text>This is a more complex card layout with an image and structured content.</Text>
  </CardBody>
  <CardFooter style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      {/* <Icon name="heart-outline" size={20} color="red" /> */}
      <Text style={{ marginLeft: 4 }}>12 Likes</Text>
    </View>
    <Button size="sm" variant="flat">Comment</Button>
  </CardFooter>
</Card>

Using Card Context

For advanced use cases or creating deeply integrated custom child components, you can access the Card's properties using the useCardContext hook. This hook consumes CardContext and provides access to props like shadow, radius, isPressable, isBlurred, fullWidth, disabled, and more, directly from within any descendant of the Card component.

This is useful if you are building custom components that need to react to the Card's state or configuration without explicit prop drilling.

MyCustomCardComponent.tsx

import { Card, CardBody, useCardContext } from '@/crossbuildui/card';
import { Text, View } from 'react-native';

const CardInfoDisplay = () => {
  const context = useCardContext();

  if (!context) {
    return <Text>This component must be used within a Card.</Text>;
  }

  const { shadow, radius, isPressable, isBlurred, fullWidth } = context;

  return (
    <View style={{ marginTop: 8, padding: 8, backgroundColor: '#f0f0f0', borderRadius: 4 }}>
      <Text>Card Context Info:</Text>
      <Text>- Shadow: {shadow}, Radius: {radius}</Text>
      <Text>- Pressable: {isPressable ? 'Yes' : 'No'}, Blurred: {isBlurred ? 'Yes' : 'No'}</Text>
      <Text>- Full Width: {fullWidth ? 'Yes' : 'No'}</Text>
    </View>
  );
};

<Card shadow="sm" radius="lg" isPressable><CardBody><Text>Card Content</Text><CardInfoDisplay /></CardBody></Card>

Props Overview

Card Props

PROP	TYPE	DEFAULT	DESCRIPTION
`children`	`ReactNode`	-	Content, typically `CardHeader`, `CardBody`, `CardFooter`.
`shadow`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Shadow depth.
`radius`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Border radius.
`fullWidth`	`boolean`	`false`	If true, card takes full parent width.
`isPressable`	`boolean`	`false`	Makes the card pressable.
`changeBgOnPress`	`boolean`	`true`	Change background on press if pressable.
`isBlurred`	`boolean`	`false`	Apply blur effect to the entire card.
`blurIntensity`	`number`	`10`	Blur intensity (1-100).
`isFooterBlurred`	`boolean`	`false`	Apply blur effect specifically to the footer.
`disabled`	`boolean`	`false`	Disable the card.
`disableAnimation`	`boolean`	`false`	Disable press animations.
`disableRipple`	`boolean`	`false`	Disable Android ripple effect.
`allowTextSelectionOnPress`	`boolean`	`false`	Allow text selection during press.
`styles`	`CardSlotsStyles`	-	Custom styles for card slots (base, header, body, footer, blurredView, footerBlurredView).
`style`	`StyleProp<ViewStyle>`	-	Style for the card's outermost container.
`onPress`	`(event) => void`	-	Callback for press events if `isPressable`.
`...PressableProps`	various	-	Other props from React Native's Pressable.

CardHeader Props

PROP	TYPE	DEFAULT	DESCRIPTION
`children`	`ReactNode`	-	Content of the header.
`style`	`StyleProp<ViewStyle>`	-	Style for the header container.
`isBlurred`	`boolean`	`false`	Apply blur effect to the header.
`blurIntensity`	`number`	`50`	Blur intensity (1-100).

CardBody Props

PROP	TYPE	DEFAULT	DESCRIPTION
`children`	`ReactNode`	-	Content of the body.
`style`	`StyleProp<ViewStyle>`	-	Style for the body container.
`isBlurred`	`boolean`	`false`	Apply blur effect to the body.
`blurIntensity`	`number`	`50`	Blur intensity (1-100).

CardFooter Props

PROP	TYPE	DEFAULT	DESCRIPTION
`children`	`ReactNode`	-	Content of the footer.
`style`	`StyleProp<ViewStyle>`	-	Style for the footer container.
`isBlurred`	`boolean`	`false`	Apply blur effect to the footer (behavior also influenced by Card's `isBlurred` and `isFooterBlurred` props).
`blurIntensity`	`number`	`50`	Blur intensity (1-100).

Styling

Customize the appearance of the Card and its sections:

Card Component:
- style: Applied to the outermost container of the Card (which could be a View, Pressable, or BlurView). Use for margins, width, etc.
- styles (slot styles): An object to style specific internal parts of the Card:
  - base: Styles the direct content holder view within the Card (the one that gets the main background color and border radius if not blurred, or the content wrapper inside BlurView).
  - header: (Not directly used by Card, but defined in types. Styling for header is via CardHeader's own style prop or by targeting it through children).
  - body: (Similar to header).
  - footer: (Similar to header).
  - blurredView: Styles applied to the BlurView component when isBlurred is true on the Card.
  - footerBlurredView: (Not directly used by Card, footer blur is handled by cloning CardFooter with blur props).
CardHeader, CardBody, CardFooter Components:
- style: Applied to the root container of each sub-component. Use for padding, background color (if not blurred), borders, etc.

The Card component intelligently handles background colors. If you provide a backgroundColor in the Card's main style prop, it will be used as the card's background. If the card is isBlurred, this background color will be applied to the content *inside* the blur, allowing the blur effect to tint it.

index.tsx

// Styling the Card container and its slots
// Card.styles.base is applied to the inner content holder.
// Card.styles.blurredView is applied to the BlurView if Card isBlurred.
// Note: Card.styles.header, .body, .footer are defined in types but not directly applied by Card to its children.
// Style CardHeader, CardBody, CardFooter via their own 'style' prop.
<Card
  isBlurred // Example to show blurredView styling
  blurIntensity={5}
  style={{ marginVertical: 10 }} // Styles the outermost Card container (BlurView in this case)
  styles={{
    base: { backgroundColor: 'rgba(255, 255, 0, 0.3)' }, // Content holder inside BlurView
    blurredView: { borderColor: 'purple', borderWidth: 1 } // Styles the BlurView itself
  }}
  radius="none"
>
  <CardHeader>
    <Text style={{color: 'black'}}>Styled Header (text color for contrast)</Text>
  </CardHeader>
  <CardBody>
    <Text style={{color: 'black'}}>Content with custom slot styling.</Text>
  </CardBody>
  <CardFooter>
    <Text style={{color: 'black'}}>Styled Footer</Text>
  </CardFooter>
</Card>

Accessibility

The Card component itself is a container. Accessibility largely depends on its content and usage:

If the card is isPressable, it behaves like a Pressable and will have accessibilityRole="button" by default. Ensure meaningful content or an accessibilityLabel is provided for screen readers.
Content within CardHeader, CardBody, and CardFooter should follow standard accessibility practices for text, images, and interactive elements.
For complex cards, consider using semantic headers (e.g., larger text for titles) to aid navigation.

Badge Code