React Native Starter
2.0.0
2.0.0
  • Getting Started
  • Architecture
  • Testing
  • Internationalization
  • Adding Pages and Components
  • Components
    • Text
    • Icon
    • Card
    • List
    • Top Navigation
    • Top Tabs
    • Bottom Tabs
    • Menu
    • Button
    • Checkbox
    • Toggle
    • Input
  • Screens
  • Theming
Powered by GitBook
On this page
  1. Components

Card

PreviousIconNextList

Last updated 4 years ago

Cards contain content and actions about a single subject.

In basic example, card accepts content view as child element.

import { Card } from '../components';

<Card>
      <Text>Today we are going to provide you with excellent articles to read in December. Enjoy fresh ideas, tips, and tricks from the JavaScript world.</Text>
</Card>

It also may have header and footer by configuring header ,description ,footer properties.

import { Card } from '../components';

<Card title={"Title"} description={"Description"} footer={<View style={styles.footerContainer}><Button style={{marginRight: 10, flex: 1}} caption={"Cancel"} bordered primary /><Button primary caption={"Apply"} style={{flex: 1}} /></View>}>
      <Text>Today we are going to provide you with excellent articles to read in December. Enjoy fresh ideas, tips, and tricks from the JavaScript world.</Text>
</Card>

Properties

Name

Type

Description

children

ReactNode

Component to render within the card.

title

(ViewProps) => ReactElement

Function component to render above the content.

description

(ViewProps) => ReactElement

Function component to render description content.

footer

(ViewProps) => ReactElement

Function component to render footer content.