├── .gitignore
├── README.md
├── example
    ├── .babelrc
    ├── .buckconfig
    ├── .flowconfig
    ├── .gitignore
    ├── .watchmanconfig
    ├── CardExample.js
    ├── README.md
    ├── exp.json
    ├── main.js
    └── package.json
├── package.json
└── react-native-card-view.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # Xcode
 6 | #
 7 | example/build/
 8 | *.pbxuser
 9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 | 
25 | # Android/IJ
26 | #
27 | .idea
28 | .gradle
29 | local.properties
30 | 
31 | # node.js
32 | #
33 | example/node_modules/
34 | npm-debug.log
35 | 
36 | # BUCK
37 | buck-out/
38 | \.buckd/
39 | example/android/app/libs
40 | example/android/keystores/debug.keystore
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Native Card View
 2 | Only tested in IOS, but I think should works in Android too.
 3 | 
 4 | ![Example](https://www.dropbox.com/s/44aildn3lhq9rik/react-native-card-view.gif?dl=1)
 5 | 
 6 | <br>
 7 | 
 8 | 
 9 | <img src="https://www.dropbox.com/s/kxkltgzwokxkr5k/IMG_0359.PNG?dl=1" width="300">&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://www.dropbox.com/s/9seffjkig865fo0/IMG_0360.PNG?dl=1" width="300">
10 | 
11 | [Try it with Exponent](https://exp.host/@jacklam718/card-view-example)
12 | 
13 | ## Install
14 | npm install --save react-native-card-view
15 | 
16 | 
17 | ## Example
18 | ##### <a href="https://github.com/jacklam718/react-native-card-view/blob/master/example/CardExample.js" target="_blank">Detailed example</a>
19 | 
20 | ##### Quick example here
21 | ```javascript
22 | import React, {Component} from 'react';
23 | import {
24 |   StyleSheet
25 | } from 'react-native';
26 | 
27 | import {
28 |   Card,
29 |   CardImage,
30 |   CardTitle,
31 |   CardContent,
32 |   CardAction
33 | } from 'react-native-card-view';
34 | 
35 | import Button from 'react-native-button';
36 | 
37 | Class Example extends Component {
38 |   render () {
39 |     return (
40 |       <Card>
41 |         <CardTitle>
42 |           <Text style={styles.title}>Card Title</Text>
43 |         </CardTitle>
44 |         <CardContent>
45 |           <Text>Content</Text>
46 |         </CardContent>
47 |         <CardAction >
48 |           <Button
49 |             style={styles.button}
50 |             onPress={() => {}}>
51 |             Button 1
52 |           </Button>
53 |           <Button
54 |             style={styles.button}
55 |             onPress={() => {}}>
56 |             Button 2
57 |           </Button>
58 |         </CardAction>
59 |       </Card>
60 |     );
61 |   }
62 | }
63 | 
64 | const styles = StyleSheet.create({
65 |   title: {
66 |     fontSize: 38,
67 |     backgroundColor: 'transparent'
68 |   },
69 |   button: {
70 |     marginRight: 10
71 |   }
72 | });
73 | ```
74 | 
75 | ## Override Component Styles
76 | ##### You can use you own style to override the following components style
77 | - Card
78 | - CardImage
79 | - CardTitle
80 | - CardContent
81 | - CardAction
82 | 
83 | You just pass the stytomles as an object and the key same as the component name
84 | 
85 | ##### Just like the following
86 | ```javascript
87 | const card      = {card: {width: 300, height: 300}};
88 | const cardTitle = {cardTitle: {fontSize: 40}}
89 | 
90 | <Card styles={card}></Card>
91 | <CardTitle styles={cardTitle}></CardTitle>
92 | ```
93 | 


--------------------------------------------------------------------------------
/example/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "react-native-stage-0/decorator-support"
 4 |   ],
 5 |   "env": {
 6 |     "development": {
 7 |       "plugins": [
 8 |         "transform-react-jsx-source"
 9 |       ]
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/example/.buckconfig:
--------------------------------------------------------------------------------
1 | 
2 | [android]
3 |   target = Google Inc.:Google APIs:23
4 | 
5 | [maven_repositories]
6 |   central = https://repo1.maven.org/maven2
7 | 


--------------------------------------------------------------------------------
/example/.flowconfig:
--------------------------------------------------------------------------------
 1 | [ignore]
 2 | 
 3 | # We fork some components by platform.
 4 | .*/*[.]android.js
 5 | 
 6 | # Ignore templates with `@flow` in header
 7 | .*/local-cli/generator.*
 8 | 
 9 | # Ignore malformed json
10 | .*/node_modules/y18n/test/.*\.json
11 | 
12 | # Ignore the website subdir
13 | <PROJECT_ROOT>/website/.*
14 | 
15 | # Ignore BUCK generated dirs
16 | <PROJECT_ROOT>/\.buckd/
17 | 
18 | # Ignore unexpected extra @providesModule
19 | .*/node_modules/commoner/test/source/widget/share.js
20 | 
21 | # Ignore duplicate module providers
22 | # For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root
23 | .*/Libraries/react-native/React.js
24 | .*/Libraries/react-native/ReactNative.js
25 | .*/node_modules/jest-runtime/build/__tests__/.*
26 | 
27 | [include]
28 | 
29 | [libs]
30 | node_modules/react-native/Libraries/react-native/react-native-interface.js
31 | node_modules/react-native/flow
32 | flow/
33 | 
34 | [options]
35 | module.system=haste
36 | 
37 | esproposal.class_static_fields=enable
38 | esproposal.class_instance_fields=enable
39 | 
40 | experimental.strict_type_args=true
41 | 
42 | munge_underscores=true
43 | 
44 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
45 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
46 | 
47 | suppress_type=$FlowIssue
48 | suppress_type=$FlowFixMe
49 | suppress_type=$FixMe
50 | 
51 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(30\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
52 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(30\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
53 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
54 | 
55 | unsafe.enable_getters_and_setters=true
56 | 
57 | [version]
58 | ^0.30.0
59 | 


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | .exponent/*
 5 | 
 6 | # Xcode
 7 | #
 8 | build/
 9 | *.pbxuser
10 | !default.pbxuser
11 | *.mode1v3
12 | !default.mode1v3
13 | *.mode2v3
14 | !default.mode2v3
15 | *.perspectivev3
16 | !default.perspectivev3
17 | xcuserdata
18 | *.xccheckout
19 | *.moved-aside
20 | DerivedData
21 | *.hmap
22 | *.ipa
23 | *.xcuserstate
24 | project.xcworkspace
25 | 
26 | # Android/IJ
27 | #
28 | *.iml
29 | .idea
30 | .gradle
31 | local.properties
32 | 
33 | # node.js
34 | #
35 | node_modules/
36 | npm-debug.log
37 | 
38 | # BUCK
39 | buck-out/
40 | \.buckd/
41 | android/app/libs
42 | android/keystores/debug.keystore
43 | 


--------------------------------------------------------------------------------
/example/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/example/CardExample.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react';
  2 | import {
  3 |   View,
  4 |   Text,
  5 |   StyleSheet,
  6 |   Image,
  7 |   ScrollView
  8 | } from 'react-native';
  9 | 
 10 | import Button from 'react-native-button';
 11 | 
 12 | import {
 13 |   Card,
 14 |   CardTitle,
 15 |   CardImage,
 16 |   CardContent,
 17 |   CardAction
 18 | } from 'react-native-card-view';
 19 | 
 20 | export default class CardExample extends Component {
 21 | 
 22 |   _renderTitle (title) {
 23 |     return (
 24 |       <View style={{flex: 1, alignItems: 'center', marginTop: 20}}>
 25 |         <Text style={{fontSize: 20}}>{title}</Text>
 26 |       </View>
 27 |     )
 28 |   }
 29 | 
 30 |   render () {
 31 |     return (
 32 |       <ScrollView>
 33 |         <View style={styles.container}>
 34 |           {this._renderTitle('Basic')}
 35 |           <Card>
 36 |             <CardTitle>
 37 |               <Text style={styles.title}>Card Title</Text>
 38 |             </CardTitle>
 39 |             <CardContent>
 40 |               <Text>Content</Text>
 41 |             </CardContent>
 42 |             <CardAction >
 43 |               <Button
 44 |                 style={styles.button}
 45 |                 onPress={() => {}}>
 46 |                 Button 1
 47 |               </Button>
 48 |               <Button
 49 |                 style={styles.button}
 50 |                 onPress={() => {}}>
 51 |                 Button 2
 52 |               </Button>
 53 |             </CardAction>
 54 |           </Card>
 55 | 
 56 |           {this._renderTitle('Fix Width = 300')}
 57 |           <Card styles={{card: {width: 300}}}>
 58 |             <CardTitle>
 59 |               <Text style={styles.title}>Card Title</Text>
 60 |             </CardTitle>
 61 |             <CardContent>
 62 |               <Text>Content</Text>
 63 |             </CardContent>
 64 |             <CardAction >
 65 |               <Button
 66 |                 style={styles.button}
 67 |                 onPress={() => {}}>
 68 |                 Button 1
 69 |               </Button>
 70 |               <Button
 71 |                 style={styles.button}
 72 |                 onPress={() => {}}>
 73 |                 Button 2
 74 |               </Button>
 75 |             </CardAction>
 76 |           </Card>
 77 | 
 78 |           {this._renderTitle('Card Image + Card Title + Card Content + Card Action')}
 79 |           <Card>
 80 |             <CardImage>
 81 |               <Image
 82 |                 style={{width: 300, height: 200}}
 83 |                 source={{uri: 'https://getmdl.io/assets/demos/image_card.jpg'}}
 84 |               />
 85 |             </CardImage>
 86 |             <CardTitle>
 87 |               <Text style={styles.title}>Card Title</Text>
 88 |             </CardTitle>
 89 |             <CardContent>
 90 |               <Text>Content</Text>
 91 |               <Text>Content</Text>
 92 |               <Text>Content</Text>
 93 |               <Text>Content</Text>
 94 |               <Text>Content</Text>
 95 |               <Text>Content</Text>
 96 |             </CardContent>
 97 |             <CardAction separator>
 98 |               <Button
 99 |                 style={styles.button}
100 |                 onPress={() => {}}>
101 |                 Button 1
102 |               </Button>
103 |               <Button
104 |                 style={styles.button}
105 |                 styleDisabled={{color: 'red'}}
106 |                 onPress={() => {}}>
107 |                 Button 2
108 |               </Button>
109 |             </CardAction>
110 |           </Card>
111 | 
112 |           {this._renderTitle('Card Image')}
113 |           <Card>
114 |             <CardImage>
115 |               <Image
116 |                 style={{width: 256, height: 256}}
117 |                 source={{uri: 'https://getmdl.io/assets/demos/image_card.jpg'}}
118 |               >
119 |                 <Text style={[styles.title, {alignSelf: 'center'}]}>Beautiful Girl</Text>
120 |               </Image>
121 |             </CardImage>
122 |           </Card>
123 | 
124 |           {this._renderTitle('Card Image')}
125 |           <Card>
126 |             <CardImage>
127 |               <Image
128 |                 style={{width: 256, height: 256}}
129 |                 source={{uri: 'https://static.pexels.com/photos/59523/pexels-photo-59523.jpeg'}}
130 |               />
131 |             </CardImage>
132 |           </Card>
133 |         </View>
134 |       </ScrollView>
135 |     );
136 |   }
137 | }
138 | 
139 | const styles = StyleSheet.create({
140 |   container: {
141 |     flex: 1,
142 |     marginTop: 60,
143 |     marginBottom: 60
144 |   },
145 |   title: {
146 |     fontSize: 38,
147 |     backgroundColor: 'transparent'
148 |   },
149 |   button: {
150 |     marginRight: 10
151 |   },
152 |   card: {
153 |     width: 300
154 |   }
155 | });
156 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | Card View Example
 2 | The easiest way to give this a try is to open it with the Exponent client: https://exp.host/@jacklam718/card-view-example
 3 | 
 4 | To get this code running locally
 5 | 
 6 | Clone the project and cd into this example directory
 7 | Run npm install
 8 | Install XDE
 9 | Open the project in XDE and run it on the device of your choice
10 | 


--------------------------------------------------------------------------------
/example/exp.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Popup Dialog Example",
 3 |   "description": "A react native card component. react-native-card-view: https://github.com/jacklam718/react-native-card-view",
 4 |   "slug": "card-view-example",
 5 |   "sdkVersion": "10.0.0",
 6 |   "version": "1.0.0",
 7 |   "orientation": "portrait",
 8 |   "primaryColor": "#cccccc",
 9 |   "iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
10 |   "notification": {
11 |     "iconUrl": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png",
12 |     "color": "#000000"
13 |   },
14 |   "loading": {
15 |     "iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
16 |     "hideExponentText": false
17 |   },
18 |   "packagerOpts": {
19 |     "assetExts": [
20 |       "ttf",
21 |       "mp4"
22 |     ]
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
1 | import Exponent from 'exponent';
2 | import CardExample from './CardExample';
3 | 
4 | Exponent.registerRootComponent(CardExample);
5 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "start": "node node_modules/react-native/local-cli/cli.js start"
 7 |   },
 8 |   "dependencies": {
 9 |     "exponent": "10.0.0",
10 |     "react": "^15.1.0",
11 |     "react-native": "github:exponentjs/react-native#sdk-10.1.0",
12 |     "react-native-button": "^1.6.0",
13 |     "react-native-card-view": "0.0.3"
14 |   },
15 |   "main": "main.js"
16 | }
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-card-view",
 3 |   "version": "0.0.3",
 4 |   "main": "react-native-card-view.js",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/jacklam718/react-native-card-view.git"
 8 |   },
 9 |   "description": "A react native card component",
10 |   "keywords": [
11 |     "react card",
12 |     "react-native",
13 |     "react-native-card-view",
14 |     "react native card",
15 |     "card",
16 |     "view",
17 |     "react-component",
18 |     "react-native",
19 |     "ios",
20 |     "android"
21 |   ],
22 |   "author": "Jack (jacklam718@gmail.com)",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/jacklam718/react-native-card-view/issues"
26 |   },
27 |   "homepage": "https://github.com/jacklam718/react-native-card-view",
28 |   "peerDependencies": {
29 |     "react": ">=15.0.0",
30 |     "react-native": ">=0.26.0"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/react-native-card-view.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Author: Jack Lam - jacklam718@gmail.com
  3 |  * GitHub: https://github.com/jacklam718
  4 |  * License: MIT
  5 |  */
  6 | 
  7 | import React, {Component} from 'react';
  8 | import {
  9 |   StyleSheet,
 10 |   Text,
 11 |   View,
 12 | } from 'react-native'
 13 | 
 14 | class Card extends Component {
 15 |   render() {
 16 |     const newStyles = this.props.styles || {};
 17 |     return (
 18 |       <View style={[styles.container, styles.card, newStyles.card]}>
 19 |         {this.props.children}
 20 |       </View>
 21 |     );
 22 |   }
 23 | }
 24 | 
 25 | class CardImage extends Component {
 26 |   render () {
 27 |     const newStyles = this.props.styles || {};
 28 |     return (
 29 |       <View style={[styles.cardImage, newStyles.cardImage]}>
 30 |         {this.props.children}
 31 |       </View>
 32 |     );
 33 |   }
 34 | }
 35 | 
 36 | class CardTitle extends Component {
 37 |   render () {
 38 |     const newStyles = this.props.styles || {};
 39 |     return (
 40 |       <View style={[styles.cardTitle, newStyles.cardTitle]}>
 41 |         {this.props.children}
 42 |       </View>
 43 |     );
 44 |   }
 45 | }
 46 | 
 47 | class CardContent extends Component {
 48 |   render () {
 49 |     const newStyles = this.props.styles || {};
 50 |     return (
 51 |       <View style={[styles.cardContent, newStyles.cardContent]}>
 52 |         {this.props.children}
 53 |       </View>
 54 |     );
 55 |   }
 56 | }
 57 | 
 58 | class CardAction extends Component {
 59 |   render () {
 60 |     const newStyles = this.props.styles || {};
 61 |     return (
 62 |       <View>
 63 |         {this.props.separator ? <Separator /> : null}
 64 |         <View style={[styles.cardAction, newStyles.cardAction]}>
 65 |           {this.props.children}
 66 |         </View>
 67 |       </View>
 68 |     );
 69 |   }
 70 | }
 71 | 
 72 | class Separator extends Component {
 73 |   render () {
 74 |     return <View style={styles.separator} />
 75 |   }
 76 | }
 77 | 
 78 | const styles = StyleSheet.create({
 79 |   container: {
 80 |     flex: 1,
 81 |     alignItems: 'center',
 82 |     backgroundColor: '#F5FCFF',
 83 |     margin: 5
 84 |   },
 85 |   card: {
 86 |     backgroundColor: "#fff",
 87 |     borderRadius: 2,
 88 |     shadowColor: "#000000",
 89 |     shadowOpacity: 0.3,
 90 |     shadowRadius: 1,
 91 |     shadowOffset: {
 92 |       height: 1,
 93 |       width: 0.3,
 94 |     }
 95 |   },
 96 |   cardImage: {
 97 |     flex: 1
 98 |   },
 99 |   cardTitle: {
100 |     flex: 1,
101 |     flexDirection: 'row',
102 |     padding: 16
103 |   },
104 |   cardContent: {
105 |     paddingRight: 16,
106 |     paddingLeft: 16,
107 |     paddingTop: 16,
108 |     paddingBottom: 16,
109 |   },
110 |   cardAction: {
111 |     margin: 8,
112 |     flexDirection: 'row',
113 |     alignItems: 'center',
114 | 
115 |   },
116 |   separator: {
117 |     flex: 1,
118 |     height: 1,
119 |     backgroundColor: '#E9E9E9'
120 |   }
121 | });
122 | 
123 | export {
124 |   Card,
125 |   CardTitle,
126 |   CardAction,
127 |   CardContent,
128 |   CardImage,
129 |   Separator
130 | }
131 | 


--------------------------------------------------------------------------------