npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

This package has been deprecated

Author message:

Package moved to organization account. Use @monterosa/react-native-elastic-stack instead.

react-native-elastic-stack

1.0.1 • Public • Published

react-native-elastic-stack

React Native component that implement elastic stack effect

Installation

$ npm install react-native-elastic-stack --save

Demo

| | | | |

Basic Usage

import ParallaxScroll from '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.
reduceScaleBy number 0.05 The value by which the next item should decrease.
onSwipedRight func (itemIndex) => {} Function to be called when a item is swiped right.
elastickRange number 0.5 The value of the elastic of items.
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.
elastickItemsCount number 3 Count of items rendered at the same time.
onPanResponderGrant func () => {}
onPanResponderRelease func () => {}

Contributing

I welcome contributions! Please open an issues 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. :)

install

npm i react-native-elastic-stack

Downloadsweekly downloads

0

version

1.0.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability