react-native-swipeable-flat-list

A React Native component based on FlatList with rows that can be swiped open/close.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-swipeable-flat-list
0.1.23 years ago5 years agoMinified + gzip package size for react-native-swipeable-flat-list in KB

Readme

npm npm
react-native-swipeable-flat-list
A React Native component, based on FlatList, implementing the ability for its rows to be swiped open/close.
Installation
npm install --save react-native-swipeable-flat-list
Usage
import {SwipeableFlatList} from 'react-native-swipeable-flat-list';

...

render() {
	const data = [
		{ key: 1, label: 'Label 1', leftLabel: 'Left 1', rightLabel: 'Right 1' },
		{ key: 2, label: 'Label 2', leftLabel: 'Left 2', rightLabel: 'Right 2' },
		{ key: 3, label: 'Label 3', leftLabel: 'Left 3', rightLabel: 'Right 3' },
		{ key: 4, label: 'Label 4', leftLabel: 'Left 4', rightLabel: 'Right 4' },
		{ key: 5, label: 'Label 5', leftLabel: 'Left 5', rightLabel: 'Right 5' },
	];
	return (
		<SwipeableFlatList
			data={data}
			renderItem={({ item }) => (
				<Text style={{ height: 48 }}>{item.label}</Text>
			)}
			renderLeft={({ item }) => (
				<Text style={{ width: 40 }}>{item.leftLabel}</Text>
			)}
			renderRight={({ item }) => (
				<Text style={{ width: 100 }}>{item.rightLabel}</Text>
			)}
			backgroundColor={'white'}
		/>
	)
}
Example
cd example
yarn
react-native run-*

NOTE: I haven't been able to test under iOS, yet.
API

SwipeableFlatList (component)

A FlatList that renders SwipeableListItems.

Props

data (required)

The data array passed to the FlatList.
type: arrayOf(object)

renderItem (required)

The render function for the main element of a SwipeableListItem, which lies above the left and/or the right element.
type: func

renderLeft

The render function for the left element of a SwipeableListItem, which is hidden beneath the main element and revealed on swiping to the right.
type: func

renderRight

The render function for the right element of a SwipeableListItem, which is hidden beneath the main element and revealed on swiping to the left.
type: func

itemBackgroundColor

The background color passed to the SwipeableListItem.
type: string default: #fff

style

The style prop passed to the underlying FlatList.
type: style

SwipeableListItem (component)

A ListItem to be used with SwipeableFlatList.

Props

item (required)

The main element, which lies above the left and/or the right element.
type: element
NOTE: The element's style.height has to be set in order to be able to set the height of the SwipeableListItem.

left

The left element, which is hidden beneath the main element and revealed on swiping to the right.
type: element
NOTE: The element's style.width has to be set in order for it to be able to open.

right

The right element, which is hidden beneath the main element and revealed on swiping to the left.
NOTE: The element's style.width has to be set in order for it to be able to open.
type: element

backgroundColor

The background color of the SwipeableListItem.
type: string default: #fff

swipeThreshold

The threshold (in px) which must be passed before the SwipeableListItem's PanResponder handles a horizontal swipe.
type: number default: 4

swipeOpenThresholdPercentage

The threshold percentage (0 - 100) of the corresponding hidden element's width (left/right) which must be passed in order to open.
type: number default: 20

swipeCloseThresholdPercentage

The threshold percentage (0 - 100) of the corresponding hidden element's width (left/right) which must be passed in order to close.
type: number default: 20

friction

The friction or "bounciness"/overshoot passed to the open/close spring animation. See Animated for further documentation.
type: number default: 9

tension

The tension or speed passed to the open/close spring animation. See Animated for further documentation.
type: number default: 40

onOpen

A callback called when the SwipeableListItem is swiped open.
type: func

onClose

A callback called when the SwipeableListItem is swiped close.
type: func
License
MIT