React-native-swipe-list-view: Swiped row doesn't close

[suchithc]

I'm using SwipeListView with useSectionList and SwipeRow for each item to have per row behavior for swipe actions.

 <SwipeListView
          useSectionList
          stickySectionHeadersEnabled={true}
          renderItem={({ item, index, section }) => <Card item={item} section={section} {...this.props}/> }
          renderSectionHeader={({ section: { title } }) => <SectionHeader title={title} />}
          sections={cards}
          keyExtractor={(item, index) => item + index}
          recalculateHiddenLayout
          closeOnRowBeginSwipe
/>

<SwipeRow
            leftOpenValue={75}
            rightOpenValue={-75} 
            >
            <SwipeActionButton 
                buttonTypeLeft={constants.SWIPE_BUTTON_TYPE.STAR} 
                buttonTypeRight={constants.SWIPE_BUTTON_TYPE.DELETE}
                swipeActionLeft={this.onStar.bind(this)}
                swipeActionRight={this.onDelete}
            />
            <View style={commonStyles.cardContainer}>
                <CardBody
                    title={couponTitle}
                    showDetailText={showCouponExpiryText}
                    detailText={strings.EXPIRES + ' ' + couponExpiry}
                    cardImgSrc={senderLogo}
                    callToActionUrl={couponCTAUrl}
                    callToActionText={strings.SHOP_NOW}
                />
            </View>    
        </SwipeRow>

Problem:
1) I want to close (go to un-swiped state) row when another row is swiped. And close when on scroll.

2) With swipe action (which changes the store), when I shift a row up then row below gets swipe (I guess I'm missing something)

[cmeredith]

+1. Having the same issues here with section list.

[suchithc]

Found the problem, we need to have SwipeRow as top level component while passing it to renderItem:

renderItem={({ item, index, section }) => <SwipeRow> <HiddenComponent/> <VisibleComponent /></SwipeRow> }

[cmeredith]

Even doing that, it's very hit or miss. Sometimes it will close but most of the time it won't.

[jemise111]

@cmeredith Hm I don't know why it would work some times but not others. Can you post some same code that can reproduce the issue. Happy to take a look. Thanks!

[hieupaul]

Have the same issue. I'm using flatlist:

<SwipeListView
        useFlatList
        data={data}
        renderItem={rowData => (
          <SwipeRow disableRightSwipe rightOpenValue={-115}>
            {swipeAction}
            <CardView
              title={rowData.item.title}
              time={rowData.item.time}
              location={rowData.item.location}
              address={rowData.item.address}
              statusIcon={rowData.item.statusIcon}
            />
          </SwipeRow>
        )}
      />

[IamStephan]

I might be wrong but i believe this happens when either the key value is not defined or when there is a conflict in values. When you use the keyExtractor and involve values that are not necessarily unique or depend on index it tends to happen. For example if the index is used as the key it will keep the items open when one is deleted because the reference just jumped to the following row. Try using a key that will always be unique but can still be identified (Math.random() is out in this case, unless it is predefined and stored somewhere)

[maniloo]

Working (for me) example to use SwipeRow, not as a top level component:

class YourComponent extends React.Component {

  //SwipeListView use references to close rows.
  //For now passing reference to child component causes problems, so closeRow function is passed to child component.
  setRef = (ref) => {
    this.rowRef = ref
  }

  closeRow = () => {
    this.rowRef.closeRow()
  }

  render(){
    return(
      <SwipeRow
        ref={this.setRef}
      >
        {swipeRowBody}
      </SwipeRow>
    )
  }
}

I tried to use Forwarding Refs but SwipeRow was wrong displayed.

[rollsroyc3]

Just checking out this project for the first time, from the example gif in the repo it seems like the rows are auto closed when another is swiped, is that not the case? Do you have to create refs for each row and close yourself or is this handled automatically?

[jemise111]

@rollsroyc3 The rows will close automatically when another row is swiped so long as you have well defined keys or use a keyExtractor as is mentioned above.

You can also check out the closeOnRowOpen, closeOnRowBeginSwipe props listed here: https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/SwipeListView.md for more info

If you have any problems lmk, thanks!

[priteshpoddar]

I am also facing the same issue. If I only use <SwipeListView /> it works fine i.e. previous swiped row closes on the opening of next swipe but on using <SwipeRow /> with <SwipeListView /> in renderItem all the rows remain open and even on scroll it does not closes. Since the need to use per row behavior so I need to use <SwipeRow /> inside <SwipeListView />.

As for @jemise111 solution, keys work fine for <SwipeListView /> but for <SwipeRow /> it does not behave properly

[jemise111]

Hey @priteshpoddar, I recently tested that behavior as it's similar to another issue (#290). It should definitely work. If it's not can you please open an issue and post some code to reproduce the issue? Thanks!