<SwipeListView> is a ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened.

Also includes <SwipeRow> if you want to use a swipeable row outside of the <SwipeListView>

npm install --save react-native-swipe-list-view

import { SwipeListView } from 'react-native-swipe-list-view';

render() {
	const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
	return (
		<SwipeListView
			dataSource={ds.cloneWithRows(dataSource)}
			renderRow={ data => (
				<View style={styles.rowFront}>
					<Text>I am {data} in a SwipeListView</Text>
				</View>
			)}
			renderHiddenRow={ data => (
				<View style={styles.rowBack}>
					<Text>Left</Text>
					<Text>Right</Text>
				</View>
			)}
			leftOpenValue={75}
			rightOpenValue={-75}
		/>
	)
}

See example.js for full usage guide (including using by itself)

If your row is touchable (TouchableOpacity, TouchableHighlight, etc.) with an onPress function make sure renderRow returns the Touchable as the topmost element.

GOOD:

renderRow={ data => (
	<TouchableHighlight onPress={this.doSomething.bind(this)}>
	    <View>
	        <Text>I am {data} in a SwipeListView</Text>
	    </View>
	</TouchableHighlight>
)}

BAD:

renderRow={ data => (
	<View>
	    <TouchableHighlight onPress={this.doSomething.bind(this)}>
	        <Text>I am {data} in a SwipeListView</Text>
	    </TouchableHighlight>
	</View>
)}

If your row or hidden row renders a touchable child and you'd like that touchable to close the row note that the renderRow and renderHiddenRow functions are passed rowData, secId, rowId, rowMap. The rowMap is an object that looks like:

{
    rowId_1: ref_to_row_1,
    rowId_2: ref_to_row_2
}

Each row's ref has a public method called closeRow that will swipe the row closed. So you can do something like:

<SwipeList
    renderHiddenRow={ (data, secdId, rowId, rowMap) => {
        <TouchableOpacity onPress={ _ => rowMap[rowId].closeRow() }>
            <Text>I close the row</Text>
        </TouchableOpacity>
    }}
/>

If you are using the standalone <SwipeRow> you can just keep a ref to the component and call closeRow() on that ref.

ListView that renders SwipeRows.

Should open rows be closed when a row is pressed

type: bool defaultValue: true

Should open rows be closed when the listView begins scrolling

type: bool defaultValue: true

TranslateX value for opening the row to the left (positive number)

type: number defaultValue: 0

How to render a hidden row (renders behind the row). Should return a valid React Element.

type: func

How to render a row. Should return a valid React Element.

type: func

TranslateX value for opening the row to the right (negative number)

type: number defaultValue: 0

Disable ability to swipe the row left

type: bool defaultValue: false

Disable ability to swipe the row right

type: bool defaultValue: false

Row that is generally used in a SwipeListView. If you are rendering a SwipeRow explicitly you must pass the SwipeRow exactly two children. The first will be rendered behind the second. e.g.

  <SwipeRow>
      <View style={hiddenRowStyle} />
      <View style={visibleRowStyle} />
  </SwipeRow>

Should the row be closed when it is tapped

type: bool defaultValue: true

Friction for the open / close animation

type: number

TranslateX value for opening the row to the left (positive number)

type: number defaultValue: 0

Called when a swipe row is animating open. Used by the SwipeListView to keep references to open rows.

type: func

TranslateX value for opening the row to the right (negative number)

type: number defaultValue: 0

Used by the SwipeListView to close rows on scroll events. You shouldn't need to use this prop explicitly.

type: func

Tension for the open / close animation

type: number

Disable ability to swipe the row left

type: bool defaultValue: false

Disable ability to swipe the row right

type: bool defaultValue: false

MIT