react-native-notification-stack-card
v0.1.0
Published
A React Native stack list for notification card
Downloads
15
Maintainers
Readme
React Native Notification Stack Card
A React Native stack list for notification card
Preview
Installation
npm install react-native-notification-stack-card --save
Usage
Import StackCardList component:
import StackCardList from 'react-native-notification-stack-card';
Usage:
<StackCardList
data={data}
visibleItems={VISIBLE_ITEMS}
itemWidth={ITEM_WIDTH}
itemHeight={ITEM_HEIGHT}
closeButtonView={<Icon name={'close'} color={'#ffffff'} size={20} />}
stackType={'above'}
spacing={SPACING}
onEmpty={this.onEmpty}
onItemPress={this.onItemPress}
renderItem={this.renderItem}
/>
)
Customize your notification view based on index and activeIndex:
const renderItem = (item: any) => {
const {index, activeIndex} = item;
const isActiveIndex = index === activeIndex;
const isSecondIndex = (index === index) === activeIndex + 1;
const isThirdIndex = index === activeIndex + 2;
const isAfterClicked = index < activeIndex;
const backgroundColor = isActiveIndex
? 'transparent'
: isSecondIndex
? '#95A9F7'
: isThirdIndex
? '#BDC9F9'
: isAfterClicked
? '#BDC9F9'
: '#95A9F7';
return <YourContentView backgroundColor={backgroundColor} />;
};
closeButtonView
To create close button there are 2 option:
- You can use
closeButtonView
props. The position is absolute (left: 20, top: 20). Pass yourx
icon or anything your view.
- Create you own close button. And use
next()
when it pressed.
Configuration
Props
| prop | type/valid values | default | description |
| - | - | - | - |
| visibleItems | number | 3 | Number of visible items |
| stackType | string | 'below' | above / below |
| data | any | [] | Array data of notification item |
| itemWidth | number | 100 | Note: You also need configure width
on your renderItem
|
| itemHeight | number | 100 | Note: You also need configure height
on your renderItem
|
| spacing | number | 10 | Spacing of your item |
| closeButtonView | ReactElement | null | View of close button |
| renderItem | (item: any) => () | null | Rendering your item. Destructure activeIndex
from item
and customize based on it. |
| onItemPress | (index: number: item: any) => () | null | Callback when your item press |
| onEmpty | () => () | null | Callback when you already close all your item |
Function
| function | description | | - | - | | next() | To close your active notif and next to the notif behind |
Demo Application
This repository contains a demo React Native application with a customizable example of the StackCardList
component in use.
To use the demo application:
- Clone this repository:
https://github.com/iqbalansyor/react-native-notification-stack-card.git
- Navigate to the demo application:
cd path/to/this/repository/react-native-notification-stack-card/Example
- Install demo application dependencies:
npm install
- For ios, run
cd ios && pod install && cd ..
- Run
npm run start
||react-native run-android
||react-native run-ios
Contact me
- Iqbal Ansyori - [email protected]
Contributing
Feel free to try it out. Please submit a pull request with any features/fixes for the project.
License
This project is licensed under the MIT License - see the MIT Open Source Initiative for details.