react-native-swipeout icon indicating copy to clipboard operation
react-native-swipeout copied to clipboard

Close swipeout when opening another swipeout

Open cjcmattsson opened this issue 6 years ago • 11 comments

Anyone knows how to close the currently open swipeout when opening another swipeout? I've read some threads about this but cant get their sollutions to work.

Thank you guys!

cjcmattsson avatar Sep 17 '18 10:09 cjcmattsson

So in state I have rowIndex(current open index) which is set to 'null' at the beginning.

onSwipeOpen (rowIndex) {
    this.setState({
        rowIndex: rowIndex
    })
}
onSwipeClose(rowIndex) {
    if (rowIndex === this.state.rowIndex) {
        this.setState({ rowIndex: null });
    }
} 
const swipeoutBtns = [
      {
        text: 'Delete',
        onPress: ()=>(this.swipeHandleDelete()),
        backgroundColor: 'red',
        color: 'white',
      }
];
<FlatList
   data={this.state.products}
   extraData= {this.state.rowIndex}
   renderItem={({item, index}) =>
   <Swipeout right={swipeoutBtns} backgroundColor={'white'}
        onOpen={()=>(this.onSwipeOpen(index))}
        close={this.state.rowIndex !== index}
        onClose={()=>(this.onSwipeClose(index))}
        rowIndex={index}
        sectionId={0}
        autoClose={true}
     >
         <View>
               <Text>Swipeout example</Text>
         </View>
     </Swipeout>
     }
/>

fragilehm avatar Sep 21 '18 10:09 fragilehm

With this, swipe performance degrades significantly in large lists... basically stutters when swiping open a row due to onOpen being called (which sets state and causes a re-render in the FlatList) right before the tween animation.

Ideally we'd have an onOpened callback for when the open tween animation has finished.

aryo avatar Oct 15 '18 22:10 aryo

any update ... !?

MinaFSedrak avatar Nov 28 '18 13:11 MinaFSedrak

+1 should have new prop to handle this

AnisDerbel avatar Dec 01 '18 10:12 AnisDerbel

extraData= {this.state}必须指定,不然无法更新。 官方说法:给FlatList指定extraData={this.state}属性,是为了保证state.selected变化时,能够正确触发FlatList的更新。如果不指定此属性,则FlatList不会触发更新,因为它是一个PureComponent,其 props 在===比较中没有变化则不会触发更新。

happyEgg avatar Dec 04 '18 03:12 happyEgg

Add prop: extraData={this.state.rowId} to FlatList can solve this problem.

cwyd0822 avatar Dec 23 '18 22:12 cwyd0822

With this, swipe performance degrades significantly in large lists... basically stutters when swiping open a row due to onOpen being called (which sets state and causes a re-render in the FlatList) right before the tween animation.

Ideally we'd have an onOpened callback for when the open tween animation has finished.

With this, swipe performance degrades significantly in large lists... basically stutters when swiping open a row due to onOpen being called (which sets state and causes a re-render in the FlatList) right before the tween animation.

Ideally we'd have an onOpened callback for when the open tween animation has finished.

This degrades performance of swiping in android. For iOS it's working fine.

Deepak-147 avatar May 25 '19 07:05 Deepak-147

Any better solution for opening one swipe at time??

Deepak-147 avatar May 25 '19 07:05 Deepak-147

Instead of changing state it useful to keep the reference to the opened cell.

onOpen(ref) {

       // if something is already opened - close it and change the ref. 
       if(this.swipedCardRef) this.swipedCardRef._close();
       this.swipedCardRef = ref
   }

onClose(ref) {
      if (ref == this.swipedCardRef) {
           this.swipedCardRef = null;
      }
} 
onSwipeOpen () {
       if(!this.isOpened) {
           this.isOpened = true
           this.props.onOpen(this.component)
       }
}

onSwipeClose() {
      if(this.isOpened) {
           this.isOpened = false
           this.props.onClose(this.component)
     }
} 
<Swipeout   ref={(component) => { this.component = component; }}
                        right={swipeBtns}
                        autoClose={isAutoClose}
                        backgroundColor= 'transparent'
                        disabled={isSwipeDisabled}
                        onOpen={()=>(this.onSwipeOpen())}
                        onClose={()=>(this.onSwipeClose())}>

oleshkevych avatar Jun 07 '19 13:06 oleshkevych

Is there any good news for this issue?

bohehe avatar Oct 09 '19 13:10 bohehe

I use this react-native-swipe-list-view instead

bohehe avatar Oct 14 '19 02:10 bohehe