Card

Cards contain content and actions about a single subject. Follows the Material Design 3 Card specification.

Usage

Open on Snack ↗

import { Card, Typography } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <Card variant="elevated">
            <Typography variant="titleMedium">Card Title</Typography>
            <Typography variant="bodyMedium">Card content goes here.</Typography>
          </Card>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Variants

Variant	Use case
elevated	Default surface with shadow
filled	Filled surface, no shadow
outlined	Bordered surface, no shadow

Interactive Card

When onPress is provided, the card renders as a Pressable with state-layer feedback:

Open on Snack ↗

import { Card, Typography } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Alert, View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <Card variant="filled" onPress={() => Alert.alert('Tapped')}>
            <Typography>Tap me</Typography>
          </Card>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

Prop	Type	Default	Required	Description
children	ReactNode	-	Yes	Content rendered inside the card surface.
variant	enum	elevated	No	Surface style variant.
onPress	() => void	-	No	When provided, the card becomes interactive (Pressable). Omit to render as a plain View.
disabled	boolean		No	Disables the press interaction and reduces opacity. Only effective when `onPress` is provided.
containerColor	string	-	No	Override the container (background) color. State-layer colors (hover, press) are derived automatically.