react-native-elastic-stack

React Native component that implements elastic stack effect

Installation

$ npm install @monterosa/react-native-elastic-stack --save

Demo

| | | | |

Basic Usage

import ElasticStack from '@monterosa/react-native-elastic-stack';

// Inside of a component's render() method:
render() {
  return (
    <ElasticStack
      items={Array.from({ length: 5 }).map(
        (_, i) => `http://lorempixel.com/640/480/city/?item=${i}`,
      )}
      itemWidth={itemWidth}
      itemHeight={itemHeight}
      renderItem={url => <Item image={url} width={itemWidth} height={itemHeight} />}
      elastickRange={0.9}
      elastickItemsCount={5}
    />
  );
}

Examples

Please clone the repo and run npm run storybook or yarn storybook to show examples of usages.

Usage (API)

onPanResponderGrant: PropTypes.func, onPanResponderRelease: PropTypes.func,

| Property | Type | Defaut | Description | | -------- | ---- | -------- | ----------- | | style | object | {} | Component's styles. | | items | array | [] | Array of data for the items to be rendered. | | onSwiped | func | (itemIndex) => {} | Function to be called when a item is swiped. | | infinite | bool | false | Keep swiping indefinitely. | | distDrag | number | 70 | If the user stops dragging the image in a area that does not exceed for either x or y then the image goes back to the stack. | | onXChange | func | () => {) | Function to be called when x of current item changed. | | onYChange | func | () => {} | Function to be called when y of current item changed | | itemWidth | number | Dimensions.get('window').width * 0.8 | This is the width of the item. | | itemHeight | number | Dimensions.get('window').height * 0.8 | This is the width of the item. | | directions | array | [true, true, true, true] | Supported directions([top, right, bottom, left]) in which items can swipe out. | | renderItem | func | (itemData, itemWidth, itemHeight) => {} | Function to render the item based on the data. | | onSwipedTop | func | (itemIndex) => {} | Function to be called when a item is swiped top. | | onSwipedLeft | func | (itemIndex) => {} | Function to be called when a item is swiped left. | | onStackEnded | func | () => {} | Function to be called when stack is ended. | | rotateDegree | number | 10 | The value by which items should rotate. | | reduceScaleBy | number | 0.05 | The value by which the next items should decrease. | | onSwipedRight | func | (itemIndex) => {} | Function to be called when a item is swiped right. | | reduceDegreeBy | number | 0.65 | The value by which the next items should reduce rotate. | | onSwipedBottom | func | (itemIndex) => {} | Function to be called when a item is swiped bottom. | | reduceOpacityBy | number | 0.2 | The value by which the next item should be more transparent. | | activeItemIndex | number | 0 | Default item index. | | stackEffectHeight | number | 5 | The height of the stack effect. | | reduceTransformBy | number | 0.7 | The value by which the next items should reduce transforms. | | elastickItemsCount | number | 3 | Count of items rendered at the same time. | | onPanResponderGrant | func | () => {} | | | onPanResponderRelease | func | () => {} | |

Latest changelog

All changes here

1.3.1 - 2018-02-13

Fixed

• replaced ** with Math.pow

1.3.0 - 2018-02-11

Added

• stack effect, now you can see the next curds
• new props: rotateDegree, reduceDegreeBy, stackEffectHeight

Changed

• the props elastickRange changed to reduceTransformBy

Contributing

I welcome contributions! Please open an issue if you have any feature ideas or find any bugs. I also accept pull requests with open arms. I will go over the issues when I have time. :)