React-native-swipe-list-view: closeOnRowOpen not working correctly

[jwilliamson-qb]

I'm using a SwipeListView with SwipeRows inside of it, and the closeOnRowOpen prop doesn't seem to close rows when a new one opens. I'm able to open all rows at the same time and none of them close automatically.

      <SwipeListView
        data={records}
        listKey={(item2, index) => 'D' + index.toString()}
        keyExtractor={item => item.transactionId}
        renderItem={({ item }) => <OfflineRecordItem record={item} app={app} />}
        closeOnRowOpen
        closeOnRowBeginSwipe
      />
    ....
const OfflineRecordItem = ({ record, app, navigation }) => {
...
  return (
    <SwipeRow
      disableRightSwipe
      rightOpenValue={-145}
      stopRightSwipe={-145}
      ref={(ref) => { swipeRow = ref; }}
      swipeGestureBegan={() => {
        setOpen(true);
      }}
      onRowClose={() => {
        setOpen(false);
      }}
      disableLeftSwipe={status === STATUS.UPLOADING}
    >
...

[jemise111]

Hey @jwilliamson-qb when closeOnRowOpen isn't working properly it's usually due to an issue with keys in the data. Can you ensure your keys are unique and being returned properly in the keyExtractor?

Beyond that I'm looking at my own example for any other differences: https://github.com/jemise111/react-native-swipe-list-view/blob/master/SwipeListExample/example.js#L209

Can you try using a top level SwipeRow instead of an OfflineRecordItem. Can you also try adding keys directly to each object in records instead of using a keyExtractor?

LMK if either of those fix it, those could be potential bugs on my end. Thanks!

[densk1]

Was trying to debug this for a while.

Create your SwipeRow containing component as a functional component then call it as a function in .renderItem(), rather than using a class component.

This works:

renderItem={(data) => SwipeableRow({ rowData: data.item })}

This does not work:

renderItem={(data) => <SwipeableRow rowData={data.item} />}

[jemise111]

Closing as inactive