React native Swipe out on button click

Question

i am using the react-native-swipe-list-view api for swipeout.I want to swipe back when click on button undo.When i click on delete button it is working but for button undo not work. the code is

import React, {
    Component,
} from 'react';
import {
    AppRegistry,
    ListView,
    StyleSheet,
    Text,
    TouchableOpacity,
    TouchableHighlight,
    View,
    Alert,
    Dimensions
} from 'react-native';

import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view';
var alertMessage="You want to Delete it";
var alertMessage1='why press it'
var v1=1.0;
const wid=Dimensions.get('window').width;
class App extends Component {

    constructor(props) {
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            basic: true,
            listViewData: Array(20).fill('').map((_,i)=>`item #${i}`)
        };
    }

    deleteRow(secId, rowId, rowMap) {
        rowMap[`${secId}${rowId}`].closeRow();
        const newData = [...this.state.listViewData];
        newData.splice(rowId, 1);
        this.setState({listViewData: newData});
    }

    undoRow(secId, rowId, rowMap) {
    v=0.0
    }
    render() {
        return (

                    <SwipeListView
                        dataSource={this.ds.cloneWithRows(this.state.listViewData)}
                        renderRow={ data => (

                            <TouchableHighlight
                                onPress={ _ => Alert.alert(
            'Alert Title',
            alertMessage1,
          ) }
                                style={styles.rowFront}
                                underlayColor={'#AAA'}
                            >
                                    <Text>I am {data} in a SwipeListView</Text>

                            </TouchableHighlight>
                        )}
                        renderHiddenRow={ (data, secId, rowId, rowMap) => (
                            <View style={styles.rowBack}>   

                                <TouchableOpacity style={{backgroundColor:'red',alignItems: 'center',bottom: 0,justifyContent: 'center',position: 'absolute',top: 0,width: 75}} 
                                    onPress={ _ => this.undoRow(secId, rowId, rowMap) }>
                                    <Text style={{backgroundColor:'red'}}>Undo</Text>
                                </TouchableOpacity>

                                <TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} 
                                    onPress={ _ => Alert.alert(
                                     'Are You Sure',alertMessage,
                                      [{text: 'OK', onPress: () =>this.deleteRow(secId, rowId, rowMap)},
                                        {text: 'Cancel',}]
          ) }>
                                    <Text style={styles.backTextWhite}>Delete</Text>
                                </TouchableOpacity>
                            </View>
                        )}
                        leftOpenValue={wid*v}
                        rightOpenValue={wid*(-v)}

                    />

i am change the value of row open to 0 when it is 0 then hidden row not show

undoRow(secId, rowId, rowMap) {
        v=0.0
        }

this is the left and right value

leftOpenValue={wid*v}
                            rightOpenValue={wid*(-v)}

is there any other method to render row orshow the row on button click as show when we swipe a screen

Answer 1

For swipe back, you can use closeRow of the rowMap which has been passed to the renderHiddenRow property. Replace onPress={ _ => this.undoRow(secId, rowId, rowMap) } with onPress={ _ => rowMap[${secId}${rowId}].closeRow() }:

    renderHiddenRow={ (data, secId, rowId, rowMap) => (
      <View style={styles.rowBack}>

        <TouchableOpacity style={{
          backgroundColor: 'red',
          alignItems: 'center',
          bottom: 0,
          justifyContent: 'center',
          position: 'absolute',
          top: 0,
          width: 75
        }}
                          onPress={ _ => rowMap[ `${secId}${rowId}` ].closeRow() }>
          <Text style={{ backgroundColor: 'red' }}>Undo</Text>
        </TouchableOpacity>

        <TouchableOpacity style={[ styles.backRightBtn, styles.backRightBtnRight ]}
                          onPress={ _ => Alert.alert(
                            'Are You Sure', alertMessage,
                            [ { text: 'OK', onPress: () => this.deleteRow(secId, rowId, rowMap) },
                              { text: 'Cancel', } ]
                          ) }>
          <Text style={styles.backTextWhite}>Delete</Text>
        </TouchableOpacity>
      </View>
    )}