Skip to content

Commit

Permalink
Library is tested and ready to deploy
Browse files Browse the repository at this point in the history
  • Loading branch information
WrathChaos committed Nov 5, 2020
1 parent 1d61b1a commit a1ff188
Show file tree
Hide file tree
Showing 62 changed files with 3,774 additions and 3,193 deletions.
89 changes: 17 additions & 72 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<img alt="Paraboly React Native Card" src="https://github.com/Paraboly/react-native-card/blob/master/assets/Screenshots/logo.png" width="1050"/>
<img alt="Paraboly React Native Card" src="assets/Screenshots/logo.png" width="1050"/>

Fully customizable Card View for React Native.

Expand All @@ -10,17 +10,21 @@ Fully customizable Card View for React Native.
## Card Component

<p align="center">
<img alt="Paraboly React Native Card" src="https://github.com/Paraboly/react-native-card/blob/master/assets/Screenshots/example.png" width="49.7%"/>
<img alt="Paraboly React Native Card" src="https://github.com/Paraboly/react-native-card/blob/master/assets/Screenshots/example2.png" width="49.7%"/>
<img alt="Paraboly React Native Card" src="assets/Screenshots/example.png" width="49.7%"/>
<img alt="Paraboly React Native Card" src="assets/Screenshots/example2.png" width="49.7%"/>
</p>

## SimpleCard Component

<p align="center">
<img alt="Paraboly React Native Card" src="https://github.com/Paraboly/react-native-card/blob/master/assets/Screenshots/example3.png" width="49.7%"/>
<img alt="Paraboly React Native Card" src="https://github.com/Paraboly/react-native-card/blob/master/assets/Screenshots/example4.png" width="49.7%"/>
<img alt="Paraboly React Native Card" src="assets/Screenshots/example3.png" width="49.7%"/>
<img alt="Paraboly React Native Card" src="assets/Screenshots/example4.png" width="49.7%"/>
</p>

## Version 1 is here 😍

Finally version 1 is here after 2 years :) Completely re-written with Typescript and much better props and customization options.

## Components included:

