Home

Awesome

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,

PropertyTypeDefautDescription
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

Fixed

1.3.0 - 2018-02-11

Added

Changed

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