Agent86
Agent86

Reputation: 424

React-native layout animation for row deletion updates entire section in SectionList

I cannot get LayoutAnimation to just animate the row being deleted, unless it is the last row. For anything else, all rows below the row being deleted get animated and it does not look right.

const layoutConfig = {
  duration: 4500,
  create: {
    type: LayoutAnimation.Types.linear,
    property: LayoutAnimation.Properties.opacity,
    duration: 1500,
    delay: 3000,
  },
  update: {
    type: LayoutAnimation.Types.linear,
    duration: 1500,
    delay: 1500,
  },
  delete: {
    type: LayoutAnimation.Types.linear,
    property: LayoutAnimation.Properties.opacity,
    duration: 1500,
  }
}

I have purposely created long durations and sequenced the animation so I can see how it works.

what I see when I delete any row but the last is:

  1. The section rows disappear (from that row and all rows below).
  2. The SectionList adjust to new height of the section that was being updated.
  3. The section rows appear with the row removed.

If I delete the last row, I see just that row disappear and the animation looks ok.

Am I doing something wrong or is there no way to just animate the row that is being removed with LayoutAnimation?

I have verified that the keys for the rows are the same and the way the SectionList is updated is through a dispatch that removed the data from redux and thus updates the SectionList.

Upvotes: 1

Views: 357

Answers (0)

Related Questions