├── .babelrc
├── .buckconfig
├── .flowconfig
├── .gitattributes
├── .gitignore
├── .watchmanconfig
├── CODE_OF_CONDUCT.md
├── LICENSE.md
├── README.md
├── __tests__
    └── App.js
├── app.json
├── docs
    ├── en
    │   ├── cardview.md
    │   ├── cardviewwithicon.md
    │   └── cardviewwithimage.md
    └── tr
    │   ├── cardview.md
    │   ├── cardviewwithicon.md
    │   └── cardviewwithimage.md
├── index.js
├── libs
    ├── cardView
    │   └── index.js
    ├── cardViewWithIcon
    │   └── index.js
    └── cardViewWithImage
    │   └── index.js
└── package.json


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react-native"]
3 | }
4 | 


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


--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
 1 | [ignore]
 2 | ; We fork some components by platform
 3 | .*/*[.]android.js
 4 | 
 5 | ; Ignore "BUCK" generated dirs
 6 | <PROJECT_ROOT>/\.buckd/
 7 | 
 8 | ; Ignore unexpected extra "@providesModule"
 9 | .*/node_modules/.*/node_modules/fbjs/.*
10 | 
11 | ; Ignore duplicate module providers
12 | ; For RN Apps installed via npm, "Libraries" folder is inside
13 | ; "node_modules/react-native" but in the source repo it is in the root
14 | .*/Libraries/react-native/React.js
15 | 
16 | ; Ignore polyfills
17 | .*/Libraries/polyfills/.*
18 | 
19 | ; Ignore metro
20 | .*/node_modules/metro/.*
21 | 
22 | [include]
23 | 
24 | [libs]
25 | node_modules/react-native/Libraries/react-native/react-native-interface.js
26 | node_modules/react-native/flow/
27 | node_modules/react-native/flow-github/
28 | 
29 | [options]
30 | emoji=true
31 | 
32 | module.system=haste
33 | 
34 | munge_underscores=true
35 | 
36 | 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'
37 | 
38 | module.file_ext=.js
39 | module.file_ext=.jsx
40 | module.file_ext=.json
41 | module.file_ext=.native.js
42 | 
43 | suppress_type=$FlowIssue
44 | suppress_type=$FlowFixMe
45 | suppress_type=$FlowFixMeProps
46 | suppress_type=$FlowFixMeState
47 | 
48 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
49 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
50 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
51 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
52 | 
53 | [version]
54 | ^0.63.0
55 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.pbxproj -text
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # Xcode
 6 | #
 7 | 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 | package-lock.json
25 | yarn.lock
26 | # Android/IntelliJ
27 | #
28 | build/
29 | .idea
30 | .gradle
31 | local.properties
32 | *.iml
33 | 
34 | # node.js
35 | #
36 | node_modules/
37 | npm-debug.log
38 | yarn-error.log
39 | 
40 | # BUCK
41 | buck-out/
42 | \.buckd/
43 | *.keystore
44 | 
45 | # fastlane
46 | #
47 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
48 | # screenshots whenever they are needed.
49 | # For more information about the recommended setup visit:
50 | # https://docs.fastlane.tools/best-practices/source-control/
51 | 
52 | */fastlane/report.xml
53 | */fastlane/Preview.html
54 | */fastlane/screenshots
55 | 


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


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Code of Conduct
 2 | 
 3 | ## 1. Purpose
 4 | 
 5 | A primary goal of React Native Simple Card View is to be inclusive to the largest number of contributors, with the most varied and diverse backgrounds possible. As such, we are committed to providing a friendly, safe and welcoming environment for all, regardless of gender, sexual orientation, ability, ethnicity, socioeconomic status, and religion (or lack thereof).
 6 | 
 7 | This code of conduct outlines our expectations for all those who participate in our community, as well as the consequences for unacceptable behavior.
 8 | 
 9 | We invite all those who participate in React Native Simple Card View to help us create safe and positive experiences for everyone.
