react-native-card-view

0.0.3 • Public • Published

React Native Card View

Only tested in IOS, but I think should works in Android too.

Example

Install

npm install --save react-native-card-view

Example

Detailed example
Quick example here
import React, {Component} from 'react';
import {
  StyleSheet
} from 'react-native';
 
import {
  Card,
  CardImage,
  CardTitle,
  CardContent,
  CardAction
} from 'react-native-card-view';
 
import Button from 'react-native-button';
 
Class Example extends Component {
  render () {
    return (
      <Card>
        <CardTitle>
          <Text style={styles.title}>Card Title</Text>
        </CardTitle>
        <CardContent>
          <Text>Content</Text>
        </CardContent>
        <CardAction >
          <Button
            style={styles.button}
            onPress={() => {}}>
            Button 1
          </Button>
          <Button
            style={styles.button}
            onPress={() => {}}>
            Button 2
          </Button>
        </CardAction>
      </Card>
    );
  }
}
 
const styles = StyleSheet.create({
  title: {
    fontSize: 38,
    backgroundColor: 'transparent'
  },
  button: {
    marginRight: 10
  }
});

Override Component Styles

You can use you own style to override the following components style
  • Card
  • CardImage
  • CardTitle
  • CardContent
  • CardAction

You just pass the styles as an object and the key same as the component name

Just like the following
const card      = {card: {width: 300, height: 300}};
const cardTitle = {cardTitle: {fontSize: 40}}
 
<Card styles={card}></Card>
<CardTitle styles={cardTitle}></CardTitle>

Package Sidebar

Install

npm i react-native-card-view

Weekly Downloads

26

Version

0.0.3

License

MIT

Last publish

Collaborators

  • jacklam