React-native-swipe-list-view: safeCloseOpenRow() is only working on the last item

[imsam67]

Once the user swipes to the right or left and clicks the button there, I call a function to make API calls and handle a few things. This is where I also try to close the row programmatically. This is working ONLY for the last item in the list. Anything above it, the row stays open.

I do hit my handleClickUpdateItemStatus() function and the API call works fine but as I said, only the last item in the list will close. Anything above that one stays open even though all the other code in the function work fine.

My code looks like this:

class MyComponent extends Component {
   constructor(props) {
      super(props);
      this.handleClickUpdateItemStatus = this.handleClickUpdateItemStatus.bind(this);
   }

   handleClickUpdateItemStatus(itemId, value) {
      this._swipeListView.safeCloseOpenRow();
      // Call my API to update item status
   }
   render() {
     return(
        <Container>
           <SwipeListView
                ref={ref => this._swipeListView = ref}
                data={this.props.items}
                ... // Omitted for brevity />
        </Container>
      );
   }
}

Any idea what's causing this?

[jemise111]

Hey @imsam67, safeCloseOpenRow would only be useful if you only have one row opened at a time. I'm guessing based on what you said that you have multiple rows open and are trying to close them all at the same time..?

If so, you're in luck! I released a PR recently that exposes a new function called closeAllOpenRows

Make sure you update to the latest version and change

this._swipeListView.safeCloseOpenRow();

to

this._swipeListView.closeAllOpenRows();

And that should do the trick, if not please re-open, thanks!

[imsam67]

@jemise111 Thank you for your response. I wasn't really trying to close all open rows but only the one the user has opened. Nevertheless, I thought it's actually a good idea to close all open rows anyway so I tried the this._swipeListView.closeAllOpenRows(); method but that's not working either.

Interestingly, I'm getting the same exact behavior i.e. if I happen to swipe open the very last item in the list and click my button to take some action, either this._swipeListView.closeAllOpenRows(); or this._swipeListView.safeCloseOpenRow(); will actually close the row. However, if I happen to swipe open any other row in the list, neither method will close the row.

In my package.json, I see that the version I have installed is:
"react-native-swipe-list-view": "^3.1.0".

Am I using the correct version? If I do have the correct version, any idea what could be the issue here?

[jemise111]

That's definitely the right version. Based on what you're describing this sounds like an issue with the each row's key. How are you defining the key for the row or the keyExtractor for the List? Can I see an example of that?

[imsam67]

You were absolutely RIGHT! I had omitted the keyExtractor. Just added it and it works beautifully! Thank you so much for your help!

[jemise111]

@imsam67 glad to hear it! anytime :)