Fully customizable colorful card component for React Native.
npm install @freakycoder/react-native-colorful-card




!Platform - Android and iOS


Add the dependency:
``bash`
npm i @freakycoder/react-native-colorful-card
`js`
"@freakycoder/react-native-bounceable": ">= 0.2.4"
`jsx`
import ColorfulCard from "@freakycoder/react-native-colorful-card";
`jsx`
value="8"
valuePostfix="h 42 m"
footerTitle="Deep Sleep"
footerValue="3h 13m"
iconImageSource={require("./assets/sleep.png")}
style={{ backgroundColor: "#7954ff" }}
onPress={() => {}}
/>
You can checkout the example project 🥰
Simply run
- npm ireact-native run-ios/android`
-
should work of the example project.
| Property | Type | Default | Description |
| --------------- | :------: | :-------: | ------------------------------------------------------------------ |
| title | string | undefined | change the title string |
| value | string | undefined | change the value string |
| valuePostfix | string | undefined | change the value postfix string |
| footerTitle | string | undefined | change the footerTitle string |
| footerValue | string | undefined | change the footerValue string |
| iconImageSource | image | undefined | set your own image source for the icon |
| onPress | function | undefined | set your own logic for the button functionality when it is pressed |
| Property | Type | Default | Description |
| --------------------- | :--------: | :-----: | ---------------------------------------------------------------------- |
| style | ViewStyle | default | set or override the style object for the main container |
| iconImageStyle | ImageStyle | default | set or override the image style object for the icon container |
| titleTextStyle | TextStyle | default | set or override the text style object for the title text |
| footerTextStyle | TextStyle | default | set or override the text style object for the footer text |
| valueTextStyle | TextStyle | default | set or override the text style object for the value text |
| valuePostfixTextStyle | TextStyle | default | set or override the text style object for the value postfix text |
| ImageComponent | Image | default | set your own component instead of default react-native Image component |
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
FreakyCoder, kurayogun@gmail.com
Heavily inspired by WebFrontEndTips
React Native Colorful Card is available under the MIT license. See the LICENSE file for more info.