Update README.md

README.md

@@ -4,18 +4,94 @@
 
 # React Native Notification Stack Card
 
-A React Native Notification Stack Card
+A React Native list animation for creating Notification Stack 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:
+
+1. You can use `closeButtonView` props. The position is absolute (left: 20, top: 20). Pass your `x` icon or anything your view.
+2. 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 `VegaScrollList` component in use.
+This repository contains a demo React Native application with a customizable example of the `StackCardList` component in use.
 
 To use the demo application: