react-native-vega-scroll-list v1.0.0
React Native Vega Scroll List
A React Native FlatList with a lightweight animation which fade and shrink the head item of list when scrolling. Works on iOS & Android.
Inspired by Vega Scroll - an iOS dependency.
Preview
Installation
npm install react-native-vega-scroll-list --save
Usage
Import VegaScrollList component:
import VegaScrollList from 'react-native-vega-scroll-list';
Usage:
This usage is similar with FlatList. VegaScrollList accepts FlatList props.
<VegaScrollList
distanceBetweenItem={12} // Add distance between item. Need to calculate animated
data={data}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
</VegaScrollList>
Configuration
VegaScrollList accepts FlatList props.
Only need to add distanceBetweenItem
to calculate animation.
prop | type/valid values | default | description |
---|---|---|---|
distanceBetweenItem | number | 8 | distance between item. Needed to calculate the animation |
Demo Application
This repository contains a demo React Native application with a customizable example of the VegaScrollList
component in use.
To use the demo application:
1) Clone this repository: https://github.com/iqbalansyor/react-native-vega-scroll-list.git
2) Navigate to the demo application: cd path/to/this/repository/react-native-vega-scroll-list/Example
3) Install demo application dependencies: npm install
4) For ios, run cd ios && pod install && cd ..
5) Run npm run start
|| react-native run-android
|| react-native run-ios
Contact me
- Iqbal Ansyori - ansyori.iqbal@gmail.com
Contributing
Feel free to try it out. Please submit a pull request with any features/fixes for the project.
License
This project is licensed under the MIT License - see the MIT Open Source Initiative for details.