paraboly / react-native-card Goto Github PK

View Code? Open in Web Editor NEW

129.0 3.0 10.0 1.93 MB

Fully customizable Card View Components for React Native.

Home Page: http://www.paraboly.com

License: MIT License

JavaScript 6.23% Java 23.42% Ruby 2.87% Objective-C 16.69% Starlark 2.27% TypeScript 48.52%

react-native react card generic paraboly

react-native-card's Introduction

Fully customizable Card View for React Native.

Card Component

SimpleCard Component

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

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

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, [email protected] | [email protected]

License

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

react-native-card's People

Contributors

Stargazers

Watchers

Forkers

trendingtechnology fbonesso vaseem14 mbambangsumantri chentogit mjm918 agunnamdi imjiten umair-gujjar alextheedwards

react-native-card's Issues

Dynamic Height for Card component

I'd really appreciate dynamic height being implemented on the Card component!

It's implemented on the "SimpleCard" but not in the "Card" one.
The idea is basically adjusting the height of the card depending on the size of the content inside.

Thanks!

Could not find a declaration file for module '@paraboly/react-native-card'

I am getting this error in vscode. I can't find type definitions.

Failed building JavaScript bundle. Expo

Im using Expo, I have require dependencies:

...
"@freakycoder/react-native-bounceable": "^0.2.4",
"@paraboly/react-native-card": "github:Paraboly/react-native-card#expo",
...

But Im getting the following error:

While trying to resolve module `@paraboly/react-native-card` from file `C:\Users\App\src\screens\Home\index.js`, the package `C:\Users\App\node_modules\@paraboly\react-native-card\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\App\node_modules\@paraboly\react-native-card\build\dist\index.js`. Indeed, none of these files exist:
C:\Users\App\node_modules\@paraboly\react-native-card\build\dist\index.js

Unable to set icon (Android)

I'm trying to set the icon at the left of the card

I've tried a few different icons and libraries but can only get either a question mark or a square with a cross in it

Even copying the example code from the docs is giving me this result.

I've copied my package.json below in case I have missed any imports

 {
   "name": "CardTesting",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint ."
   },
   "dependencies": {
     "@freakycoder/react-native-bounceable": ">= 0.2.4",
     "@paraboly/react-native-card": "^1.0.3",
     "react": "18.1.0",
     "react-entypo-icons": "^1.4.1",
     "react-native": "0.70.6",
     "react-native-androw": "^0.0.34",
     "react-native-dynamic-vector-icons": ">= 1.1.4",
     "react-native-ionicons": "^4.6.5",
     "react-native-vector-icons": ">= 7.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
     "babel-jest": "^26.6.3",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "0.72.3"
   },
   "jest": {
     "preset": "react-native"
   }
 }

When I run the app, i get two logs returned in metro

 LOG  Running "CardTesting" with {"rootTag":1}
 LOG  s

How to use a card with an empty icon? | Icons are way off their place

Hey! I found that color area super cool without an icon, but I'm not sure how to use it without an icon and getting a warning in the console.

Plus, I'm not sure why, but the icon is way off the center, don't know how to fix that either.

Unable to resolve module

I can see it inside node_modules.

But it returns;

Unable to resolve "react-native-androw" from "node_modules/@paraboly/react-native-card/build/dist/components/Card/Card.js"

error.

what could be the problem?

paraboly / react-native-card Goto Github PK

react-native-card's Introduction

Card Component

SimpleCard Component

Version 1 is here 😍

Components included

Installation

Peer Dependencies

IMPORTANT! You need install them

Expo Version

Installation

Expo Dependencies

IMPORTANT! You need install them

Basic Usage

Card with Icon

SimpleCard Basic Usage

SimpleCard Custom Usage

Example Application

Configuration - Props

Author

License

react-native-card's People

Contributors

Stargazers

Watchers

Forkers

react-native-card's Issues

Recommend Projects

Recommend Topics

Recommend Org