- [x] [Card](https://github.com/Paraboly/react-native-card#basic-usage)
Expand All @@ -38,13 +42,10 @@ npm i @paraboly/react-native-card

##### IMPORTANT! You need install them.

```
"@freakycoder/react-native-helpers": ">= 0.1.2",
"react": ">= 16.x",
"react-native": ">= 0.55.x",
"react-native-material-ripple": ">= 0.8.x",
"react-native-dynamic-vector-icons": ">= x.x.x"
"react-native-vector-icons": ">= x.x.x"
```bash
"react-native-vector-icons": ">= 7.1.0",
"react-native-dynamic-vector-icons": ">= 1.1.4",
"@freakycoder/react-native-bounceable": ">= 0.2.4"
```

## Basic Usage
Expand All @@ -55,7 +56,7 @@ import { Card } from "@paraboly/react-native-card";
<Card
iconDisable
title="Title"
content="Main Content"
description="Main Content"
bottomRightText="30"
onPress={() => {}}
/>;
Expand All @@ -67,13 +68,11 @@ import { Card } from "@paraboly/react-native-card";
<Card
title="Title"
iconName="home"
defaultTitle=""
iconType="Entypo"
defaultContent=""
onPress={() => {}}
topRightText="50/301"
bottomRightText="30 km"
content="Lorem ipsum dolor sit."
description="Lorem ipsum dolor sit."
onPress={() => {}}
/>
```

Expand Down Expand Up @@ -101,61 +100,7 @@ import { SimpleCard } from "@paraboly/react-native-card";

### Configuration - Props

#### Card

| Property | Type | Default | Description |
| -------------------------- | :--------: | :------------------: | ---------------------------------------------------------------------------------------------------- |
| title | string | "" | use this to change the title |
| style | style | style | use this to change the main container's style |
| onPress | function | null | set the onPress function |
| content | string | "" | set content |
| iconComponent | component | Icon | use your own icon component |
| iconName | string | "home" | set icon from dynamic vector icons |
| iconColor | color | #ffffff | set icon's color |
| iconSize | number | 16 | set icon's size |
| iconType | string | "Entypo" | set icon's family type |
| iconDisable | boolean | false | disable the whole icon component |
| shadowStyle | style | default shadow style | change the card's shadow style |
| defaultTitle | string | "" | set the default title if title prop is not set |
| defaultContent | string | "" | set the default content if content prop is not set |
| titleStyle | style | style | set your own style for main title component |
| titleColor | color | "#505e80" | change title color |
| titleFontSize | number | 18 | change title's font size |
| titleFontFamily | FontFamily | default | change title's font family |
| contextStyle | style | style | set your own style for main context component |
| contextTextColor | color | "#959aa8" | change context color |
| contextFontSize | number | 14 | change context's font size |
| contextFontFamily | FontFamily | default | change context's font family |
| contentStyle | style | style | set your own style for content component |
| bottomRightStyle | style | style | set your own style for bottom right component |
| bottomRightComponent | component | component | use your own component for bottom right side |
| bottomRightText | string | "" | set the bottom right text |
| bottomRightFontSize | number | 20 | set the bottom right text's font size |
| bottomRightColor | color | "#505e80" | set the bottom right text's font color |
| topRightStyle | style | style | set your own style for top right component |
| topRightComponent | component | component | use your own component for top right side |
| topRightText | string | "" | set the top right text |
| topRightFontSize | number | 16 | set the top right text's font size |
| topRightColor | color | "#505e80" | set the top right text's font color |
| containerHeight | number | null | set the content's container height |
| iconBackgroundColor | color | "pink" | set the icon's background color |
| borderRadius | number | 15 | set the conten'ts container border radius |
| textContainerNumberOfLines | number | null | you can set the number of lines for the text container if you **do not** want the **dynamic height** |

#### SimpleCard

| Property | Type | Default | Description |
| --------------------------- | :--------: | :------------------------: | ---------------------------------------------- |
| title | string | "" | use this to change the title |
| style | style | style | use this to change the main container's style |
| innerContainerStyle | style | style | use this to change the inner container's style |
| onPress | function | null | set the onPress function |
| titleFontSize | number | 14 | change the text's font size |
| titleTextColor | number | "#505e80" | change the text's color |
| titleFontFamily | FontFamily | default | set your own FontFamily for the text component |
| backgroundColor | color | #ffffff | change the main card's background color |
| rippleColor | color | "rgba(110, 157, 251, 1.0)" | change onPress's ripple color |
| rippleContainerBorderRadius | number | 12 | change the ripple's border radius |
#### New Configuration Documentation is available soon!

## Author

Expand Down
2 changes: 2 additions & 0 deletions example/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
module.exports = {
root: true,
extends: '@react-native-community',
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
};
75 changes: 0 additions & 75 deletions example/.flowconfig

This file was deleted.

4 changes: 4 additions & 0 deletions example/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ build/
local.properties
*.iml

# Visual Studio Code
#
.vscode/

# node.js
#
node_modules/
Expand Down
62 changes: 0 additions & 62 deletions example/App.js

This file was deleted.

61 changes: 61 additions & 0 deletions example/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React from "react";
import { StyleSheet, View } from "react-native";
import { Card, SimpleCard } from "@paraboly/react-native-card";

export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Card
title="Title"
onPress={() => {}}
borderRadius={20}
containerHeight={100}
topRightText="50/306"
bottomRightText="30 km"
iconBackgroundColor="#fcd"
textContainerNumberOfLines={3}
description="Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Donec sed odio dui."
topRightTextStyle={{
fontSize: 12,
fontWeight: "700",
color: "#505e80",
}}
bottomRightTextStyle={{
fontSize: 16,
fontWeight: "bold",
color: "#505e80",
}}
/>

<View
style={{
marginTop: 16,
alignItems: "center",
flexDirection: "column",
}}
>
<SimpleCard text="Dynamic width & height simple card" />
<View style={{ marginTop: 16 }}>
<SimpleCard
text="Custom width & dynamic height simple card: Multiple Lines"
style={{ width: 200 }}
/>
</View>
<View style={{ marginTop: 16 }}>
<SimpleCard text="Dynamic width & height simple card: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s" />
</View>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
backgroundColor: "#fff",
justifyContent: "center",
},
});
File renamed without changes.
File renamed without changes.
Loading

0 comments on commit a1ff188

Please sign in to comment.