npm i @monterosa/react-native-elastic-stack



React Native component that implements elastic stack effect


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


| | | | |

Basic Usage

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

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


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,

styleobject{}Component's styles.
itemsarray[]Array of data for the items to be rendered.
onSwipedfunc(itemIndex) => {}Function to be called when a item is swiped.
infiniteboolfalseKeep swiping indefinitely.
distDragnumber70If 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.
onXChangefunc() => {)Function to be called when x of current item changed.
onYChangefunc() => {}Function to be called when y of current item changed
itemWidthnumberDimensions.get('window').width * 0.8This is the width of the item.
itemHeightnumberDimensions.get('window').height * 0.8This is the width of the item.
directionsarray[true, true, true, true]Supported directions([top, right, bottom, left]) in which items can swipe out.
renderItemfunc(itemData, itemWidth, itemHeight) => {}Function to render the item based on the data.
onSwipedTopfunc(itemIndex) => {}Function to be called when a item is swiped top.
onSwipedLeftfunc(itemIndex) => {}Function to be called when a item is swiped left.
onStackEndedfunc() => {}Function to be called when stack is ended.
rotateDegreenumber10The value by which items should rotate.
reduceScaleBynumber0.05The value by which the next items should decrease.
onSwipedRightfunc(itemIndex) => {}Function to be called when a item is swiped right.
reduceDegreeBynumber0.65The value by which the next items should reduce rotate.
onSwipedBottomfunc(itemIndex) => {}Function to be called when a item is swiped bottom.
reduceOpacityBynumber0.2The value by which the next item should be more transparent.
activeItemIndexnumber0Default item index.
stackEffectHeightnumber5The height of the stack effect.
reduceTransformBynumber0.7The value by which the next items should reduce transforms.
elastickItemsCountnumber3Count of items rendered at the same time.
onPanResponderGrantfunc() => {}
onPanResponderReleasefunc() => {}

Latest changelog

All changes here

1.3.1 - 2018-02-13


  • replaced ** with Math.pow

1.3.0 - 2018-02-11


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


  • the props elastickRange changed to reduceTransformBy


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. :)

Jump To