Card Component

A flexible and reusable card container component for React Native applications that provides a consistent layout foundation with optional touch interactions.

Features

🎨 Themed Styling - Consistent styling that integrates with the design system
👆 Touch Interactions - Optional onPress functionality with appropriate feedback
🔧 Flexible Layout - Accepts any children for maximum flexibility
📱 Responsive Design - Adapts to different screen sizes
♿ Accessibility Ready - Built-in accessibility features
🎯 TypeScript Support - Full type safety and IntelliSense

Installation

💻Bash

npm install rn-base-component
# or
yarn add rn-base-component

Basic Usage

⚛️TSX

import React from 'react'
import { Card } from 'rn-base-component'
import { Text, View } from 'react-native'

export default function App() {
  return (
    
      This is a simple card
    
  )
}

Interactive Card

⚛️TSX

 console.log('Card pressed!')}>
  Tap this card

Advanced Usage

Custom Styled Card

⚛️TSX


  Card with custom shadow


const styles = StyleSheet.create({
  customCard: {
    margin: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
})

Card with Complex Content

⚛️TSX

 navigateToDetails()}>
  
    
    
      John Doe
      Software Engineer
      Last active 2 hours ago

API Reference

CardProps

Prop	Type	Default	Description
`onPress`	`() => void`	`undefined`	Callback function when card is pressed
`style`	`StyleProp<ViewStyle> \| Array<StyleProp<ViewStyle>>`	`undefined`	Custom styles for the card
`children`	`React.ReactNode`	Required	Content to be rendered inside the card

Default Styling

The Card component comes with default styling from the theme:

Padding: theme.spacing.slim (internal padding)
Border Radius: metrics.borderRadius
Background Color: theme.colors.cardBackground
Touch Opacity: Low opacity when pressable, none when not pressable

Layout Patterns

⚛️TSX


  
    
    {userName}
    {userRole}
    
      Follow

Statistics Card

⚛️TSX


  {value}
  {label}
  ↗ +12% from last month

Article Card

⚛️TSX

 openArticle(article.id)} style={styles.articleCard}>
  
  
    {article.title}
    {article.excerpt}
    
      {article.date}
      Read More

Best Practices

Touch Feedback - Only add onPress when the card should be interactive
Content Hierarchy - Use consistent padding and spacing inside cards
Visual Consistency - Maintain consistent card styling across the app
Performance - Use StyleSheet.create() for static styles
Accessibility - Provide appropriate accessibility props for interactive cards
Shadow Consistency - Use consistent shadow/elevation values

Performance

Cards with images should implement proper image loading and caching. For long lists, consider using FlatList with Card components.