Elastick Stack for React Native

Elastick Stack for React Native

react-native-elastic-stack .React Native component that implements elastic stack effect

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

Download Details:

Author: monterosalondon

GitHub: https://github.com/monterosalondon/react-native-elastic-stack

react-native programming react

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

Google Analytics for React Native! Compatible with react-native-ab

react-native-google-analytics .Google Analytics for React Native! Compatible with react-native-ab.

Lifecycle hooks are not enough with React Navigation in React Native

Also use these events and API, provided by React Navigation library

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.