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

@monterosa/react-native-elastic-stack

Elastick Stack for React Native

by monterosalondon

1.3.1 (see all)License:MITTypeScript:Not Found
npm i @monterosa/react-native-elastic-stack
Readme

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

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

Downloads/wk

1

GitHub Stars

78

LAST COMMIT

5yrs ago

MAINTAINERS

4

CONTRIBUTORS

0

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.3.1
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate