🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A react native card view component which works on both iOS and Android.

Layout React Native

Documentation

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>

You May Also Like