Only tested in IOS, but I think should works in Android too.
npm install --save react-native-card-view
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
}
});
You can use you own style to override the following components style
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>
Author: jacklam718
Source: https://github.com/jacklam718/react-native-card-view