Close swipeout when opening another swipeout

[cjcmattsson]

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!

[fragilehm]

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>
     }
/>

[aryo]

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.

[MinaFSedrak]

any update ... !?

[AnisDerbel]

+1 should have new prop to handle this

[happyEgg]

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

[cwyd0822]

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

[Deepak-147]

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]

Any better solution for opening one swipe at time??

[oleshkevych]

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())}>

[bohehe]

Is there any good news for this issue?

[bohehe]

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