React native: Do not re-render the list intentionally while adding the items

[SourceCipher]

I have a small app where I am testing the animations for the items. Basically when I swipe the item, it gets removed from the list and the animation is continued for like 0.5s. The problem is that the mobx updates the array when the item is removed from it and it cancels out the animation. So instead of animation continuing to show removal or addon effect, it just disappears quickly.

How do I avoid this? Same idea for example if I fetch the data when only 2 items left and the array is topped up, I get the same animation cancelling effect.

To show how I am rendering the components would be something like this:

` private renderCards = () => {
const {fakeData, currentTheme} = this.props.mainStore

const el = []

fakeData.forEach(fd => {
  el.push(
    <Draggable key={fd.id}>
      <ItemCard item={fd} />
    </Draggable>,
  )
})

return el

}`

Example to replicate is here https://snack.expo.dev/Jh0Vk0cTX

[kubk]

I doubt it's related to Mobx, did you try to swap mobx with useState here? By the way you may try reproducing the issue and share the link: https://snack.expo.dev/@trin4ik/mobx-theme-provider

It would help us to help you, because currently none of the maintainers have experience with React Native

[SourceCipher]

I mean it could be any state change but thats the issue. I wonder if its possible to sustain the animation while the state changes. I cant think of a way to do it for now. The change in length of an array will always trigger rerender. I will try later the setState just in case.

Edit: tried with set state and its the same result. If the array is not observed it wont have this issue. Ofc its only for the observed arrays. Same with shallow observed

[SourceCipher]

I added the example to the OP @kubk

[kubk]

@SourceCipher Thanks for the reproduction 👍 I've rewritten your example from Mobx to useState and encountered the same issue: https://snack.expo.dev/Lt3Ebv2rh

I've also found a stackoverflow question which is similar to yours: https://stackoverflow.com/questions/69120977/pangesturehandler-state-change-interrupt-gesture

It looks like it is React Native issue and we can't help much here.