@monterosa/react-native-elastic-stack

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