Socket
Socket
Sign inDemoInstall

@monterosa/react-native-elastic-stack

Package Overview
Dependencies
Maintainers
4
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@monterosa/react-native-elastic-stack

Elastic stack for React Native


Version published
Maintainers
4
Created
Source

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

Keywords

FAQs

Package last updated on 13 Feb 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc