Skip to content

CardShowcase.md

Latest commit

 

History

History
62 lines (57 loc) · 3.04 KB

CardShowcase.md

File metadata and controls

62 lines (57 loc) · 3.04 KB
Raw

Card Showcase

Card Showcase is further customization of Card Image. It uses several different items.

  • Begins with the Card List component, which is similar to out List Avatar.
  • cardBody prop for images and text.

iOS Android

Syntax

import React, { Component } from 'react';
import { Image } from 'react-native';
import { Container, Content, Card, CardItem, Thumbnail, Text, Button, Icon, Left, Body } from 'native-base/ui';
​
export default class CardShowcaseExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Card style={{ flex: 0 }}>
                        <CardItem>
                            <Left>
                                <Thumbnail source={require('./img/NB-logo.png')} />
                                <Body>
                                    <Text>NativeBase</Text>
                                    <Text note>April 15, 2016</Text>
                                </Body>
                            </Left>
                        </CardItem>

                        <CardItem>
                            <Body>
                                <Image style={{ resizeMode: 'cover' }} source={require('./img/card-showcase.png')} />
                                <Text>
                                    //Your text here
                                </Text>
                                <Button transparent textStyle={{color: '#87838B'}}>
                                    <Icon name="logo-github" />
                                    <Text>1,926 stars</Text>
                                </Button>
                            </Body>
                        </CardItem>
                   </Card>
                </Content>
            </Container>
        );
    }
}