Card

Card is a pure NativeBase component.
Card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
NativeBase Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.


iOS	Android

Contents:

Genertal Syntax

import React, { Component } from 'react';
import { Container, Content, Card, CardItem, Text, Body } from 'native-base/ui';

export default class CardExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Card>
                        <CardItem>
                          <Body>
                            <Text>
                                //Your text here
                            </Text>
                          </Body>
                        </CardItem>
                    </Card>
                </Content>
            </Container>
        );
    }
}

Card: This component adds a box-shadow by default. Also provides default spacing and alignment between cards.
CardItem: This is the child component of Card. Works very similar to the list items of list. Card takes any number of CardItem.
CardItem component takes input such as: Text, Button, Image, Thumbnail, Icon.
Replacing Component for Card: React Native <View>
Replacing Component for CardItem: React Native <TouchableOpacity>

Configuration

Property	Default	Option	Description
header	-	-	Displays both as header and footer for cards.
note	-	-	Sub caption for Card header.
cardBody	-	-	Defines section for body of card. The child components are rendered without any spacing or padding.
button	-	-	To navigate on click of a card item.

FilesExpand file tree

Card.md

Latest commit

History

Card.md

File metadata and controls

Card