• Stars
    star
    106
  • Rank 325,871 (Top 7 %)
  • Language
    JavaScript
  • Created over 8 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A react native card component

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>

More Repositories

1

react-native-modals

A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.
JavaScript
2,174
star
2

react-native-button-component

A Beautiful, Customizable React Native Button component for iOS & Android
JavaScript
531
star
3

ftp

Python FTP Server & Client
Python
124
star
4

react-native-onboarding-component

React Native App Onboarding Views component for IOS and Android
JavaScript
94
star
5

myDesktop

python remote desktop (like VNC)
Python
88
star
6

react-native-dialog-component

A react native dialog component support custom animation for IOS & Android.
JavaScript
81
star
7

react-native-action-sheet-component

React Native Action Sheet Component for iOS & Android.
JavaScript
61
star
8

react-native-carousel-component

React Native Carousel Component for IOS & Android
JavaScript
61
star
9

react-native-animated-overlay

A Simple React Native Animated Overlay for iOS & Android.
JavaScript
31
star
10

http-request-capture

A simple tool for capturing http requests.
Python
22
star
11

cursesDialog

python curses dialog library
Python
9
star
12

react-native-modal-component

React Native Modal for IOS and Android
JavaScript
8
star
13

PyQt-ProgressDialog

Python QT Progress Dialog
Python
8
star
14

PyMail

Python curses email client
Python
6
star
15

ng-places-autocomplete

a fancy places autocomplete angular directive, support google, baidu places autocomplete
JavaScript
3
star
16

myTrelloA

JavaScript
3
star
17

algo

JavaScript
2
star
18

dualshock4

Cool animation with react native
JavaScript
2
star
19

parallax

Parallax effect in mobile with react native.
JavaScript
2
star
20

jacklam718.github.io

CSS
1
star
21

gini-coding-challenge

Live coding challenge interview
JavaScript
1
star
22

react-native-menus

JavaScript
1
star
23

crypto-app

Real-time crypto price tracker app
JavaScript
1
star
24

fullstack-web-demo

coding test for a full stack developer position
JavaScript
1
star
25

react-native-segmented-control

1
star
26

react-native-dropdown-list

1
star
27

algorithms

1
star
28

interact-with-mobile

HTML
1
star
29

leetcode

JavaScript
1
star
30

autocompletejs

A simple and extendable and no jQuery required JavaScript library for autocomplete
JavaScript
1
star
31

redux-api-middleware

"WIP" - A redux middleware for api calls, response and error handling.
JavaScript
1
star
32

sMitm

A simple `man in the mindle`
Python
1
star
33

webpack

JavaScript
1
star
34

flexy-photo

JavaScript
1
star
35

angular-datepicker

JavaScript
1
star