listviewreactjsreact-nativeswipereact-native-listview
React Native: Capturing swiping event in SwipeListView
I am looking for an event triggered by swiping SwipeRow inside SwipeListView left or right.
The goal is to have push-style notifications that can be easily dismissed by swiping. The notification should gradually change color when being swiped to left (green) and right (red). After a certain threshold (60) the final event should be triggered, in this case accept (left) and reject (right) and the notification should disappear.
Currently this is being done by buttons that I plan to remove.
From SwipeListView docummentation this might be useful:
onRowClose - Function called when a swipe row is animating closed
onRowOpen - Function called when a swipe row is animating open
swipeRowStyle - Object with styles for the parent wrapper View of the SwipeRow
leftOpenValue - TranslateX numeric value for opening the row to the left (positive number)
rightOpenValue - TranslateX numeric value for opening the row to the right (negative number)
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, ListView } from 'react-native';
import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view'
var data = [ { id:0, notification: true, },{ id:1, notification: false, },{ id:2, notification: false, } ];
class SampleApp extends Component {
render() {
var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 });
return (
<SwipeListView
dataSource={ds.cloneWithRows(data)}
onRowClose={() => {console.log("list.onRowClose")}}
onRowOpen={() => {console.log("list.onRowClose")}}
renderRow={ (data, secId, rowId, rowMap) => {
return (
<SwipeRow disableRightSwipe={false} disableLeftSwipe={false} leftOpenValue={60} rightOpenValue={-60} onRowClose={() => {console.log("row.onRowClose")}} onRowOpen={() => {console.log("row.onRowClose")}} swipeRowStyle={{}} leftOpenValue={60} rightOpenValue={-60}>
<View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center', borderWidth:1}}>
<Text style={{flex: 1, paddingVertical:50,backgroundColor:'green', left:0, right:0, textAlign: 'left'}}>Accept</Text><Text style={{flex: 1, paddingVertical:50, backgroundColor:'red', left:0, right:0,textAlign:'right'}}>Reject</Text>
</View>
<View>
<Text style={{left:0, right:0, paddingVertical:50,borderWidth:1, backgroundColor:'grey'}}>Notification</Text>
</View>
</SwipeRow>
);
}}
/>
);
}
}
AppRegistry.registerComponent('SampleApp', () => SampleApp);
Swipe left
Swipe right
Solution
Here is my solution that extends the SwipeListView and SwipeRow.
What is implemented:
- Swipe left and right event handling.
- Color changing of the whole row on swiping to left / right (green<->"transparent"<->red)
- Make the color transitions gradual (100% green<->"transparent"<->100% red)
index.ios.js:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, ListView } from 'react-native';
var SwipeListViewNotification = require('./SwipeListViewNotification.js').default;
var SwipeRowNotification = require('./SwipeRowNotification.js').default;
var data = [ { id:0, notification: true, },{ id:1, notification: false, },{ id:2, notification: false, } ];
class SampleApp extends Component {
render() {
var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 });
return (
<SwipeListViewNotification
dataSource={ds.cloneWithRows(data)}
onRowClose={() => {console.log("list.onRowClose")}}
onRowOpen={() => {console.log("list.onRowClose")}}
renderRow={ (data, secId, rowId, rowMap) => {
return (
<SwipeRowNotification onOpenLeft={() => console.log("ACCEPT")} onOpenRight={() => console.log("REJECT")}>
<View></View>
<View>
<Text style={{left:0, right:0, paddingVertical:50,borderWidth:1, backgroundColor:'grey'}}>Notification</Text>
</View>
</SwipeRowNotification>
);
}}
/>
);
}
}
AppRegistry.registerComponent('SampleApp', () => SampleApp);
SwipeListViewNotification.js:
'use strict';
import React, {
PropTypes,
} from 'react';
import { SwipeListView } from 'react-native-swipe-list-view';
class SwipeListViewNotification extends SwipeListView {
constructor(props) {
super(props);
}
renderRow(rowData, secId, rowId, rowMap) {
const Component = this.props.renderRow(rowData, secId, rowId, rowMap);
if (Component.type.name === 'SwipeRowNotification') {
return React.cloneElement(
Component,
{
...Component.props,
ref: row => this._rows[`${secId}${rowId}`] = row,
onRowOpen: _ => this.onRowOpen(secId, rowId, this._rows),
onRowClose: _ => this.props.onRowClose && this.props.onRowClose(secId, rowId, this._rows),
onRowPress: _ => this.onRowPress(`${secId}${rowId}`),
setScrollEnabled: enable => this.setScrollEnabled(enable)
}
);
} else {
return super.renderRow(rowData, secId, rowId, rowMap)
}
}
render() {
return (
super.render()
)
}
}
export default SwipeListViewNotification;
SwipeRowNotification.js:
'use strict';
import React, {
PropTypes,
} from 'react';
import { SwipeRow } from 'react-native-swipe-list-view';
class SwipeRowNotification extends SwipeRow {
constructor(props) {
super(props);
super.state = {
color: 'transparent'
};
}
manuallySwipeRow(toValue) {
if (toValue == 0) {
super.setState({color: 'transparent',opacity: 1});
}
if (toValue == this.props.leftOpenValue) {
this.props.onOpenLeft(toValue);
} else if (toValue == this.props.rightOpenValue) {
this.props.onOpenRight(toValue);
}
super.manuallySwipeRow(toValue);
}
handlePanResponderMove(e, gestureState) {
super.handlePanResponderMove(e, gestureState);
const { moveX } = gestureState;
const translateX = this.state.translateX._value;
var opacity;
if (translateX == 0) {
opacity = 1;
super.setState({color: 'transparent',opacity});
} else if (translateX < this.props.leftOpenValue && translateX >= 0) {
opacity = (0.5-(translateX/this.props.leftOpenValue)/2)+0.5;
super.setState({color: this.props.leftColor,opacity});
} else if (translateX < 0 && translateX > this.props.rightOpenValue) {
opacity = (0.5-(translateX/this.props.rightOpenValue)/2)+0.5;
super.setState({color: this.props.rightColor,opacity});
} else if ( translateX >= this.props.leftOpenValue) {
opacity = 0.5;
super.setState({color: this.props.leftColor,opacity});
} else if (translateX <= this.props.rightOpenValue) {
opacity = 0.5;
super.setState({color: this.props.rightColor,opacity});
}
}
renderRowContent() {
if (this.state.dimensionsSet) {
return (
<Animated.View
{...this._panResponder.panHandlers}
style={{
transform: [
{translateX: this.state.translateX}
]
}}
>
{this.renderVisibleContent()}
</Animated.View>
);
} else {
return (
<Animated.View
{...this._panResponder.panHandlers}
onLayout={ (e) => this.onContentLayout(e) }
style={{
transform: [
{translateX: this.state.translateX}
]
}}
>
{this.renderVisibleContent()}
</Animated.View>
);
}
}
renderVisibleContent() {
const onPress = this.props.children[1].props.onPress;
if (onPress) {
const newOnPress = _ => {
this.onRowPress();
onPress();
}
return React.cloneElement(
this.props.children[1],
{
...this.props.children[1].props,
onPress: newOnPress,
style: {backgroundColor: this.state.color}
}
);
}
return (
<TouchableOpacity
activeOpacity={1}
onPress={ _ => this.onRowPress() }
>
<View style={{backgroundColor: this.state.color}}>
<View style={{opacity:this.state.opacity}}>{this.props.children[1]}</View>
</View>
</TouchableOpacity>
)
}
render() {
return (
<View>
<View></View>
<View>
{this.renderRowContent()}
</View>
</View>
);
}
}
SwipeRowNotification.propTypes = {
onOpenLeft: PropTypes.func,
onOpenRight: PropTypes.func,
leftColor: PropTypes.string,
rightColor: PropTypes.string,
}
SwipeRowNotification.defaultProps = {
leftColor: 'red',
rightColor: 'green',
}
export default SwipeRowNotification;