https://github.com/nickcharles/react-native-invertible-flatlist
[DEPRECATED] A FlatList that can be flipped.
https://github.com/nickcharles/react-native-invertible-flatlist
component flatlist invertible react react-native
Last synced: 5 months ago
JSON representation
[DEPRECATED] A FlatList that can be flipped.
- Host: GitHub
- URL: https://github.com/nickcharles/react-native-invertible-flatlist
- Owner: nickcharles
- License: mit
- Created: 2017-05-19T14:32:01.000Z (about 9 years ago)
- Default Branch: develop
- Last Pushed: 2019-11-15T03:23:33.000Z (over 6 years ago)
- Last Synced: 2025-03-18T13:12:12.397Z (over 1 year ago)
- Topics: component, flatlist, invertible, react, react-native
- Language: JavaScript
- Homepage:
- Size: 188 KB
- Stars: 17
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
***NOTICE:*** This package is now deprecated. As of React Native 0.47 the `FlatList` component supports inversion natively. Please use the native capabilities for future development.
# InvertibleFlatList
An invertible FlatList for React Native.
This is the updated and renamed version of `react-native-invertible-flat-list`. That package is out of date and unmaintained. Please use this version going forward.
## Installation
npm:
```
npm install --save react-native-invertible-flatlist
```
yarn:
```
yarn add react-native-invertible-flatlist
```
Import the component in your source as follows:
```javascript
import { InvertibleFlatList } from 'react-native-invertible-flatlist';
```
## Behavior
Behaves identically to the React Native [FlatList](https://facebook.github.io/react-native/docs/flatlist.html) component with the added functionality of being invertible. The classic example of this is a chat application where the most recent items are listed at the very bottom of a scrolling list that takes the user back in time. This works for both vertically scrolling and horizontally scrolling lists.
## Usage
Minimal example:
```javascript
{item.key}}
/>
```
### Props
> [FlatList props...](https://facebook.github.io/react-native/docs/flatlist.html#props)
> **inverted?:** `?boolean`
>
> Inverts the scrolling direction of the list.
### Methods
> [FlatList methods...](https://facebook.github.io/react-native/docs/flatlist.html#methods)
## Testing
If you want to test the implementation or just see a working example, this project comes with an example project out of the box. Once you clone, move into the `test` directory and run the following commands:
```
yarn install
yarn run ios
```
## Development
The best way to do local development is to clone this project and install the package as a local dependency in your project. See the test project in this repository for an example of how to do this.
## Known Issues
* `ListHeaderComponent` and `ListFooterComponent` do not properly invert the content that is passed to them. This is because these properties can accept a React Component Class, a render function, or a rendered element. Because React Native now supports inversion natively, the amount of effort required to implement this properly doesn't equate with the convenience of these working perfectly. You'll need to apply the y-axis scale inversion to these components yourself before passing them to `InvertibleFlatList`.