Fully customizable Card View for React Native

react-native-card

Fully customizable Card View for React Native.

Card Component

SimpleCard Component

Components included:

• [x] Card
• [x] SimpleCard

Installation

Add the dependency:

npm i @paraboly/react-native-card

Peer Dependencies

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"

Basic Usage

import { Card } from "@paraboly/react-native-card";

<Card
  iconDisable
  title="Title"
  content="Main Content"
  bottomRightText="30"
  onPress={() => {}}
/>;

Card with Icon

<Card
  title="Title"
  iconName="home"
  defaultTitle=""
  iconType="Entypo"
  defaultContent=""
  onPress={() => {}}
  topRightText="50/301"
  bottomRightText="30 km"
  content="Lorem ipsum dolor sit."
/>

SimpleCard Basic Usage

import { SimpleCard } from "@paraboly/react-native-card";

<SimpleCard title="Dynamic width & height simple card" />;

SimpleCard Custom Usage

<SimpleCard
  title="Custom width & dynamic height simple card: Multiple Lines"
  styles={{ width: 200 }}
/>

Example Application

• check the code, and yes! :) all of the images, screenshots are directly taken
  from the this example. Of course, you can simply clone the project and run the example on your own environment.

Configuration - Props

Card

SimpleCard

Author

FreakyCoder, [email protected] | [email protected]

GitHub