animation with different delay not working on FlatList

[iamhaaamed]

I want to use react-native-animatable in FlatList that each item in FlatList has different delay in sequence but all items have the same delay.

<FlatList keyExtractor={(item, index) => item.id} data={this.props.items} ListFooterComponent={this.renderFooter} onEndReached={this.handleLoadMore} onEndReachedThreshold={0.5} renderItem={({item, index}) => ( <View > <Animatable.View delay={(index+1)*1000} duration={3000} animation="slideInLeft"> <CustumItem /> </Animatable.View> </View> )} />

[RashCD]

Yup. same as me, the animation come out in batches. as a work around, what i did is to put a limit to the index to less than 10 (or any number you think is sufficient). then the animation come out correctly. but not as clean as staggered animation from rn.

[roytan883]

Yes, same issue here. How to fix it?

[daominhsangvn]

Same here. But i only see this problem in release mode, development is working fine. That's very weird.

[rohanharikr]

For anyone still looking for a solution to this, use createAnimatableComponent composer.

const AnimView = Animatable.createAnimatableComponent(View);

return (
  <FlatList
      ...
      renderItem={({item, index})=>{
          <AnimView delay={index*150}>...</AnimView>
      }}
  />
)