title: React Native: Capturing swiping event in SwipeListView
body: <p>I am looking for an event triggered by swiping <code>SwipeRow</code> inside <code>SwipeListView</code> left or right.</p>
  
  <p>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 <strong>left</strong> (green) and <strong>right</strong> (red). After a certain threshold (60) the final event should be triggered, in this case <strong>accept</strong> (left) and <strong>reject</strong> (right) and the notification should disappear.</p>
  
  <p>Currently this is being done by buttons that I plan to remove.</p>
  
  <p>From <a href="https://github.com/jemise111/react-native-swipe-list-view" rel="nofollow noreferrer">SwipeListView docummentation</a> this might be useful:</p>
  
  <p><strong>onRowClose</strong> - Function called when a swipe row is animating closed</p>
  
  <p><strong>onRowOpen</strong> - Function called when a swipe row is animating open</p>
  
  <p><strong>swipeRowStyle</strong> - Object with styles for the parent wrapper View of the SwipeRow</p>
  
  <p><strong>leftOpenValue</strong> - TranslateX numeric value for opening the row to the left (positive number)</p>
  
  <p><strong>rightOpenValue</strong> - TranslateX numeric value for opening the row to the right (negative number)</p>
  
  <pre><code>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) =&gt; row1 !== row2 });
      return (
        &lt;SwipeListView
          dataSource={ds.cloneWithRows(data)}
          onRowClose={() =&gt; {console.log("list.onRowClose")}}
          onRowOpen={() =&gt; {console.log("list.onRowClose")}}
          renderRow={ (data, secId, rowId, rowMap) =&gt; {
            return (
              &lt;SwipeRow disableRightSwipe={false} disableLeftSwipe={false} leftOpenValue={60} rightOpenValue={-60} onRowClose={() =&gt; {console.log("row.onRowClose")}} onRowOpen={() =&gt; {console.log("row.onRowClose")}} swipeRowStyle={{}} leftOpenValue={60} rightOpenValue={-60}&gt;
                &lt;View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center', borderWidth:1}}&gt;
                    &lt;Text style={{flex: 1, paddingVertical:50,backgroundColor:'green', left:0, right:0, textAlign: 'left'}}&gt;Accept&lt;/Text&gt;&lt;Text style={{flex: 1, paddingVertical:50, backgroundColor:'red', left:0, right:0,textAlign:'right'}}&gt;Reject&lt;/Text&gt;
                &lt;/View&gt;
                &lt;View&gt;
                    &lt;Text style={{left:0, right:0, paddingVertical:50,borderWidth:1, backgroundColor:'grey'}}&gt;Notification&lt;/Text&gt;
                &lt;/View&gt;
              &lt;/SwipeRow&gt;
            );
          }}
        /&gt;
      );
    }
  }
  AppRegistry.registerComponent('SampleApp', () =&gt; SampleApp);
  </code></pre>
  
  <p>Swipe left</p>
  
  <p><a href="https://i.stack.imgur.com/bt2Mp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bt2Mp.png" alt="Swipe left"></a></p>
  
  <p>Swipe right</p>
  
  <p><a href="https://i.stack.imgur.com/JsBWK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JsBWK.png" alt="Swipe right"></a></p>