search

Paraboly / react-native-card

Fully customizable Card View Components for React Native.
http://www.paraboly.com
MIT License
130 stars 10 forks source link
card generic paraboly react react-native

readme

Paraboly React Native Card

Fully customizable Card View for React Native.

npm version npm expo-compatible License: MIT

Card Component

Paraboly React Native Card Paraboly React Native Card

SimpleCard Component

Paraboly React Native Card Paraboly React Native Card

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

Installation

Add the dependency:

npm i @paraboly/react-native-card

Peer Dependencies

IMPORTANT! You need install them
"react-native-vector-icons": ">= 7.1.0",
"react-native-dynamic-vector-icons": ">= 1.1.4",
"@freakycoder/react-native-bounceable": ">= 0.2.4"

Expo Version

Installation

Add the dependency:

npm i Paraboly/react-native-card#expo

Expo Dependencies

IMPORTANT! You need install them
"@freakycoder/react-native-bounceable": ">= 0.2.4"

IconType prop is available to set any icon set from @expo/vector-icons

You will also need to follow the installation instructions for react-native-vector-icons

Basic Usage

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

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

Card with Icon

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

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

Configuration - Props

Name Type Description
backgroundColor String The colour of the card's main background area
borderRadius Number Changes the curvature size of the corners
bottomRightComponent JSX.Element
bottomRightText String Text displayed at the bottom right of the card
bottomRightTextStyle CustomTextStyleProp Styling for the bottom right text
containerHeight Number The height of the card
description String The smaller descriptive text in the card
iconBackgroundColor String The color of the area behind the icon
iconColor String The colour of the icon
iconDisable Boolean
iconName String The name of the icon displayed. To hide the icon leave blank along with iconType (iconName="", iconType="")
iconSize Number The size of the icon
iconType String The icon library that the icon you want to use comes from. Choose from: "FontAwesome", "AntDesign", "MaterialIcons", "EvilIcons", "Entypo", "Foundation", "Ionicons", "MaterialCommunityIcons", "Zocial", "Octicons", "SimpleLineIcons", "Fontisto", "Feather", "FontAwesome5". To hide the icon leave blank along with iconName(iconName="", iconType="")
onPress (() => void) Function to execute on press
shadowStyle CustomStyleProp
style CustomStyleProp Styling for the card
textContainerNumberOfLines Number The number of lines in the card
title String The text contained in the title area of the card
topRightComponent JSX.Element
topRightText String Text displayed at the top right of the card
topRightTextStyle CustomTextStyleProp Styling for the top right text

Author

FreakyCoder, kurayogun@gmail.com | kuray.ogun@paraboly.com

License

Paraboly React Native Card Library is available under the MIT license. See the LICENSE file for more info.