{"_id":"@consenlabs/react-native-swipe-list-view","_rev":"10-0498c1b7662cf03f6543b76345a10996","name":"@consenlabs/react-native-swipe-list-view","dist-tags":{"latest":"0.3.1"},"versions":{"0.3.1":{"name":"@consenlabs/react-native-swipe-list-view","version":"0.3.1","keywords":["react","react-native","react-component","ios","android","listview","swipe","swipeable"],"author":{"name":"Jesse Sessler","email":"jesse.sessler@gmail.com"},"license":"MIT","_id":"@consenlabs/react-native-swipe-list-view@0.3.1","maintainers":[{"name":"consenlabs","email":"dev@consenlabs.com"}],"homepage":"https://github.com/jemise111/react-native-swipe-list-view#readme","bugs":{"url":"https://github.com/jemise111/react-native-swipe-list-view/issues"},"dist":{"shasum":"ce852af3a77945098177af36aba822df1fe9bc44","tarball":"https://registry.npmjs.org/@consenlabs/react-native-swipe-list-view/-/react-native-swipe-list-view-0.3.1.tgz","integrity":"sha512-+msU2sz3cyZ/mj03dyCoH8HfWvavnfYpHY4tABIrL86AL8UHK0Z2Ea1btUguU78jVknYzWQ5sfYCTIDlI+lPpA==","signatures":[{"sig":"MEYCIQDcZuTOjsk2R4MTtVTTsQ4B4uk/L03ATfFoPmqgGjzExgIhALk1sbwnGFpOJnOhVQ1UHroLCMa2NrE/ifeUhXSFrmgV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"ce852af3a77945098177af36aba822df1fe9bc44","gitHead":"5ae553f192b579841ccf57cb5d44d81e03aa66cc","scripts":{"start":"node_modules/react-native/packager/packager.sh"},"_npmUser":{"name":"consenlabs","email":"dev@consenlabs.com"},"repository":{"url":"git+https://github.com/jemise111/react-native-swipe-list-view.git","type":"git"},"_npmVersion":"4.0.5","description":"A ListView with rows that swipe open and closed.","directories":{},"_nodeVersion":"6.7.0","peerDependencies":{"react":">=0.14.8","react-native":">=0.23.1"},"_npmOperationalInternal":{"tmp":"tmp/react-native-swipe-list-view-0.3.1.tgz_1483953129085_0.2543373291846365","host":"packages-18-east.internal.npmjs.com"}}},"time":{"created":"2017-01-09T09:12:10.951Z","modified":"2026-06-24T03:19:12.883Z","0.3.1":"2017-01-09T09:12:10.951Z"},"bugs":{"url":"https://github.com/jemise111/react-native-swipe-list-view/issues"},"author":{"name":"Jesse Sessler","email":"jesse.sessler@gmail.com"},"license":"MIT","homepage":"https://github.com/jemise111/react-native-swipe-list-view#readme","keywords":["react","react-native","react-component","ios","android","listview","swipe","swipeable"],"repository":{"url":"git+https://github.com/jemise111/react-native-swipe-list-view.git","type":"git"},"description":"A ListView with rows that swipe open and closed.","maintainers":[{"email":"xwz@token.im","name":"consenlabs_official"},{"email":"circlehotarux@gmail.com","name":"circlehotarux"},{"email":"beenhero@gmail.com","name":"beenhero"},{"email":"imxuneal@gmail.com","name":"xuneal"}],"readme":"# react-native-swipe-list-view\n\n```<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.\n\nAlso includes ```<SwipeRow>``` if you want to use a swipeable row outside of the ```<SwipeListView>```\n\n_**v0.1.0** introduced a breaking change if you had implemented the \"Manually Closing Rows\" functionality. See [Manually Closing Rows](https://github.com/jemise111/react-native-swipe-list-view#manually-closing-rows) or ```example.js``` for the new implementation._\n\n# Example\n![](http://i.imgur.com/6fTrdZa.gif) &nbsp;&nbsp;&nbsp;&nbsp; ![](http://i.imgur.com/3IdOA77.gif)\n\n# Installation\n```bash\nnpm install --save react-native-swipe-list-view\n```\n\n## Running the example\n\nThe application under ./SwipeListExample will produce the above example. To run execute the following:\n\n* ```git clone https://github.com/jemise111/react-native-swipe-list-view.git```\n* ```cd react-native-swipe-list-view```\n* ```cd SwipeListExample```\n* ```npm install```\n* ```react-native run-ios | react-native run-android```\n\n# Usage\n```javascript\nimport { SwipeListView } from 'react-native-swipe-list-view';\n\nrender() {\n\tconst ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});\n\treturn (\n\t\t<SwipeListView\n\t\t\tdataSource={ds.cloneWithRows(dataSource)}\n\t\t\trenderRow={ data => (\n\t\t\t\t<View style={styles.rowFront}>\n\t\t\t\t\t<Text>I am {data} in a SwipeListView</Text>\n\t\t\t\t</View>\n\t\t\t)}\n\t\t\trenderHiddenRow={ data => (\n\t\t\t\t<View style={styles.rowBack}>\n\t\t\t\t\t<Text>Left</Text>\n\t\t\t\t\t<Text>Right</Text>\n\t\t\t\t</View>\n\t\t\t)}\n\t\t\tleftOpenValue={75}\n\t\t\trightOpenValue={-75}\n\t\t/>\n\t)\n}\n```\n\n*See ```example.js``` for full usage guide (including using ```<SwipeRow>``` by itself)*\n\n#### Note:\nIf your row is touchable (TouchableOpacity, TouchableHighlight, etc.)  with an ```onPress``` function make sure ```renderRow``` returns the Touchable as the topmost element.\n\nGOOD:\n```javascript\nrenderRow={ data => (\n\t<TouchableHighlight onPress={this.doSomething.bind(this)}>\n\t    <View>\n\t        <Text>I am {data} in a SwipeListView</Text>\n\t    </View>\n\t</TouchableHighlight>\n)}\n```\nBAD:\n```javascript\nrenderRow={ data => (\n\t<View>\n\t    <TouchableHighlight onPress={this.doSomething.bind(this)}>\n\t        <Text>I am {data} in a SwipeListView</Text>\n\t    </TouchableHighlight>\n\t</View>\n)}\n```\n\n#### Manually closing rows:\n\nIf 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:\n```\n{\n    row_hash_1: ref_to_row_1,\n    row_hash_2: ref_to_row_2\n}\n```\n\nWhere each ```row_hash``` is a string that looks like ```'<section_id><row_id>'```\n\nEach row's ref has a public method called ```closeRow``` that will swipe the row closed. So you can do something like:\n```\n<SwipeList\n    renderHiddenRow={ (data, secdId, rowId, rowMap) => {\n        <TouchableOpacity onPress={ _ => rowMap[`${secId}${rowId}`].closeRow() }>\n            <Text>I close the row</Text>\n        </TouchableOpacity>\n    }}\n/>\n```\n\nIf you are using the standalone ```<SwipeRow>``` you can just keep a ref to the component and call ```closeRow()``` on that ref.\n\n#### Per row behavior:\n\nIf you need rows to behave independently you can return a ```<SwipeRow>``` in the ```renderRow``` function. Make sure you import the ```<SwipeRow>``` in addition to the ```<SwipeListView>```. See the example below and the docs under [API](https://github.com/jemise111/react-native-swipe-list-view#API) for how to implement a custom ```<SwipeRow>```. There is also a full example in ```example.js```.\n\nThe following values can be dynamic by passing them as props on the ```<SwipeRow>```:\n * ```leftOpenValue```\n * ```rightOpenValue```\n * ```stopLeftSwipe```\n * ```stopRightSwipe```\n * ```closeOnRowPress```\n * ```disableLeftSwipe```\n * ```disableRightSwipe```\n * ```recalculateHiddenLayout```\n\n```javascript\nimport { SwipeListView, SwipeRow } from 'react-native-swipe-list-view';\n\n<SwipeListView\n\tdataSource={dataSource.cloneWithRows(data)}\n\trenderRow={ (data, secId, rowId) => (\n\t\t<SwipeRow\n\t\t\tdisableRightSwipe={parseInt(rowId) % 2 !== 0}\n\t\t\tdisableLeftSwipe={parseInt(rowId) % 2 === 0}\n\t\t\tleftOpenValue={20 + parseInt(rowId) * 5}\n\t\t\trightOpenValue={-150}\n\t\t>\n\t\t\t<View style={styles.rowBack}>\n\t\t\t\t<Text>Left Hidden</Text>\n\t\t\t\t<Text>Right Hidden</Text>\n\t\t\t</View>\n\t\t\t<View style={styles.rowFront}>\n\t\t\t\t<Text>Row front | {data}</Text>\n\t\t\t</View>\n\t\t</SwipeRow>\n\t)}\n/>\n```\n\n#### *Note on RN 0.28 and {flex: 1}*:\n\nReact Native 0.28 introduced new behavior when using flex: 1. The ```<SwipeRow>``` container ```<View>``` no longer has flex: 1 by default. If this is causing issues in your app you can maintain the old behavior by passing ```swipeRowStyle={{flex: 1}}``` to your ```<SwipeListView>``` or ```style={{flex: 1}}``` to your ```<SwipeRow>```.\n\n## API\n\n`SwipeListView` (component)\n===========================\n\nListView that renders SwipeRows.\n\nProps\n-----\n\n### `closeOnRowPress`\n\nShould open rows be closed when a row is pressed\n\ntype: `bool`\ndefaultValue: `true`\n\n\n### `closeOnScroll`\n\nShould open rows be closed when the listView begins scrolling\n\ntype: `bool`\ndefaultValue: `true`\n\n\n### `leftOpenValue`\n\nTranslateX value for opening the row to the left (positive number)\n\ntype: `number`\ndefaultValue: `0`\n\n\n### `renderHiddenRow`\n\nHow to render a hidden row (renders behind the row). Should return a valid React Element.\nThis is required unless ```renderRow``` returns a ```<SwipeRow>``` (see [Per Row Behavior](https://github.com/jemise111/react-native-swipe-list-view#per-row-behavior)).\n\ntype: `func`\n\n\n### `renderRow` (required)\n\nHow to render a row. Should return a valid React Element.\n\ntype: `func`\n\n\n### `rightOpenValue`\n\nTranslateX value for opening the row to the right (negative number)\n\ntype: `number`\ndefaultValue: `0`\n\n\n### `disableLeftSwipe`\n\nDisable ability to swipe the row left\n\ntype: `bool`\ndefaultValue: `false`\n\n\n### `disableRightSwipe`\n\nDisable ability to swipe the row right\n\ntype: `bool`\ndefaultValue: `false`\n\n\n### `recalculateHiddenLayout`\n\nEnable hidden row onLayout calculations to run always.\n\nBy default, hidden row size calculations are only done on the first onLayout event\nfor performance reasons.\nPassing ```true``` here will cause calculations to run on every onLayout event.\nYou may want to do this if your rows' sizes can change.\nOne case is a SwipeListView with rows of different heights and an options to delete rows.\n\ntype: `bool`\ndefaultValue: `false`\n\n### `onRowClose`\n\nCalled when a swipe row is animating closed\n\ntype: `func`\n\n\n### `onRowOpen`\n\nCalled when a swipe row is animating open\n\ntype: `func`\n\n\n### `swipeRowStyle`\n\nStyles for the parent wrapper View of the SwipeRow\n\ntype: `object`\n\n\n### `listViewRef`\n\nCalled when the ListView ref is set and passes a ref to the ListView\ne.g. ```listViewRef={ ref => this._swipeListViewRef = ref }```\n\ntype: `func`\n\n\n### `previewFirstRow`\n\nShould the first SwipeRow do a slide out preview to show that the list is swipeable\n\ntype: `bool`\ndefaultValue: `false`\n\n### `previewRowIndex`\n\nShould the specified rowId do a slide out preview to show that the list is swipeable\n * ***Note***: This ID will be passed to this function to get the correct row index\n * https://facebook.github.io/react-native/docs/listviewdatasource.html#getrowidforflatindex\n\ntype: `number`\n\n\n### `previewDuration`\n\nDuration of the slide out preview animation\n\ntype: `number`\n\n\n### `previewOpenValue`\n\nTranslateX value for the slide out preview animation\nDefault: 0.5 * props.rightOpenValue\n\ntype: `number`\n\n\n### `friction`\n\nFriction for the open / close animation\n\ntype: `number`\n\n\n### `tension`\n\nTension for the open / close animation\n\ntype: `number`\n\n\n`SwipeRow` (component)\n======================\n\nRow that is generally used in a SwipeListView.\nIf you are rendering a SwipeRow explicitly you must pass the SwipeRow exactly two children.\nThe first will be rendered behind the second.\ne.g.\n```javascript\n  <SwipeRow>\n      <View style={hiddenRowStyle} />\n      <View style={visibleRowStyle} />\n  </SwipeRow>\n```\nProps\n-----\n\n### `closeOnRowPress`\n\nShould the row be closed when it is tapped\n\ntype: `bool`\ndefaultValue: `true`\n\n\n### `friction`\n\nFriction for the open / close animation\n\ntype: `number`\n\n\n### `leftOpenValue`\n\nTranslateX value for opening the row to the left (positive number)\n\ntype: `number`\ndefaultValue: `0`\n\n### `stopLeftSwipe`\n\nTranslateX value for stop the row to the left (positive number)\n\ntype: `number`\n\n### `stopRightSwipe`\n\nTranslateX value for stop the row to the right (negative number)\n\ntype: `number`\n\n\n### `onRowPress`\n\nCalled when a swipe row is pressed.\n\ntype: `func`\n\n### `onRowOpen`\n\nCalled when a swipe row is animating open. Used by the SwipeListView\nto keep references to open rows.\n\ntype: `func`\n\n\n### `onRowClose`\n\nCalled when a swipe row is animating closed\n\ntype: `func`\n\n\n### `rightOpenValue`\n\nTranslateX value for opening the row to the right (negative number)\n\ntype: `number`\ndefaultValue: `0`\n\n\n### `setScrollEnabled`\n\nUsed by the SwipeListView to close rows on scroll events.\nYou shouldn't need to use this prop explicitly.\n\ntype: `func`\n\n\n### `tension`\n\nTension for the open / close animation\n\ntype: `number`\n\n\n### `disableLeftSwipe`\n\nDisable ability to swipe the row left\n\ntype: `bool`\ndefaultValue: `false`\n\n\n### `disableRightSwipe`\n\nDisable ability to swipe the row right\n\ntype: `bool`\ndefaultValue: `false`\n\n\n### `recalculateHiddenLayout`\n\nEnable hidden row onLayout calculations to run always\n\ntype: `bool`\ndefaultValue: `false`\n\n\n### `style`\n\nStyles for the parent wrapper View of the SwipeRow\n\ntype: `object`\n\n\n### `preview`\n\nShould the row do a slide out preview to show that it is swipeable\n\ntype: `bool`\ndefaultValue: `false`\n\n\n### `previewDuration`\n\nDuration of the slide out preview animation\n\ntype: `number`\ndefaultValue: `300`\n\n\n### `previewOpenValue`\n\nTranslateX value for the slide out preview animation\nDefault: 0.5 * props.rightOpenValue\n\ntype: `number`\n\n\n### *Note: Core Support*\nRN Core added a SwipeList component as of [v0.27.0](https://github.com/facebook/react-native/releases/tag/v0.27.0)\n\nIt is actively being worked on and has no documentation yet. So I will continue to maintain this component until a future date.\n\n# License\n\nMIT\n","readmeFilename":"README.md"}