├── examples ├── .watchmanconfig ├── app.json ├── .babelrc ├── App.test.js ├── App.js ├── package.json ├── .gitignore └── .flowconfig ├── index.js ├── .npmignore ├── .babelrc ├── .gitignore ├── LICENSE ├── package.json ├── README.md └── src └── index.js /examples/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import SwipeView from './lib'; 2 | 3 | export default SwipeView; 4 | -------------------------------------------------------------------------------- /examples/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "sdkVersion": "20.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /examples/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "env": { 4 | "development": { 5 | "plugins": ["transform-react-jsx-source"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | logs 3 | *.log 4 | pids 5 | *.pid 6 | *.seed 7 | lib-cov 8 | coverage 9 | .lock-wscript 10 | build/Release 11 | node_modules 12 | res 13 | examples 14 | src/ 15 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-object-rest-spread", 4 | "transform-react-jsx", 5 | "transform-es2015-arrow-functions", 6 | "transform-class-properties" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /examples/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App from './App'; 3 | 4 | import renderer from 'react-test-renderer'; 5 | 6 | it('renders without crashing', () => { 7 | const rendered = renderer.create().toJSON(); 8 | expect(rendered).toBeTruthy(); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/App.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | 4 | import SwipeView from 'react-native-swipeview'; 5 | 6 | export default class App extends Component { 7 | 8 | render() { 9 | 10 | return ( 11 | 12 | SwipeMe} 14 | /> 15 | 16 | ); 17 | }; 18 | }; 19 | 20 | const styles = StyleSheet.create({ 21 | container: { 22 | flex: 1, 23 | alignItems: 'center', 24 | justifyContent: 'center', 25 | }, 26 | text: { 27 | backgroundColor: 'whitesmoke', 28 | padding: 20, 29 | } 30 | }); 31 | -------------------------------------------------------------------------------- /examples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "BasicSwipeView", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-native-scripts": "1.3.1", 7 | "jest-expo": "~20.0.0", 8 | "react-test-renderer": "16.0.0-alpha.12" 9 | }, 10 | "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", 11 | "scripts": { 12 | "start": "react-native-scripts start", 13 | "eject": "react-native-scripts eject", 14 | "android": "react-native-scripts android", 15 | "ios": "react-native-scripts ios", 16 | "test": "node node_modules/jest/bin/jest.js --watch" 17 | }, 18 | "jest": { 19 | "preset": "jest-expo" 20 | }, 21 | "dependencies": { 22 | "expo": "^20.0.0", 23 | "react": "16.0.0-alpha.12", 24 | "react-native": "^0.47.0", 25 | "react-native-swipeview": "^1.0.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | /node_modules 28 | 29 | # Npm debug files 30 | npm-debug.* 31 | 32 | # Expo 33 | .expo/ 34 | 35 | # DS store file 36 | .DS_Store 37 | 38 | # Xcode 39 | *.xcuserstate 40 | examples/swiper.xcodeproj/project.xcworkspace/ 41 | examples/swiper.xcodeproj/xcuserdata 42 | 43 | # IntelliJ 44 | .idea/ 45 | 46 | # Vim 47 | *.sw* 48 | dist/ 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | /node_modules 28 | 29 | # Npm debug files 30 | npm-debug.* 31 | 32 | # Expo 33 | .expo/ 34 | 35 | # DS store file 36 | .DS_Store 37 | 38 | # Xcode 39 | *.xcuserstate 40 | examples/swiper.xcodeproj/project.xcworkspace/ 41 | examples/swiper.xcodeproj/xcuserdata 42 | 43 | # IntelliJ 44 | .idea/ 45 | 46 | # Vim 47 | *.sw* 48 | dist/ 49 | 50 | # lib folder 51 | lib 52 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Rishabh bhatia 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-swipeview", 3 | "version": "1.0.3", 4 | "description": "SwipeView component for React Native.", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "react-native start", 8 | "compile": "./node_modules/.bin/babel -d lib/ src/", 9 | "prepublish": "npm run compile" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/rishabhbhatia/react-native-swipeview.git" 14 | }, 15 | "keywords": [ 16 | "react-native", 17 | "swipeview", 18 | "swipe-to-delete", 19 | "iOS", 20 | "android" 21 | ], 22 | "author": "rishabhbhatia", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/rishabhbhatia/react-native-swipeview/issues" 26 | }, 27 | "homepage": "https://github.com/rishabhbhatia/react-native-swipeview#readme", 28 | "dependencies": { 29 | "prop-types": "^15.5.10" 30 | }, 31 | "devDependencies": { 32 | "babel-cli": "^6.26.0", 33 | "babel-plugin-transform-class-properties": "^6.24.1", 34 | "babel-plugin-transform-es2015-arrow-functions": "^6.22.0", 35 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 36 | "babel-plugin-transform-react-jsx": "^6.24.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | .*/Libraries/react-native/ReactNative.js 16 | 17 | ; Additional create-react-native-app ignores 18 | 19 | ; Ignore duplicate module providers 20 | .*/node_modules/fbemitter/lib/* 21 | 22 | ; Ignore misbehaving dev-dependencies 23 | .*/node_modules/xdl/build/* 24 | .*/node_modules/reqwest/tests/* 25 | 26 | ; Ignore missing expo-sdk dependencies (temporarily) 27 | ; https://github.com/expo/expo/issues/162 28 | .*/node_modules/expo/src/* 29 | 30 | ; Ignore react-native-fbads dependency of the expo sdk 31 | .*/node_modules/react-native-fbads/* 32 | 33 | [include] 34 | 35 | [libs] 36 | node_modules/react-native/Libraries/react-native/react-native-interface.js 37 | node_modules/react-native/flow 38 | flow/ 39 | 40 | [options] 41 | module.system=haste 42 | 43 | emoji=true 44 | 45 | experimental.strict_type_args=true 46 | 47 | munge_underscores=true 48 | 49 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 50 | 51 | suppress_type=$FlowIssue 52 | suppress_type=$FlowFixMe 53 | suppress_type=$FixMe 54 | 55 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 56 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 57 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 58 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 59 | 60 | unsafe.enable_getters_and_setters=true 61 | 62 | [version] 63 | ^0.49.1 64 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | react-native-swipeview 3 |

4 | 5 | # React Native SwipeView 6 | 7 | ### Todo-list app built with SwipeView [(Watch it on YouTube)](https://youtu.be/Dql1nQ73CY4) 8 | 9 | ![alt text](http://res.cloudinary.com/rishabhbhatia/image/upload/c_scale,w_200/v1506861923/swipeview/todo-app-v1.0.gif) 10 | 11 | 12 | ## Getting Started 13 | 14 | - [Installation](#installation) 15 | - [Basic Usage](#basic-usage) 16 | - [Properties](#properties) 17 | - [Todo-list Project](https://github.com/rishabhbhatia/react-native-todo) 18 | 19 | ### Installation 20 | ```bash 21 | $ npm i react-native-swipeview --save 22 | ``` 23 | 24 | ### Basic Usage 25 | ```jsx 26 | import React, {Component} from 'react'; 27 | import { StyleSheet, Text, View } from 'react-native'; 28 | 29 | import SwipeView from 'react-native-swipeview'; 30 | 31 | export default class App extends Component { 32 | 33 | render() { 34 | 35 | return ( 36 | 37 | SwipeMe} 39 | /> 40 | 41 | ); 42 | }; 43 | }; 44 | 45 | const styles = StyleSheet.create({ 46 | container: { 47 | flex: 1, 48 | alignItems: 'center', 49 | justifyContent: 'center', 50 | }, 51 | text: { 52 | backgroundColor: 'whitesmoke', 53 | padding: 20, 54 | } 55 | }); 56 | 57 | ``` 58 | ![alt text](http://res.cloudinary.com/rishabhbhatia/image/upload/c_scale,w_200/v1504599144/swipeview/swipeview-basic-v1.0.1.gif) 59 | 60 | ### Properties 61 | 62 | #### Basic 63 | 64 | | Prop | Type | Description | Default| 65 | | :------------ |:---------------:| :---------------:| :-----| 66 | | leftOpenValue | `number` | TranslateX: How much view opens from the left when swiping left-to-right (positive number). | 0 | 67 | | rightOpenValue | `number` | TranslateX: How much view opens from the right when swiping right-to-left (negative number). | 0 | 68 | | swipeDuration | `number` | Duration of the slide out swipe animation. | 250 | 69 | | swipeToOpenPercent | `number` | What % of the left/right openValue does the user need to swipe past to trigger onSwipedLeft/onSwipedRight actions. | 35 | 70 | | disableSwipeToLeft | `bool` | Disable ability to swipe view to left. | false | 71 | | disableSwipeToRight | `bool` | Disable ability to swipe view to right. | false | 72 | | onSwipedLeft | `func` | Called when left swipe is completed. | - | 73 | | onSwipedRight | `func` | Called when right swipe is completed. | - | 74 | | previewSwipeDemo | `bool` | Should the view do a slide out preview to show that it is swipe-able. | false | 75 | | previewDuration | `number` | Duration of the slide out preview animation. | 300 | 76 | | previewOpenValue | `number` | TranslateX value for the slide out preview animation. | -60 | 77 | | previewOpenDelay | `number` | Delay before starting preview animation. | 350 | 78 | | previewCloseDelay | `number` | Delay before closing preview animation. | 300 | 79 | | swipingLeft | `bool` | Should swiping initialize with right-to-left. This should be useful for swipe previews ex: +ve previewOpenValue `swipingLeft: false` & -ve previewOpenValue `swipingLeft: true`. | true | 80 | | recalculateHiddenLayout | `bool` | Enable hidden row onLayout calculations to run always. | false | 81 | | directionalDistanceChangeThreshold | `number` | Change the sensitivity of the row. | 2 | 82 | 83 | #### Views 84 | | Prop | Type | Description | Default| 85 | | :------------ |:---------------:| :---------------:| :-----| 86 | | renderVisibleContent | `func` | Main Content view. | - | 87 | | renderLeftView | `func` | Left view to render behind the right view. | - | 88 | | renderRightView | `func` | Right view to render behind the item view. | - | 89 | 90 | ## Contribution 91 | 92 | - [@rishabhbhatia](mailto:rishabh.bhatia08@gmail.com) Author. 93 | 94 | ## Credits 95 | 96 | Inspiration: react-native-swipe-list-view [(Github)](https://github.com/jemise111/react-native-swipe-list-view) 97 | 98 | ## Questions 99 | 100 | Feel free to [Contact me](mailto:rishabh.bhatia08@gmail.com) or [Create an issue](https://github.com/rishabhbhatia/react-native-swipeview/issues/new) 101 | 102 | ## License 103 | 104 | Released under the [Mit License](https://opensource.org/licenses/MIT) 105 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, {Component} from 'react'; 4 | import {Animated, PanResponder, Platform, StyleSheet, TouchableOpacity, View} from 'react-native'; 5 | 6 | import PropTypes from 'prop-types'; 7 | 8 | /** 9 | * react-native-swipeview 10 | * @author rishabhbhatia 11 | * SwipeView can be rendered individually or within a list by passing three child views. 12 | * 13 | * e.g. 14 | Visible Row} 16 | renderLeftView={() => Left Row} 17 | renderRightView={() => Right Row} 18 | /> 19 | */ 20 | export default class SwipeView extends Component { 21 | 22 | constructor(props) { 23 | super(props); 24 | this.horizontalSwipeGestureBegan = false; 25 | this.horizontalSwipeGestureEnded = false; 26 | this.rowItemJustSwiped = false; 27 | this.swipeInitialX = null; 28 | this.ranPreview = false; 29 | this.state = { 30 | dimensionsSet: false, 31 | hiddenHeight: 0, 32 | hiddenWidth: 0, 33 | swipingLeft: this.props.swipingLeft 34 | }; 35 | this._translateX = new Animated.Value(0); 36 | } 37 | 38 | componentWillMount() { 39 | this._panResponder = PanResponder.create({ 40 | onMoveShouldSetPanResponder: (e, gs) => this.handleOnMoveShouldSetPanResponder(e, gs), 41 | onPanResponderMove: (e, gs) => this.handlePanResponderMove(e, gs), 42 | onPanResponderRelease: (e, gs) => this.handlePanResponderEnd(e, gs), 43 | onPanResponderTerminate: (e, gs) => this.handlePanResponderEnd(e, gs), 44 | onShouldBlockNativeResponder: _ => false, 45 | }); 46 | } 47 | 48 | getPreviewAnimation = (toValue, delay) => { 49 | return Animated.timing( 50 | this._translateX, 51 | { duration: this.props.previewDuration, toValue, delay } 52 | ); 53 | }; 54 | 55 | onContentLayout = (e) => { 56 | this.setState({ 57 | dimensionsSet: !this.props.recalculateHiddenLayout, 58 | hiddenHeight: e.nativeEvent.layout.height, 59 | hiddenWidth: e.nativeEvent.layout.width, 60 | }); 61 | 62 | if (this.props.previewSwipeDemo && !this.ranPreview) { 63 | let {previewOpenValue} = this.props; 64 | this.ranPreview = true; 65 | 66 | this.getPreviewAnimation(previewOpenValue, this.props.previewOpenDelay) 67 | .start( _ => { 68 | this.getPreviewAnimation(0, this.props.previewCloseDelay).start(); 69 | }); 70 | }; 71 | }; 72 | 73 | handleOnMoveShouldSetPanResponder = (e, gs) => { 74 | const { dx } = gs; 75 | return Math.abs(dx) > this.props.directionalDistanceChangeThreshold; 76 | }; 77 | 78 | handlePanResponderMove = (e, gestureState) => { 79 | const { dx, dy } = gestureState; 80 | const absDx = Math.abs(dx); 81 | const absDy = Math.abs(dy); 82 | 83 | if(this.horizontalSwipeGestureEnded) 84 | return; 85 | 86 | if (absDx > this.props.directionalDistanceChangeThreshold) { 87 | 88 | if (this.swipeInitialX === null) { 89 | this.swipeInitialX = this._translateX._value 90 | } 91 | if (!this.horizontalSwipeGestureBegan) { 92 | this.horizontalSwipeGestureBegan = true; 93 | this.props.swipeGestureBegan && this.props.swipeGestureBegan(); 94 | } 95 | 96 | let newDX = this.swipeInitialX + dx; 97 | if (this.props.disableSwipeToLeft && newDX < 0) { newDX = 0; } 98 | if (this.props.disableSwipeToRight && newDX > 0) { newDX = 0; } 99 | 100 | this._translateX.setValue(newDX); 101 | 102 | let toValue = 0; 103 | if (this._translateX._value >= 0) { 104 | this.setState({ 105 | ...this.state, 106 | swipingLeft: false 107 | }); 108 | 109 | if (this._translateX._value > this.props.leftOpenValue * (this.props.swipeToOpenPercent/100)) { 110 | toValue = this.props.leftOpenValue; 111 | this.onSwipedRight(toValue); 112 | } 113 | } else { 114 | this.setState({ 115 | ...this.state, 116 | swipingLeft: true 117 | }); 118 | 119 | if (this._translateX._value < this.props.rightOpenValue * (this.props.swipeToOpenPercent/100)) { 120 | toValue = this.props.rightOpenValue; 121 | this.onSwipedLeft(toValue); 122 | }; 123 | }; 124 | }; 125 | }; 126 | 127 | handlePanResponderEnd = (e, gestureState) => { 128 | if(!this.horizontalSwipeGestureEnded) this.closeRow(); 129 | }; 130 | 131 | closeRow = () => { 132 | if(this.rowItemJustSwiped) { 133 | this.forceCloseRow(); 134 | }else { 135 | this.manuallySwipeView(0); 136 | }; 137 | }; 138 | 139 | forceCloseRow = () => { 140 | Animated.timing( 141 | this._translateX, 142 | { 143 | duration: 0, 144 | toValue: 0, 145 | } 146 | ).start(); 147 | }; 148 | 149 | onSwipedLeft = (toValue) => { 150 | const {onSwipedLeft} = this.props; 151 | 152 | this.horizontalSwipeGestureEnded = true; 153 | this.rowItemJustSwiped = true; 154 | 155 | this.manuallySwipeView(toValue).then(() => { 156 | if(onSwipedLeft) onSwipedLeft(); 157 | this.closeRow(); 158 | }); 159 | }; 160 | 161 | onSwipedRight = (toValue) => { 162 | const {onSwipedRight} = this.props; 163 | 164 | this.horizontalSwipeGestureEnded = true; 165 | this.rowItemJustSwiped = true; 166 | 167 | this.manuallySwipeView(toValue).then(() => { 168 | if(onSwipedRight) onSwipedRight(); 169 | this.closeRow(); 170 | }); 171 | }; 172 | 173 | manuallySwipeView = (toValue) => { 174 | 175 | return new Promise((resolve,reject) => { 176 | 177 | Animated.timing( 178 | this._translateX, 179 | { 180 | duration: this.props.swipeDuration, 181 | toValue, 182 | } 183 | ).start( _ => { 184 | this.swipeInitialX = null; 185 | this.horizontalSwipeGestureBegan = false; 186 | this.horizontalSwipeGestureEnded = false; 187 | 188 | resolve(); 189 | }); 190 | }); 191 | }; 192 | 193 | renderVisibleContent = () => { 194 | return ( 195 | this.props.renderVisibleContent() 196 | ); 197 | }; 198 | 199 | renderRowContent = () => { 200 | 201 | if (this.state.dimensionsSet) { 202 | return ( 203 | 211 | {this.renderVisibleContent()} 212 | 213 | ); 214 | } else { 215 | return ( 216 | this.onContentLayout(e) } 219 | style={{ 220 | transform: [ 221 | {translateX: this._translateX} 222 | ] 223 | }} 224 | > 225 | {this.renderVisibleContent()} 226 | 227 | ); 228 | }; 229 | }; 230 | 231 | render() { 232 | return ( 233 | 234 | 241 | {this.state.swipingLeft ? 242 | ((this.props.renderRightView && this.props.renderRightView()) || null) : 243 | ((this.props.renderLeftView && this.props.renderLeftView()) || null)} 244 | 245 | {this.renderRowContent()} 246 | 247 | ); 248 | }; 249 | 250 | }; 251 | 252 | const styles = StyleSheet.create({ 253 | hidden: { 254 | bottom: 0, 255 | left: 0, 256 | overflow: 'hidden', 257 | position: 'absolute', 258 | right: 0, 259 | top: 0, 260 | }, 261 | }); 262 | 263 | SwipeView.propTypes = { 264 | /** 265 | * TranslateX: How much view opens from the left 266 | * when swiping left-to-right (positive number) 267 | */ 268 | leftOpenValue: PropTypes.number, 269 | /** 270 | * TranslateX: How much view opens from the right 271 | * when swiping right-to-left (negative number) 272 | */ 273 | rightOpenValue: PropTypes.number, 274 | /** 275 | * Duration of the slide out swipe animation 276 | */ 277 | swipeDuration: PropTypes.number, 278 | /** 279 | * What % of the left/right openValue does the user need to swipe 280 | * past to trigger onSwipedLeft/onSwipedRight actions. 281 | */ 282 | swipeToOpenPercent: PropTypes.number, 283 | /** 284 | * Disable ability to swipe view to left 285 | */ 286 | disableSwipeToLeft: PropTypes.bool, 287 | /** 288 | * Disable ability to swipe view to right 289 | */ 290 | disableSwipeToRight: PropTypes.bool, 291 | /** 292 | * Called when left swipe is compelted 293 | */ 294 | onSwipedLeft: PropTypes.func, 295 | /** 296 | * Called when right swipe is compelted 297 | */ 298 | onSwipedRight: PropTypes.func, 299 | /** 300 | * Should the view do a slide out preview to show that it is swipeable 301 | */ 302 | previewSwipeDemo: PropTypes.bool, 303 | /** 304 | * Duration of the slide out preview animation 305 | */ 306 | previewDuration: PropTypes.number, 307 | /** 308 | * TranslateX value for the slide out preview animation 309 | */ 310 | previewOpenValue: PropTypes.number, 311 | /** 312 | * Delay before starting preview animation 313 | */ 314 | previewOpenDelay: PropTypes.number, 315 | /** 316 | * Delay before closing preview animation 317 | */ 318 | previewCloseDelay: PropTypes.number, 319 | /** 320 | * Should swiping initialize with right-to-left 321 | * This should be useful for swipe previews 322 | * ex: +ve previewOpenValue swipingLeft: false | -ve previewOpenValue swipingLeft: true 323 | */ 324 | swipingLeft: PropTypes.bool, 325 | /** 326 | * Enable hidden row onLayout calculations to run always 327 | */ 328 | recalculateHiddenLayout: PropTypes.bool, 329 | /** 330 | * Change the sensitivity of the row 331 | */ 332 | directionalDistanceChangeThreshold: PropTypes.number, 333 | /** 334 | * Main Content view. 335 | */ 336 | renderVisibleContent: PropTypes.func.isRequired, 337 | /** 338 | * Left view to render behind the right view. 339 | */ 340 | renderLeftView: PropTypes.func, 341 | /** 342 | * Right view to render behind the item view. 343 | */ 344 | renderRightView: PropTypes.func, 345 | }; 346 | 347 | SwipeView.defaultProps = { 348 | leftOpenValue: 0, 349 | rightOpenValue: 0, 350 | swipeDuration: 250, 351 | swipeToOpenPercent: 35, 352 | disableSwipeToLeft: false, 353 | disableSwipeToRight: false, 354 | previewSwipeDemo: false, 355 | previewDuration: 300, 356 | previewOpenValue: -60, 357 | previewOpenDelay: 350, 358 | previewCloseDelay: 300, 359 | swipingLeft: true, 360 | recalculateHiddenLayout: false, 361 | directionalDistanceChangeThreshold: 2, 362 | }; 363 | --------------------------------------------------------------------------------