React-native-elastic-stack NPM

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

react react-native reactNative elastic stack

@infinitebrahmanuniverse/nolb-react-native-e @everything-registry/sub-chunk-2577 @zalastax/nolb-react-native-e

1.0.1

7 years ago

1.0.0

7 years ago