10 | 
11 | ## 2. Open Source Citizenship
12 | 
13 | A supplemental goal of this Code of Conduct is to increase open source citizenship by encouraging participants to recognize and strengthen the relationships between our actions and their effects on our community.
14 | 
15 | Communities mirror the societies in which they exist and positive action is essential to counteract the many forms of inequality and abuses of power that exist in society.
16 | 
17 | If you see someone who is making an extra effort to ensure our community is welcoming, friendly, and encourages all participants to contribute to the fullest extent, we want to know.
18 | 
19 | ## 3. Expected Behavior
20 | 
21 | The following behaviors are expected and requested of all community members:
22 | 
23 | *   Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community.
24 | *   Exercise consideration and respect in your speech and actions.
25 | *   Attempt collaboration before conflict.
26 | *   Refrain from demeaning, discriminatory, or harassing behavior and speech.
27 | *   Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.
28 | *   Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations.
29 | 
30 | ## 4. Unacceptable Behavior
31 | 
32 | The following behaviors are considered harassment and are unacceptable within our community:
33 | 
34 | *   Violence, threats of violence or violent language directed against another person.
35 | *   Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language.
36 | *   Posting or displaying sexually explicit or violent material.
37 | *   Posting or threatening to post other people’s personally identifying information ("doxing").
38 | *   Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.
39 | *   Inappropriate photography or recording.
40 | *   Inappropriate physical contact. You should have someone’s consent before touching them.
41 | *   Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances.
42 | *   Deliberate intimidation, stalking or following (online or in person).
43 | *   Advocating for, or encouraging, any of the above behavior.
44 | *   Sustained disruption of community events, including talks and presentations.
45 | 
46 | ## 5. Consequences of Unacceptable Behavior
47 | 
48 | Unacceptable behavior from any community member, including sponsors and those with decision-making authority, will not be tolerated.
49 | 
50 | Anyone asked to stop unacceptable behavior is expected to comply immediately.
51 | 
52 | If a community member engages in unacceptable behavior, the community organizers may take any action they deem appropriate, up to and including a temporary ban or permanent expulsion from the community without warning (and without refund in the case of a paid event).
53 | 
54 | ## 6. Reporting Guidelines
55 | 
56 | If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible. support@taluttasgiran.com.
57 | 
58 | 
59 | 
60 | Additionally, community organizers are available to help community members engage with local law enforcement or to otherwise help those experiencing unacceptable behavior feel safe. In the context of in-person events, organizers will also provide escorts as desired by the person experiencing distress.
61 | 
62 | ## 7. Addressing Grievances
63 | 
64 | If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify Talut with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies.
65 | 
66 | 
67 | 
68 | ## 8. Scope
69 | 
70 | We expect all community participants (contributors, paid or otherwise; sponsors; and other guests) to abide by this Code of Conduct in all community venues–online and in-person–as well as in all one-on-one communications pertaining to community business.
71 | 
72 | This code of conduct and its related procedures also applies to unacceptable behavior occurring outside the scope of community activities when such behavior has the potential to adversely affect the safety and well-being of community members.
73 | 
74 | ## 9. Contact info
75 | 
76 | support@taluttasgiran.com
77 | 
78 | ## 10. License and attribution
79 | 
80 | This Code of Conduct is distributed under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/).
81 | 
82 | Portions of text derived from the [Django Code of Conduct](https://www.djangoproject.com/conduct/) and the [Geek Feminism Anti-Harassment Policy](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy).
83 | 
84 | Retrieved on November 22, 2016 from [http://citizencodeofconduct.org/](http://citizencodeofconduct.org/)
85 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Talut TASGIRAN
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Native Simple Card View
  2 | 
  3 | Easiest way to adding a card view on your screen.
  4 | 
  5 | - *Hey, v0.3.0 is now released. You can use new component : CardView [See v0.3.0 Features](#v030-features)*
  6 | 
  7 | <p align="center">
  8 | <a href="https://s9.postimg.org/qxh30azpb/Simulator_Screen_Shot_-_i_Phone_8_-_2018-02-21_at_17.49.43.png">
  9 | <img src="https://s9.postimg.org/pxvdia4rj/Simulator_Screen_Shot_-_i_Phone_8_-_2018-02-21_at_17.49.43.png" alt="CardViewWithImage Example" />
 10 | </a>
 11 | <img src="https://s9.postimg.org/748niqban/card_View_With_Icon.png" alt="CardViewWithImage" />
 12 | </p>
 13 | 
 14 | <p align="center"><a href="https://www.npmjs.com/package/react-native-simple-card-view" target="_blank"><img src="https://nodei.co/npm/react-native-simple-card-view.png?downloads=true&downloadRank=true&stars=true" alt="package info" /></a></p>
 15 | 
 16 | [![GitHub stars](https://img.shields.io/github/stars/talut/react-native-simple-card-view.svg?style=social&label=Stars&style=flat-square)](https://github.com/talut/react-native-simple-card-view)
 17 | 
 18 | ## Getting Started
 19 | 
 20 | **via Yarn**
 21 | 
 22 | ```
 23 | yarn add react-native-simple-card-view
 24 | ```
 25 | 
 26 | **via NPM**
 27 | 
 28 | ```
 29 | npm install react-native-simple-card-view
 30 | ```
 31 | 
 32 | **React-Native Link**
 33 | 
 34 | ```
 35 | react-native link
 36 | ```
 37 | 
 38 | #### Components
 39 | 
 40 | - [x] CardViewWithIcon ([See documentation of usage](/docs/en/cardviewwithicon.md))
 41 | - [x] CardViewWithImage ([See documentation of usage](/docs/en/cardviewwithimage.md))
 42 | - [x] CardView (Place your component to inside of CardView)
 43 | - [ ] CardViewWithAnimation or Adding animation support to CardViewWithIcon, CardViewWithImage, ArticleCardView
 44 | 
 45 | ## Styling card view
 46 | 
 47 | You can create an object, who has the card view styles.
 48 | Then you can give that object to style props. Card view style object can have the following attributes
 49 | 
 50 | | Prop | Type | Default | Description | Platform |
 51 | |---|---|---|---|---|
 52 | |**`width`**|`number`| 300 | Card view width |iOS,Android|
 53 | |**`height`**|`number`| - | Card view height |iOS,Android|
 54 | |**`padding`**|`number`| 5 | Card view padding |iOS,Android|
 55 | |**`margin`**|`number`| 10 | Card view margin |iOS,Android|
 56 | |**`borderRadius`**|`number`| 3 | Card view border radius|iOS,Android|
 57 | |**`shadowColor`**|`string`| `'#000000' | Card view shadow color |iOS,Android|
 58 | |**`shadowOpacity`**|`number`| 0.3 | Card vie`w shadow opacity |iOS,Android|
 59 | |**`shadowRadius`**|`number`| 3 | Card view shadow radius |iOS,Android|
 60 | |**`bgColor`**|`string`| `'#ffffff'` | Card view background color |iOS,Android|
 61 | |**`elevation`**|`number`| 3 | Only for Android shadow value  |Android|
 62 | |**`shadowOffsetWidth`**|`number`| 3 |  Shadow offset width only for iOS |iOS|
 63 | |**`shadowOffsetHeight`**|`number`| 3 | Shadow offset height only for iOS  |iOS|
 64 | 
 65 | ## Components & Examples
 66 | 
 67 | #### CardView
 68 | 
 69 | [![English](https://img.shields.io/badge/EN-English-blue.svg)](/docs/en/cardview.md)
 70 | [![Turkish](https://img.shields.io/badge/TR-T%C3%BCrk%C3%A7e-red.svg)](/docs/tr/cardview.md)
 71 | 
 72 | #### CardViewWithIcon
 73 | 
 74 | [![English](https://img.shields.io/badge/EN-English-blue.svg)](/docs/en/cardviewwithicon.md)  [![Turkish](https://img.shields.io/badge/TR-T%C3%BCrk%C3%A7e-red.svg)](/docs/tr/cardviewwithicon.md)
 75 | 
 76 | #### CardViewWithImage
 77 | 
 78 | [![English](https://img.shields.io/badge/EN-English-blue.svg)](/docs/en/cardviewwithimage.md)
 79 | [![Turkish](https://img.shields.io/badge/TR-T%C3%BCrk%C3%A7e-red.svg)](/docs/tr/cardviewwithimage.md)
 80 | 
 81 | 
 82 | ## v0.3.0 Features
 83 | 
 84 | - CardView component added. (This component can be used for everything you can fill inside)
 85 | - Some unnecessary codes deleted
 86 | - Custom font feature
 87 | - Turkish documentation support
 88 | 
 89 | ## Contributors (Thank you all)
 90 | 
 91 | - **[David Halewood : @haletothewood](https://github.com/haletothewood)**
 92 | 
 93 | ## Built With
 94 | 
 95 | * [React-Native](https://facebook.github.io/react-native/)
 96 | * [React-Native-Vector-Icons](https://github.com/oblador/react-native-vector-icons) - Customizable Icons for React Native
 97 | 
 98 | ## License
 99 | 
100 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
101 | 


--------------------------------------------------------------------------------
/__tests__/App.js:
--------------------------------------------------------------------------------
 1 | import 'react-native';
 2 | import React from 'react';
 3 | import App from '../SimpleCardView';
 4 | 
 5 | // Note: test renderer must be required after react-native.
 6 | import renderer from 'react-test-renderer';
 7 | 
 8 | it('renders correctly', () => {
 9 |   const tree = renderer.create(
10 |     <App />
11 |   );
12 | });
13 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "dyscardview",
3 |   "displayName": "dyscardview"
4 | }


--------------------------------------------------------------------------------
/docs/en/cardview.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">CardView</h1>
 2 | 
 3 | <p>Simple, empty CardView component. You can fill inside with anything you want</p>
 4 | 
 5 | <p align="center">
 6 | <a href="https://s7.postimg.org/77al94x63/Simulator_Screen_Shot_-_i_Phone_7_Plus_-_2018-03-28_at_10.59.24.png">
 7 | <img src="https://s7.postimg.org/reo11imyj/Simulator_Screen_Shot_-_i_Phone_7_Plus_-_2018-03-28_at_10.59.24.png" alt="CardView Example" />
 8 | </a>
 9 | </p>
10 | 
11 | #### Attributes
12 | 
13 |   | Prop | Type | Default | Description | Platform | Required |
14 |   |---|---|---|---|---|---|
15 |   |**`onPress`**|`func`| - | onPress function |iOS,Android| No |
16 | 
17 | #### Examples
18 | 
19 | ```jsx
20 | import { CardViewWithImage } from 'react-native-simple-card-view'
21 | ```
22 | 
23 | **Simple Example**
24 | 
25 | ```jsx
26 |     <CardView>
27 |         <Text>
28 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet blanditiis dolores eos ipsam nulla
29 |             numquam officia provident repellat suscipit. Impedit itaque natus obcaecati odit quas recusandae. Deserunt
30 |             ipsam iusto molestiae!
31 |         </Text>
32 |     </CardView>
33 | ```
34 | 
35 | **onPress Example**
36 | 
37 | ```jsx
38 |     <CardView onPress={ () => console.log("Clicked!") }>
39 |         <Image source={ {uri: "https://placeimg.com/640/480/cars"} } style={ {width: 100, height: 100, alignSelf: 'center'} }/>
40 |         <Text
41 |             style={ {
42 |                 marginVertical : 15,
43 |                 textAlign      : 'center',
44 |                 backgroundColor: '#673AB7',
45 |                 color          : '#FFFFFF',
46 |                 padding        : 10,
47 |             } }>
48 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet blanditiis dolores eos ipsam nulla
49 |             numquam officia provident repellat suscipit. Impedit itaque natus obcaecati odit quas recusandae. Deserunt
50 |             ipsam iusto molestiae!
51 |         </Text>
52 |     </CardView>
53 | ```


--------------------------------------------------------------------------------
/docs/en/cardviewwithicon.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">CardViewWithIcon</h1>
 2 | 
 3 | <p align="center"><img src="https://s9.postimg.org/748niqban/card_View_With_Icon.png" alt="CardViewWithImage" /></p>
 4 | 
 5 |   | Prop | Type | Default | Description | Platform |
 6 |   |---|---|---|---|---|
 7 |   |**`iosIcon`**|`string`| ios-bonfire-outline | Card view icon name, icon list : [ionicons](https://ionicframework.com/docs/ionicons/) |iOS|
 8 |   |**`androidIcon`**|`string`| md-bonfire | Card view icon name, icon list : [ionicons](https://ionicframework.com/docs/ionicons/) |Android|
 9 |   |**`iconColor`**|`string`| `#FFFFFF` | Icon color - (hex, rgba, rgb) |iOS,Android|
10 |   |**`withBorder`**|`boolean`| false | Add a border to icon |iOS,Android|
11 |   |**`roundedIconBg`**|`boolean`| true | For making rounded background  |iOS,Android|
12 |   |**`borderColor`**|`string`| - | Icon border color - (hex, rgba, rgb) |iOS,Android|
13 |   |**`borderWidth`**|`number`| - | Icon border width |iOS,Android|
14 |   |**`withBackground`**|`boolean`| true | Set background color for icon|iOS,Android|
15 |   |**`iconBgColor`**|`string`| `#5E35B1` | Icon background color - (hex, rgba, rgb)|iOS,Android|
16 |   |**`title`**|`string`| - | Card view title |iOS,Android|
17 |   |**`titleTextAlign`**|`string`| center | Card view title text align |iOS,Android|
18 |   |**`titleFontWeight`**|`string`| bold | Card view title font weight |iOS,Android|
19 |   |**`titleFontSize`**|`number`| 14 | Card view title font size |iOS,Android|
20 |   |**`titlePaddingBottom`**|`number`| 10 | Card view title padding bottom|iOS,Android|
21 |   |**`titlePaddingTop`**|`number`| - | Card view title padding top |iOS,Android|
22 |   |**`titlePaddingLeft`**|`number`| - | Card view title padding left |iOS,Android|
23 |   |**`titlePaddingRight`**|`number`| - | Card view title padding right |iOS,Android|
24 |   |**`titleFontFamily`**|`string`| - | Card view title font family |iOS,Android|
25 |   |**`contentFontWeight`**|`string`| 300 | Card view content font weight  |iOS,Android|
26 |   |**`contentTextAlign`**|`string`| justify | Card view content text align |iOS,Android|
27 |   |**`contentFontSize`**|`number`| 12 | Card view content font size |iOS,Android|
28 |   |**`contentPaddingLeft`**|`number`| 10 | Card view content padding left  |iOS,Android|
29 |   |**`contentPaddingRight`**|`number`| 10 | Card view content padding right  |iOS,Android|
30 |   |**`contentPaddingBottom`**|`number`| 10 | Card view content padding bottom  |iOS,Android|
31 |   |**`contentPaddingTop`**|`number`| - | Card view content padding top props  |iOS,Android|
32 |   |**`contentFontFamily`**|`string`| - | Card view content font family |iOS,Android|
33 |   |**`onPress`**|`func`| - | onPress function |iOS,Android|
34 | 
35 | 
36 | #### Examples
37 | 
38 | ```jsx
39 | import { CardViewWithIcon } from 'react-native-simple-card-view'
40 | ```
41 | 
42 | **Simple Example**
43 | 
44 | ```jsx
45 |     <CardViewWithIcon
46 |         androidIcon={ 'md-bonfire' }
47 |         iosIcon={ 'ios-bonfire-outline' }
48 |         iconBgColor={ '#b13757' }
49 |         iconColor={ '#FFFFFF' }
50 |         title={ 'LOREM IPSUM' }
51 |         content={ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' }
52 |     />
53 | ```
54 | 
55 | **onPress Example**
56 | 
57 | <p align="center"><img src="https://i.lensdump.com/i/hQdxa.gif" alt="CardViewWithIcon Example" /></p>
58 | 
59 | ```jsx
60 |     <CardViewWithIcon
61 |         androidIcon={ 'md-jet' }
62 |         iosIcon={ 'ios-jet-outline' }
63 |         iconBgColor={ 'rgba(76,175,80 ,1)' }
64 |         onPress={() => console.log("CardViewWithIcon Clicked")}
65 |         iconColor={ '#FFFFFF' }
66 |         title={ 'LOREM IPSUM' }
67 |         content={ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' }
68 |     />
69 | ```


--------------------------------------------------------------------------------
/docs/en/cardviewwithimage.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">CardViewWithImage</h1>
 2 | 
 3 | <p align="center">
 4 | <a href="https://s9.postimg.org/qxh30azpb/Simulator_Screen_Shot_-_i_Phone_8_-_2018-02-21_at_17.49.43.png">
 5 | <img src="https://s9.postimg.org/pxvdia4rj/Simulator_Screen_Shot_-_i_Phone_8_-_2018-02-21_at_17.49.43.png" alt="CardViewWithImage Example" />
 6 | </a>
 7 | </p>
 8 | 
 9 | #### Attributes
10 | 
11 |   | Prop | Type | Default | Description | Platform | Required |
12 |   |---|---|---|---|---|---|
13 |   |**`width`**|`number or string`| `300` | CardView width (for full width you should set `'100%'`) |iOS,Android| Yes |
14 |   |**`imageWidth`**|`number or string`| `100` | Image width (for full width you should set `'100%'`) |iOS,Android| Yes |
15 |   |**`imageHeight`**|`number or string`| `100` | Image height (for full width you should set `'100%'`) |iOS,Android| Yes |
16 |   |**`roundedImage`**|`bool`| `true` | If you set false image will be square |iOS,Android| No|
17 |   |**`roundedImageValue`**|`number`| `50` | If you want your image rounded first set roundedImage "true" after give a number value this attr. |iOS,Android| No|
18 |   |**`imageMargin`**|`object`| - | You can set image **margin** with this. This object requires `top`,  `bottom`, `right`, `left`|iOS,Android| No|
19 |   |**`source`**|`object`| - | You can add your source like [React_Native Image Component Documents](https://facebook.github.io/react-native/docs/image.html#source). Also, if you use imageComponent you can remove this |iOS,Android| If you're not using imageComponent |
20 |   |**`buttonComponent`**|`object`| - | You can place your own button component for showing a button |iOS,Android| No|
21 |   |**`imageComponent`**|`object`| - | You can place your own image component (Fast-image etc.) but if you use this, our embedded styling not work. |iOS,Android| No|
22 |   |**`title`**|`string`| - | Component title |iOS,Android| No|
23 |   |**`titleTextAlign`**|`string`| - | Component title text align |iOS,Android| No|
24 |   |**`titleFontWeight`**|`string`| - | Component title font weight |iOS,Android| No|
25 |   |**`titleFontSize`**|`number`| - | Component title font size|iOS,Android| No|
26 |    |**`titleFontFamily`**|`string`| `"sans-serif"` | Card view title font family |iOS,Android|
27 |  |**`titleLineHeight`**|`number`| - | Component title text line height |iOS,Android| No|
28 |   |**`titlePadding`**|`object`| - | You can set title **padding** with this object. This object requires `top`,  `bottom`, `right`, `left`|iOS,Android| No|
29 |   |**`titleMargin`**|`object`| - | You can set title **margin** with this object. This object requires `top`,  `bottom`, `right`, `left`|iOS,Android| No|
30 |   |**`content`**|`string`| - | Content text |iOS,Android| No|
31 |   |**`contentFontWeight`**|`string`| - | Component content font weight |iOS,Android| No|
32 |   |**`contentFontSize`**|`string`| - | Component content font size |iOS,Android| No|
33 |   |**`contentTextAlign`**|`string`| - | Component content text align |iOS,Android| No|
34 |   |**`contentPadding`**|`object`| - | You can set content **padding** with this object. This object requires `top`,  `bottom`, `right`, `left`|iOS,Android| No|
35 |   |**`contentFontFamily`**|`string`| - | Card view content font family |iOS,Android|
36 |   |**`contentMargin`**|`object`| - | You can set content **margin** with this object. This object requires `top`,  `bottom`, `right`, `left`|iOS,Android| No|
37 |   |**`contentLineHeight`**|`number`| - | Component content text line height |iOS,Android| No|
38 | 
39 | 
40 | #### Examples
41 | 
42 | ```jsx
43 | import { CardViewWithImage } from 'react-native-simple-card-view'
44 | ```
45 | 
46 | **Simple Full Width Image Example**
47 | 
48 | ```jsx
49 |     <CardViewWithImage
50 |         width={ (200}
51 |         source={ {uri: 'https://placeimg.com/640/480/nature'} }
52 |         content={ 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut distinctio!' }
53 |         title={ 'React Nature :D' }
54 |         imageWidth={ '100%' }
55 |         imageHeight={ 100 }
56 |         roundedImage={ false }
57 |     />
58 | ```
59 | 
60 | **Rounded Image Example**
61 | 
62 | ```jsx
63 |     <CardViewWithImage
64 |         width={ (300}
65 |         content={ 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut distinctio!' }
66 |         source={ {uri: 'https://placeimg.com/640/480/tech'} }
67 |         title={ 'Hello World!' }
68 |         imageWidth={ 100 }
69 |         imageHeight={ 100 }
70 |         roundedImage={ true }
71 |         roundedImageValue={ 50 }
72 |         imageMargin={ {top: 10} }
73 |     />
74 | ```
75 | 
76 | **onPress Example**
77 | 
78 | ```jsx
79 |     <CardViewWithImage
80 |         width={ (300}
81 |         content={ 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut distinctio!' }
82 |         source={ {uri: 'https://placeimg.com/640/480/tech'} }
83 |         title={ 'Hello World!' }
84 |         imageWidth={ 100 }
85 |         imageHeight={ 100 }
86 |         onPress={() => console.log("CardViewWithImage Clicked!")}
87 |         roundedImage={ true }
88 |         roundedImageValue={ 50 }
89 |         imageMargin={ {top: 10} }
90 |     />
91 | ```


--------------------------------------------------------------------------------
/docs/tr/cardview.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">CardView</h1>
 2 | 
 3 | <p>Basit, boş CardView bileşeni. İçini istediğiniz gibi doldurabilirsiniz. Bu tuval sizin.</p>
 4 | 
 5 | <p align="center">
 6 | <a href="https://s7.postimg.org/77al94x63/Simulator_Screen_Shot_-_i_Phone_7_Plus_-_2018-03-28_at_10.59.24.png">
 7 | <img src="https://s7.postimg.org/reo11imyj/Simulator_Screen_Shot_-_i_Phone_7_Plus_-_2018-03-28_at_10.59.24.png" alt="CardView Örneğ" />
 8 | </a>
 9 | </p>
10 | 
11 | #### Öznitelikler
12 | 
13 |   | Özellik | Tip | Varsayılan | Açıklama | Platform | Gerekli mi? |
14 |   |---|---|---|---|---|---|
15 |   |**`onPress`**|`func`| - | onPress fonksiyonu |iOS,Android| Hayır |
16 | 
17 | #### Örnekler
18 | 
19 | ```jsx
20 | import { CardViewWithImage } from 'react-native-simple-card-view'
21 | ```
22 | 
23 | **Basit Örnek**
24 | 
25 | ```jsx
26 |     <CardView>
27 |         <Text>
28 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet blanditiis dolores eos ipsam nulla
29 |             numquam officia provident repellat suscipit. Impedit itaque natus obcaecati odit quas recusandae. Deserunt
30 |             ipsam iusto molestiae!
31 |         </Text>
32 |     </CardView>
33 | ```
34 | 
35 | **onPress Fonksiyon Örneği**
36 | 
37 | ```jsx
38 |     <CardView onPress={ () => console.log("Clicked!") }>
39 |         <Image source={ {uri: "https://placeimg.com/640/480/cars"} } style={ {width: 100, height: 100, alignSelf: 'center'} }/>
40 |         <Text
41 |             style={ {
42 |                 marginVertical : 15,
43 |                 textAlign      : 'center',
44 |                 backgroundColor: '#673AB7',
45 |                 color          : '#FFFFFF',
46 |                 padding        : 10,
47 |             } }>
48 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet blanditiis dolores eos ipsam nulla
49 |             numquam officia provident repellat suscipit. Impedit itaque natus obcaecati odit quas recusandae. Deserunt
50 |             ipsam iusto molestiae!
51 |         </Text>
52 |     </CardView>
53 | ```


--------------------------------------------------------------------------------
/docs/tr/cardviewwithicon.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">CardViewWithIcon</h1>
 2 | 
 3 | <p align="center"><img src="https://s9.postimg.org/748niqban/card_View_With_Icon.png" alt="CardViewWithImage" /></p>
 4 | 
 5 |  #### Öznitellikler
 6 | 
 7 |  | Özellik | Tip | Varsayılan | Açıklama | Platform |
 8 |   |---|---|---|---|---|
 9 |   |**`iosIcon`**|`string`| ios-bonfire-outline | IOS simge eklemek için kullanılır : [ionicons](https://ionicframework.com/docs/ionicons/) |iOS|
10 |   |**`androidIcon`**|`string`| md-bonfire | Android simge eklemek için kullanılır : [ionicons](https://ionicframework.com/docs/ionicons/) |Android|
11 |   |**`iconColor`**|`string`| `#FFFFFF` | Simge rengi - (hex, rgba, rgb) |iOS,Android|
12 |   |**`withBorder`**|`boolean`| false | Simgeye kenar ekleme |iOS,Android|
13 |   |**`roundedIconBg`**|`boolean`| true | Yuvarlatılmış simge arkaplanı  |iOS,Android|
14 |   |**`borderColor`**|`string`| - | Simge kenarlık rengi - (hex, rgba, rgb) |iOS,Android|
15 |   |**`borderWidth`**|`number`| - | Simge kenarlık kalınlığı |iOS,Android|
16 |   |**`withBackground`**|`boolean`| true | Simgeye arkaplan rengi ata|iOS,Android|
17 |   |**`iconBgColor`**|`string`| `#5E35B1` | Simgenin arkaplan rengini ayarla - (hex, rgba, rgb)|iOS,Android|
18 |   |**`title`**|`string`| - | CardView başlığı |iOS,Android|
19 |   |**`titleTextAlign`**|`string`| center | CardView başlığı hizalama |iOS,Android|
20 |   |**`titleFontWeight`**|`string`| bold | CardView başlık yazı kalınlığı |iOS,Android|
21 |   |**`titleFontSize`**|`number`| 14 | CardView başlık yazı boyutu |iOS,Android|
22 |   |**`titlePaddingBottom`**|`number`| 10 | CardView başlık alt boşluk |iOS,Android|
23 |   |**`titlePaddingTop`**|`number`| - | CardView başlık üst iç boşluk |iOS,Android|
24 |   |**`titlePaddingLeft`**|`number`| - | CardView başlık sol iç boşluk |iOS,Android|
25 |   |**`titlePaddingRight`**|`number`| - | CardView başlık sağ iç boşluk |iOS,Android|
26 |   |**`contentFontWeight`**|`string`| 300 | CardView içerik metni yazı kalınlığı  |iOS,Android|
27 |   |**`contentTextAlign`**|`string`| justify | CardView içerik metni hizalaması |iOS,Android|
28 |   |**`contentFontSize`**|`number`| 12 | CardView içerik yazı boyutu |iOS,Android|
29 |   |**`contentPaddingLeft`**|`number`| 10 | CardView içerik metni sol iç boşluk  |iOS,Android|
30 |   |**`contentPaddingRight`**|`number`| 10 | CardView içerik metni sağ iç boşluk  |iOS,Android|
31 |   |**`contentPaddingBottom`**|`number`| 10 | CardView içerik metni alt iç boşluk  |iOS,Android|
32 |   |**`contentPaddingTop`**|`number`| - | CardView içerik metni üst iç boşluk   |iOS,Android|
33 |   |**`onPress`**|`func`| - | onPress fonksiyonu (Tıklama durumunda olacaklar içindir.) |iOS,Android|
34 | 
35 | 
36 | #### Examples
37 | 
38 | ```jsx
39 | import { CardViewWithIcon } from 'react-native-simple-card-view'
40 | ```
41 | 
42 | **Basit Örnek**
43 | 
44 | ```jsx
45 |     <CardViewWithIcon
46 |         androidIcon={ 'md-bonfire' }
47 |         iosIcon={ 'ios-bonfire-outline' }
48 |         iconBgColor={ '#b13757' }
49 |         iconColor={ '#FFFFFF' }
50 |         title={ 'LOREM IPSUM' }
51 |         content={ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' }
52 |     />
53 | ```
54 | 
55 | **onPress Örneği**
56 | 
57 | <p align="center"><img src="https://i.lensdump.com/i/hQdxa.gif" alt="CardViewWithIcon Example" /></p>
58 | 
59 | ```jsx
60 |     <CardViewWithIcon
61 |         androidIcon={ 'md-jet' }
62 |         iosIcon={ 'ios-jet-outline' }
63 |         iconBgColor={ 'rgba(76,175,80 ,1)' }
64 |         onPress={() => console.log("CardViewWithIcon Tıklandı")}
65 |         iconColor={ '#FFFFFF' }
66 |         title={ 'LOREM IPSUM' }
67 |         content={ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' }
68 |     />
69 | ```


--------------------------------------------------------------------------------
/docs/tr/cardviewwithimage.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">CardViewWithImage</h1>
 2 | 
 3 | <p align="center">
 4 | <a href="https://s9.postimg.org/qxh30azpb/Simulator_Screen_Shot_-_i_Phone_8_-_2018-02-21_at_17.49.43.png">
 5 | <img src="https://s9.postimg.org/pxvdia4rj/Simulator_Screen_Shot_-_i_Phone_8_-_2018-02-21_at_17.49.43.png" alt="CardViewWithImage Örneği" />
 6 | </a>
 7 | </p>
 8 | 
 9 | #### Öznitellikler
10 | 
11 |   | Özellik | Tip | Varsayılan | Açıklama | Platform | Gerekli mi? |
12 |   |---|---|---|---|---|---|
13 |   |**`width`**|`number ya da string`| `300` | CardView genişliği (Tam genişlik için `'100%'` olarak ayarlamalısınız) |iOS,Android| Hayır |
14 |   |**`imageWidth`**|`number ya da string`| `100` | Görsel genişliği (Tam genişlik için `'100%'` olarak ayarlamalısınız) |iOS,Android| Hayır |
15 |   |**`imageHeight`**|`number ya da string`| `100` | Görsel  yüksekliği (Tam yükseklik için `'100%'` olarak ayarlamalısınız) |iOS,Android| Hayır |
16 |   |**`roundedImage`**|`bool`| `true` | Eğer `false` yaparsanız görsel kare olur. |iOS,Android| Hayır |
17 |   |**`roundedImageValue`**|`number`| `50` | Eğer görseli oval dairesel istiyorsanız ilk olarak `roundedImage` özelliğini `true` yapmalısınız. Daha sonra istediğiniz bir değeri girerek görsele ovallik verebilirsiniz. |iOS,Android| Hayır|
18 |   |**`imageMargin`**|`object`| - | Görsel **margin** vermek için. Bu obje `top`,  `bottom`, `right`, `left` bu key:değer'e sahip olmalı |iOS,Android| Hayır|
19 |   |**`source`**|`object`| - | Görsel kaynağınnı React Native dokümantasyonunda ki gibi ekleyebilirsiniz. [React Native Görsel Bileşen Dokümantasyonu](https://facebook.github.io/react-native/docs/image.html#source). Ayrıca, eğer kendi görsel bilşeninizi kullanıyorsanız bunu silebilirsiniz. |iOS,Android| imageComponent kullanılmadığında |
20 |   |**`buttonComponent`**|`object`| - | Kendi buton bileşenizi ekleyebilirsiniz. |iOS,Android| Hayır|
21 |   |**`imageComponent`**|`object`| - | Kendi görsel bilşeninizi ekleyebilirsiniz (Fast-image vs.) fakat eğer bunu kullanırsanız, varsayılan görsel sitllendirmesi kaybolur. |iOS,Android| Hayır|
22 |   |**`title`**|`string`| - | CardView başlığı |iOS,Android|
23 |   |**`titleTextAlign`**|`string`| center | CardView başlığı hizalama |iOS,Android|
24 |   |**`titleFontWeight`**|`string`| bold | CardView başlık yazı kalınlığı |iOS,Android|
25 |   |**`titleFontSize`**|`number`| 14 | CardView başlık yazı boyutu |iOS,Android|
26 |   |**`titleFontFamily`**|`string`| - | CardView başlık yazı tipi ailesi |iOS,Android| Hayır|
27 |   |**`titlePadding`**|`object`| - | Başlık **padding** değer objesi. Bu obje `top`,  `bottom`, `right`, `left` key'lerine sahip değerler içermelidir.|iOS,Android| Hayır|
28 |   |**`titleMargin`**|`object`| - | Başlık **margin** değer objesi. Bu obje `top`,  `bottom`, `right`, `left` key'lerine sahip değerler içermelidir.|iOS,Android| Hayır|
29 |   |**`titleLineHeight`**|`number`| - | Bileşen başlığı satır yüksekliği |iOS,Android| Hayır|
30 |   |**`content`**|`string`| - | CardView içerik metni. |iOS,Android| Hayır|
31 |   |**`contentFontWeight`**|`string`| 300 | CardView içerik metni yazı kalınlığı  |iOS,Android| Hayır|
32 |   |**`contentFontSize`**|`number`| 12 | CardView içerik yazı boyutu |iOS,Android|Hayır|
33 |   |**`contentTextAlign`**|`string`| justify | CardView içerik metni hizalaması |iOS,Android| Hayır|
34 |   |**`contentPadding`**|`object`| - | İçerik **padding** değer objesi. Bu obje `top`,  `bottom`, `right`, `left` key'lerine sahip değerler içermelidir.|iOS,Android| Hayır|
35 |   |**`contentMargin`**|`object`| - | İçerik **margin** değer objesi. Bu obje `top`,  `bottom`, `right`, `left` key'lerine sahip değerler içermelidir.|iOS,Android| Hayır|
36 |   |**`contentLineHeight`**|`number`| - | Bileşen içeriği satır yüksekliği |iOS,Android| Hayır|
37 |   |**`onPress`**|`func`| - | onPress fonksiyonu (Tıklama durumunda olacaklar içindir.) |iOS,Android| Hayır|
38 |   |**`contentFontFamily`**|`string`| - | Card view içerik yazı tipi ailesi |iOS,Android| Hayır|
39 | 
40 | 
41 | 
42 | 
43 | 
44 | #### Örnekler
45 | 
46 | ```jsx
47 | import { CardViewWithImage } from 'react-native-simple-card-view'
48 | ```
49 | 
50 | **Örnek tam genişliğe sahip görsel kartı**
51 | 
52 | ```jsx
53 |     <CardViewWithImage
54 |         width={ (200}
55 |         source={ {uri: 'https://placeimg.com/640/480/nature'} }
56 |         content={ 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut distinctio!' }
57 |         title={ 'React Nature :D' }
58 |         imageWidth={ '100%' }
59 |         imageHeight={ 100 }
60 |         roundedImage={ false }
61 |     />
62 | ```
63 | 
64 | **Dairesel Görsel Örneği**
65 | 
66 | ```jsx
67 |     <CardViewWithImage
68 |         width={ (300}
69 |         content={ 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut distinctio!' }
70 |         source={ {uri: 'https://placeimg.com/640/480/tech'} }
71 |         title={ 'Hello World!' }
72 |         imageWidth={ 100 }
73 |         imageHeight={ 100 }
74 |         roundedImage={ true }
75 |         roundedImageValue={ 50 }
76 |         imageMargin={ {top: 10} }
77 |     />
78 | ```
79 | 
80 | **onPress Fonksiyon Örneği**
81 | 
82 | ```jsx
83 |     <CardViewWithImage
84 |         width={ (300}
85 |         content={ 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut distinctio!' }
86 |         source={ {uri: 'https://placeimg.com/640/480/tech'} }
87 |         title={ 'Hello World!' }
88 |         imageWidth={ 100 }
89 |         imageHeight={ 100 }
90 |         onPress={() => console.log("CardViewWithImage Tıklandı!")}
91 |         roundedImage={ true }
92 |         roundedImageValue={ 50 }
93 |         imageMargin={ {top: 10} }
94 |     />
95 | ```


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import CardView from './libs/cardView';
2 | import CardViewWithIcon from './libs/cardViewWithIcon';
3 | import CardViewWithImage from './libs/cardViewWithImage';
4 | 
5 | export {
6 |   CardView,
7 |   CardViewWithIcon,
8 |   CardViewWithImage
9 | };


--------------------------------------------------------------------------------
/libs/cardView/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Dimensions, Platform, Text, TouchableOpacity, View } from 'react-native';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | class CardView extends React.Component {
 6 |   constructor(props) {
 7 |     super(props)
 8 |   }
 9 | 
10 |   // TODO : Add shadow properties to icon - in process ♨
11 | 
12 |   render() {
13 |     const container = {
14 |       shadowOffset : {
15 |         width : Platform.OS === "ios" ? this.props.style.shadowOffsetWidth : 0,
16 |         height: Platform.OS === "ios" ? this.props.style.shadowOffsetWidth : 0,
17 |       },
18 |       width        : this.props.style.width,
19 |       margin       : this.props.style.margin,
20 |       shadowColor  : this.props.style.shadowColor,
21 |       shadowOpacity: this.props.style.shadowOpacity,
22 |       shadowRadius : this.props.style.shadowRadius,
23 |       elevation    : Platform.OS === "android" ? this.props.elevation : undefined,
24 |     };
25 | 
26 |     return (
27 |       <View style={ container }>
28 |         <View style={ {
29 |           backgroundColor: this.props.style.bgColor,
30 |           overflow       : 'hidden',
31 |           padding        : this.props.style.padding,
32 |           width          : this.props.style.width,
33 |           borderRadius   : this.props.borderRadius,
34 |         } }>
35 |           <TouchableOpacity onPress={ this.props.onPress }>
36 |             { this.props.children }
37 |           </TouchableOpacity>
38 |         </View>
39 |       </View>
40 |     )
41 |   }
42 | }
43 | 
44 | 
45 | CardView.defaultProps = {
46 |   style: {
47 |     shadowColor       : '#000000',
48 |     shadowOffsetWidth : 3,
49 |     shadowOffsetHeight: 3,
50 |     shadowOpacity     : 0.1,
51 |     shadowRadius      : 3,
52 |     bgColor           : '#ffffff',
53 |     padding           : 5,
54 |     margin            : 10,
55 |     borderRadius      : 3,
56 |     width             : 300,
57 |     elevation         : 3,
58 |   },
59 | };
60 | CardView.propTypes = {
61 |   style       : PropTypes.object,
62 |   onPress     : PropTypes.func,
63 | };
64 | 
65 | export default CardView


--------------------------------------------------------------------------------
/libs/cardViewWithIcon/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { View, Dimensions, Text, Platform, TouchableOpacity } from 'react-native';
  3 | import PropTypes from 'prop-types';
  4 | import Icon from 'react-native-vector-icons/Ionicons'
  5 | 
  6 | class CardViewWithIcon extends React.Component {
  7 |   constructor(props) {
  8 |     super(props)
  9 |   }
 10 | 
 11 |   // TODO : Add shadow properties to icon - in process ♨
 12 | 
 13 |   render() {
 14 |     const container = {
 15 |       shadowOffset   : {
 16 |         width : Platform.OS === "ios" ? this.props.style.shadowOffsetWidth : 0,
 17 |         height: Platform.OS === "ios" ? this.props.style.shadowOffsetWidth : 0,
 18 |       },
 19 |       backgroundColor: this.props.style.bgColor,
 20 |       width          : this.props.style.width,
 21 |       padding        : this.props.style.padding,
 22 |       margin         : this.props.style.margin,
 23 |       borderRadius   : this.props.style.borderRadius,
 24 |       shadowColor    : this.props.style.shadowColor,
 25 |       shadowOpacity  : this.props.style.shadowOpacity,
 26 |       shadowRadius   : this.props.style.shadowRadius,
 27 |       elevation      : Platform.OS === "android" ? this.props.style.elevation : 0,
 28 |     };
 29 |     const icon = {
 30 |       margin         : this.props.iconMargin,
 31 |       borderWidth    : this.props.withBorder ? this.props.iconBorderWidth : undefined,
 32 |       borderColor    : this.props.withBorder ? this.props.iconBgColor : undefined,
 33 |       borderRadius   : this.props.roundedIconBg ? this.props.iconBorderRadius : undefined,
 34 |       width          : this.props.iconWidth,
 35 |       height         : this.props.iconHeight,
 36 |       alignSelf      : 'center',
 37 |       justifyContent : 'center',
 38 |       alignItems     : 'center',
 39 |       backgroundColor: this.props.withBackground ? this.props.iconBgColor : undefined,
 40 |     };
 41 |     const title = {
 42 |       alignSelf    : 'center',
 43 |       fontWeight   : this.props.titleFontWeight,
 44 |       fontSize     : this.props.titleFontSize,
 45 |       fontFamily   : this.props.titleFontFamily,
 46 |       paddingBottom: this.props.titlePaddingBottom,
 47 |       paddingTop   : this.props.titlePaddingTop,
 48 |       paddingLeft  : this.props.titlePaddingLeft,
 49 |       paddingRight : this.props.titlePaddingRight,
 50 |     };
 51 |     const plainText = {
 52 |       alignSelf    : 'center',
 53 |       fontWeight   : this.props.contentFontWeight,
 54 |       fontSize     : this.props.contentFontSize,
 55 |       fontFamily   : this.props.contentFontFamily,
 56 |       textAlign    : this.props.contentTextAlign,
 57 |       paddingLeft  : this.props.contentPaddingLeft,
 58 |       paddingRight : this.props.contentPaddingRight,
 59 |       paddingBottom: this.props.contentPaddingBottom,
 60 |       paddingTop   : this.props.contentPaddingTop,
 61 |     };
 62 | 
 63 |     const cardContent = <View>
 64 |       <View style={ icon }>
 65 |         <Icon
 66 |           style={ {textAlign: 'center'} }
 67 |           name={ Platform.OS === "android" ? this.props.androidIcon : this.props.iosIcon }
 68 |           size={ this.props.iconSize }
 69 |           color={ this.props.iconColor }
 70 |         />
 71 |       </View>
 72 |       { this.props.title !== undefined ? <Text style={ title }>{ this.props.title }</Text> : undefined }
 73 |       { this.props.content !== undefined ? <Text style={ plainText }>{ this.props.content }</Text> : undefined }
 74 |     </View>;
 75 | 
 76 |     if (this.props.onPress !== undefined) {
 77 |       return (
 78 |         <View style={ container }>
 79 |           <TouchableOpacity onPress={ this.props.onPress }>
 80 |             { cardContent }
 81 |           </TouchableOpacity>
 82 |         </View>
 83 |       );
 84 |     } else {
 85 |       return (
 86 |         <View style={ container }>
 87 |           { cardContent }
 88 |         </View>
 89 |       );
 90 |     }
 91 | 
 92 |   }
 93 | }
 94 | 
 95 | 
 96 | CardViewWithIcon.defaultProps = {
 97 |   style               : {
 98 |     shadowColor       : '#000000',
 99 |     shadowOffsetWidth : 3,
100 |     shadowOffsetHeight: 3,
101 |     shadowOpacity     : 0.3,
102 |     shadowRadius      : 3,
103 |     bgColor           : '#ffffff',
104 |     padding           : 5,
105 |     margin            : 10,
106 |     borderRadius      : 3,
107 |     width             : 300,
108 |     elevation         : 3,
109 |   },
110 |   // ICON
111 |   iosIcon             : 'ios-bonfire-outline',
112 |   androidIcon         : 'md-bonfire',
113 |   iconBgColor         : '#b13757',
114 |   iconColor           : '#ffffff',
115 |   roundedIconBg       : true,
116 |   iconSize            : 40,
117 |   iconMargin          : 15,
118 |   iconWidth           : 80,
119 |   iconHeight          : 80,
120 |   iconBorderRadius    : 40,
121 |   iconBorderWidth     : 0.5,
122 |   withBackground      : true,
123 |   withBorder          : false,
124 |   //TITLE
125 |   titleTextAlign      : 'center',
126 |   titleFontWeight     : 'bold',
127 |   titleFontSize       : 14,
128 |   titleFontFamily     : undefined,
129 |   titlePaddingBottom  : 10,
130 |   titlePaddingTop     : 0,
131 |   titlePaddingLeft    : 0,
132 |   titlePaddingRight   : 0,
133 |   // CONTENT
134 |   contentFontWeight   : '300',
135 |   contentFontSize     : 12,
136 |   contentFontFamily   : undefined,
137 |   contentTextAlign    : 'center',
138 |   contentPaddingLeft  : 10,
139 |   contentPaddingRight : 10,
140 |   contentPaddingBottom: 10,
141 |   contentPaddingTop   : 0,
142 | };
143 | CardViewWithIcon.propTypes = {
144 |   onPress             : PropTypes.func,
145 |   style               : PropTypes.object,
146 |   width               : PropTypes.number,
147 |   height              : PropTypes.number,
148 |   elevation           : PropTypes.number,
149 |   padding             : PropTypes.number,
150 |   margin              : PropTypes.number,
151 |   borderRadius        : PropTypes.number,
152 |   shadowColor         : PropTypes.string,
153 |   shadowOpacity       : PropTypes.number,
154 |   shadowRadius        : PropTypes.number,
155 |   shadowOffsetWidth   : PropTypes.number,
156 |   shadowOffsetHeight  : PropTypes.number,
157 |   bgColor             : PropTypes.string,
158 |   // ICON
159 |   iosIcon             : PropTypes.string,
160 |   androidIcon         : PropTypes.string,
161 |   iconBgColor         : PropTypes.string,
162 |   iconColor           : PropTypes.string,
163 |   iconSize            : PropTypes.number,
164 |   iconMargin          : PropTypes.number,
165 |   iconWidth           : PropTypes.number,
166 |   iconHeight          : PropTypes.number,
167 |   iconBorderRadius    : PropTypes.number,
168 |   iconBorderWidth     : PropTypes.number,
169 |   withBackground      : PropTypes.bool,
170 |   withBorder          : PropTypes.bool,
171 |   roundedIconBg       : PropTypes.bool,
172 |   // TITLE
173 |   title               : PropTypes.string,
174 |   titleTextAlign      : PropTypes.string,
175 |   titleFontWeight     : PropTypes.string,
176 |   titleFontSize       : PropTypes.number,
177 |   titleFontFamily     : PropTypes.string,
178 |   titlePaddingBottom  : PropTypes.number,
179 |   titlePaddingTop     : PropTypes.number,
180 |   titlePaddingLeft    : PropTypes.number,
181 |   titlePaddingRight   : PropTypes.number,
182 |   // CONTENT
183 |   content             : PropTypes.string,
184 |   contentFontWeight   : PropTypes.string,
185 |   contentFontSize     : PropTypes.number,
186 |   contentFontFamily   : PropTypes.string,
187 |   contentTextAlign    : PropTypes.string,
188 |   contentPaddingLeft  : PropTypes.number,
189 |   contentPaddingRight : PropTypes.number,
190 |   contentPaddingBottom: PropTypes.number,
191 |   contentPaddingTop   : PropTypes.number,
192 | };
193 | 
194 | export default CardViewWithIcon


--------------------------------------------------------------------------------
/libs/cardViewWithImage/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { View, Dimensions, Text, Platform, TouchableOpacity, Image, Button } from 'react-native';
  3 | import PropTypes from 'prop-types'
  4 | 
  5 | class CardViewWithImage extends Component {
  6 | 
  7 |   // TODO: button olayını geliştir
  8 |   render() {
  9 |     const container = {
 10 |       overflow    : 'hidden',
 11 |       borderRadius: this.props.style.borderRadius,
 12 |     };
 13 |     const titleStyle = {
 14 |       alignSelf    : 'center',
 15 |       fontWeight   : this.props.titleFontWeight,
 16 |       fontSize     : this.props.titleFontSize,
 17 |       fontFamily   : this.props.titleFontFamily,
 18 |       marginTop    : this.props.titleMargin.top,
 19 |       marginBottom : this.props.titleMargin.bottom,
 20 |       marginRight  : this.props.titleMargin.right,
 21 |       marginLeft   : this.props.titleMargin.left,
 22 |       paddingTop   : this.props.titlePadding.top,
 23 |       paddingBottom: this.props.titlePadding.bottom,
 24 |       paddingRight : this.props.titlePadding.right,
 25 |       paddingLeft  : this.props.titlePadding.left,
 26 |       lineHeight   : this.props.titleLineHeight,
 27 |     };
 28 | 
 29 |     const contentStyle = {
 30 |       alignSelf    : 'center',
 31 |       fontWeight   : this.props.contentFontWeight,
 32 |       fontSize     : this.props.contentFontSize,
 33 |       fontFamily   : this.props.contentFontFamily,
 34 |       textAlign    : this.props.contentTextAlign,
 35 |       lineHeight   : this.props.contentLineHeight,
 36 |       marginTop    : this.props.contentMargin.top,
 37 |       marginBottom : this.props.contentMargin.bottom,
 38 |       marginRight  : this.props.contentMargin.right,
 39 |       marginLeft   : this.props.contentMargin.left,
 40 |       paddingTop   : this.props.contentPadding.top,
 41 |       paddingBottom: this.props.contentPadding.bottom,
 42 |       paddingRight : this.props.contentPadding.right,
 43 |       paddingLeft  : this.props.contentPadding.left,
 44 |     };
 45 |     const content = <View style={ container }>
 46 |       { this.props.imageComponent === undefined ? <Image
 47 |         resizeMode={ 'cover' }
 48 |         style={ {
 49 |           width       : this.props.imageWidth,
 50 |           height      : this.props.imageHeight,
 51 |           borderRadius: this.props.roundedImage ? this.props.roundedImageValue : undefined,
 52 |           alignSelf   : 'center',
 53 |           marginTop   : this.props.imageMargin.top,
 54 |           marginBottom: this.props.imageMargin.bottom,
 55 |           marginRight : this.props.imageMargin.right,
 56 |           marginLeft  : this.props.imageMargin.left,
 57 |         } }
 58 |         source={ this.props.source }
 59 |       /> : this.props.imageComponent }
 60 |       { this.props.title !== undefined ? <Text style={ titleStyle }>{ this.props.title }</Text> : undefined }
 61 |       { this.props.content !== undefined ? <Text style={ contentStyle }>{ this.props.content }</Text> : undefined }
 62 |       { this.props.buttonComponent }
 63 |     </View>;
 64 | 
 65 |     return (
 66 |       <View style={ {
 67 |         margin         : this.props.style.margin,
 68 |         width          : this.props.width,
 69 |         height         : this.props.style.height,
 70 |         padding        : this.props.style.padding,
 71 |         shadowOffset   : {
 72 |           width : Platform.OS === "ios" ? this.props.style.shadowOffsetWidth : 0,
 73 |           height: Platform.OS === "ios" ? this.props.style.shadowOffsetWidth : 0,
 74 |         },
 75 |         backgroundColor: this.props.style.bgColor,
 76 |         shadowColor    : this.props.style.shadowColor,
 77 |         shadowOpacity  : this.props.style.shadowOpacity,
 78 |         shadowRadius   : this.props.style.shadowRadius,
 79 |         elevation      : Platform.OS === "android" ? this.props.style.elevation : 0,
 80 |         borderRadius   : this.props.style.borderRadius,
 81 |       } }>
 82 |         { this.props.onPress !== undefined ?
 83 |           <TouchableOpacity onPress={ this.props.onPress }>{ content }</TouchableOpacity> : content }
 84 |       </View>
 85 |     )
 86 |   }
 87 | }
 88 | 
 89 | CardViewWithImage.defaultProps = {
 90 |   width            : 300,
 91 |   style            : {
 92 |     shadowColor       : '#000000',
 93 |     shadowOffsetWidth : 3,
 94 |     shadowOffsetHeight: 3,
 95 |     shadowOpacity     : 0.1,
 96 |     shadowRadius      : 3,
 97 |     bgColor           : '#ffffff',
 98 |     borderRadius      : 3,
 99 |     elevation         : 3,
100 |     margin            : 10
101 |   },
102 |   roundedImage     : true,
103 |   roundedImageValue: 50,
104 |   imageMargin      : {
105 |     top   : undefined,
106 |     bottom: undefined,
107 |     left  : undefined,
108 |     right : undefined
109 |   },
110 |   imageWidth       : 100,
111 |   imageHeight      : 100,
112 | 
113 |   //TITLE
114 |   titleTextAlign   : 'center',
115 |   titleFontWeight  : 'bold',
116 |   titleFontSize    : 18,
117 |   titleFontFamily  : undefined,
118 |   titlePadding     : {
119 |     top   : 10,
120 |     bottom: 10,
121 |     left  : undefined,
122 |     right : undefined
123 |   },
124 |   titleMargin      : {
125 |     top   : undefined,
126 |     bottom: undefined,
127 |     left  : undefined,
128 |     right : undefined
129 |   },
130 |   // CONTENT
131 |   contentFontWeight: '400',
132 |   contentFontSize  : 13,
133 |   contentFontFamily: undefined,
134 |   contentTextAlign : 'justify',
135 |   contentPadding   : {
136 |     top   : undefined,
137 |     bottom: 10,
138 |     left  : 10,
139 |     right : 10
140 |   },
141 |   contentMargin    : {
142 |     top   : undefined,
143 |     bottom: undefined,
144 |     left  : undefined,
145 |     right : undefined
146 |   },
147 |   contentLineHeight: 18,
148 | };
149 | CardViewWithImage.propTypes = {
150 |   width            : PropTypes.number,
151 |   style            : PropTypes.object,
152 |   // TITLE
153 |   title            : PropTypes.string,
154 |   titleTextAlign   : PropTypes.string,
155 |   titleFontWeight  : PropTypes.string,
156 |   titleFontSize    : PropTypes.number,
157 |   titleFontFamily  : PropTypes.string,
158 |   titlePadding     : PropTypes.object,
159 |   titleMargin      : PropTypes.object,
160 |   titleLineHeight  : PropTypes.number,
161 |   // CONTENT
162 |   content          : PropTypes.string,
163 |   contentFontWeight: PropTypes.string,
164 |   contentFontSize  : PropTypes.number,
165 |   contentFontFamily: PropTypes.string,
166 |   contentTextAlign : PropTypes.string,
167 |   contentPadding   : PropTypes.object,
168 |   contentMargin    : PropTypes.object,
169 |   contentLineHeight: PropTypes.number,
170 |   // Button
171 |   buttonComponent  : PropTypes.object,
172 |   // Image
173 |   imageComponent   : PropTypes.object,
174 |   roundedImage     : PropTypes.bool,
175 |   roundedImageValue: PropTypes.number,
176 |   imageMargin      : PropTypes.object,
177 |   imageWidth       : PropTypes.number,
178 | };
179 | 
180 | export default CardViewWithImage


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-simple-card-view",
 3 |   "version": "0.3.0",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "https://github.com/talut/react-native-simple-card-view.git"
 7 |   },
 8 |   "description": "Easiest way to add a card view on your screen.",
 9 |   "keywords": [
10 |     "react-native",
11 |     "card-view",
12 |     "card-view-icon",
13 |     "card-view-image",
14 |     "react-native-card",
15 |     "card"
16 |   ],
17 |   "main": "index.js",
18 |   "author": "Talut Tasgiran",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/talut/react-native-simple-card-view/issues"
22 |   },
23 |   "scripts": {
24 |     "start": "node node_modules/react-native/local-cli/cli.js start"
25 |   },
26 |   "homepage": "https://github.com/talut/react-native-simple-card-view",
27 |   "dependencies": {
28 |     "prop-types": "^15.6.0",
29 |     "react-native-vector-icons": "^4.5.0"
30 |   }
31 | }
32 | 


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