react-native-notification-stack-card v0.1.0

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:

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

Function

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:

1) Clone this repository: https://github.com/iqbalansyor/react-native-notification-stack-card.git 2) Navigate to the demo application: cd path/to/this/repository/react-native-notification-stack-card/Example 3) Install demo application dependencies: npm install 4) For ios, run cd ios && pod install && cd .. 5) Run npm run start || react-native run-android || react-native run-ios

Contact me

• Iqbal Ansyori - ansyori.iqbal@gmail.com

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.