Recenter previously swiped items from ListView

[karan101292]

Hello, I am using swipeable with ListView on each of it's item. When I swipe any item, previously swiped item should be re-centered. how can I do that?

[buddamus]

Something like this should work.. Sorry about the formatting.. I cannot for the life of me figure out how to make this look pretty here :

import React, {Component} from 'react'; import {AppRegistry, Text, View, StyleSheet, ListView, Dimensions, Alert, TextInput, TouchableOpacity, Image } from 'react-native'; import Swipeable from 'react-native-swipeable'; export default class MyExampleClass extends Component{ constructor(props){ super(props); this.state = { currentlyOpenSwipeable: null }; } handleScroll = () => { const {currentlyOpenSwipeable} = this.state; if (currentlyOpenSwipeable) { currentlyOpenSwipeable.recenter(); } } render(){ return( <View style={{flex:1}} > <View style={{}}> <ListView enableEmptySections={true} dataSource={ds.cloneWithRows([{name:'abc'},{name:'def'},{name:'hij'}])} onScroll={this.handleScroll} renderRow={(item, sectionId, itemId) => <View> <Swipeable onRef={ref => this.swipeable = ref} onPress={()=>console.warn("pressed")} onRightButtonsOpenRelease={(event, gestureState, swipeable) => { if (this.state.currentlyOpenSwipeable && this.state.currentlyOpenSwipeable !== swipeable) { this.state.currentlyOpenSwipeable.recenter(); } this.setState({currentlyOpenSwipeable: swipeable}); } } onRightButtonsCloseRelease={() => this.setState({currentlyOpenSwipeable: null})} rightButtonWidth={50} rightButtons={[ <TouchableOpacity > <Text >Button 1</Text> </TouchableOpacity>, <TouchableOpacity > <Text >Button 2</Text> </TouchableOpacity> ]} > <TouchableOpacity> <View style={{flex:1}}> <View style={{ flex: 1}}> <Text>{item.name}</Text> </View> </View> </TouchableOpacity> </Swipeable> </View> } /> </View> </View> ); } } AppRegistry.registerComponent('MyExampleClass', () => MyExampleClass);

[vinayr]

above code formatted

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

import Swipeable from 'react-native-swipeable';

export default class MyExampleClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentlyOpenSwipeable: null
    };
  }

  handleScroll = () => {
    const { currentlyOpenSwipeable } = this.state;

    if (currentlyOpenSwipeable) {
      currentlyOpenSwipeable.recenter();
    }
  }

  render() {
    return (
      <View style = {{ flex: 1 }}>
        <View style = {{}}>
          <ListView
            enableEmptySections = {}
            dataSource = {ds.cloneWithRows([{ name: 'abc' }, { name: 'def' }, { name: 'hij' }])}
            onScroll = {this.handleScroll}
            renderRow = {(item, sectionId, itemId) =>
              <View>
                <Swipeable
                  onRef = {ref => this.swipeable = ref}
                  onPress = {() => console.warn("pressed")}
                  onRightButtonsOpenRelease = {
                    (event, gestureState, swipeable) => {
                      if (this.state.currentlyOpenSwipeable && this.state.currentlyOpenSwipeable !== swipeable) {
                        this.state.currentlyOpenSwipeable.recenter();
                      }
                      this.setState({
                        currentlyOpenSwipeable: swipeable
                      });
                    }
                  }
                  onRightButtonsCloseRelease = {
                    () => this.setState({
                      currentlyOpenSwipeable: null
                    })
                  }
                  rightButtonWidth = { 50 }
                  rightButtons = {[
                    <TouchableOpacity><Text>Button 1</Text></TouchableOpacity>,
                    <TouchableOpacity><Text>Button 2</Text></TouchableOpacity>
                  ]}
                >
                  <TouchableOpacity>
                    <View style={{ flex: 1 }}>
                      <View style={{ flex: 1}}>
                        <Text>{item.name}</Text>
                      </View>
                    </View>
                  </TouchableOpacity>
                </Swipeable>
              </View >
            }
          />
        </View>
      </View>
    );
  }
}

AppRegistry.registerComponent('MyExampleClass', () => MyExampleClass);