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

A react native card component
https://github.com/jacklam718/react-native-card-view

Last synced: 1 day ago
JSON representation

A react native card component

• Host: GitHub
• URL: https://github.com/jacklam718/react-native-card-view
• Owner: jacklam718
• Created: 2016-06-19T09:33:08.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-09-30T20:38:45.000Z (about 4 years ago)
• Last Synced: 2024-08-16T16:51:05.506Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 93.8 KB
• Stars: 106
• Watchers: 7
• Forks: 26
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - react-native-card-view ★101 - A react native card component (Components / UI)
• awesome-reactnative-ui - react-native-card-view - native-card-view.gif?dl=1)| (Others)
• awesome-react-native - react-native-card-view ★101 - A react native card component (Components / UI)
• awesome-reactnative-ui - react-native-card-view - native-card-view.gif?dl=1)| (Others)
• awesome-react-native - react-native-card-view ★101 - A react native card component (Components / UI)
• awesome-react-native - react-native-card-view ★101 - A react native card component (Components / UI)
• awesome-react-native-ui - react-native-card-view ★54 - A react native card component (Components / UI)

README

        
# React Native Card View

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

![Example](https://www.dropbox.com/s/44aildn3lhq9rik/react-native-card-view.gif?dl=1)




    

[Try it with Exponent](https://exp.host/@jacklam718/card-view-example)

## Install

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

## Example

##### Detailed example

##### Quick example here

```javascript

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 Title

        

        

          Content

        

        

           {}}>

            Button 1

          

           {}}>

            Button 2

          

        

      

    );

  }

}

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

```javascript

const card      = {card: {width: 300, height: 300}};

const cardTitle = {cardTitle: {fontSize: 40}}

```