React Native Card View: Add Customizable Cards to Your React Native

React Native Card View

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

Example

Try it with Exponent

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 stytomles 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>

Download details:

Author: jacklam718
Source: https://github.com/jacklam718/react-native-card-view

#reactnative #react #javascript