Layout animation for FlatList #2674
Conversation
| ); | ||
| return ( | ||
| <AnimatedFlatList | ||
| {...(restProps as any)} |
There was a problem hiding this comment.
Why do the types don't work correctly here?
There was a problem hiding this comment.
Because FlatList is generic. @jakub-gonet and I already had a hard time trying to get this working, I'd be surprised if there was a simple solution 😅
There was a problem hiding this comment.
| itemLayoutAnimation, | ||
| ...restProps | ||
| }) => { | ||
| const cellRenderer = React.useMemo( |
There was a problem hiding this comment.
any reason to use memo here instead of just a simple method? Seems like updating layout animation won't have any effect given memo has empty array as dependencies now
|
@piaskowyk When will there be a new beta release that includes this? I'm having trouble updating my Podfile to use this commit pre-release. |
|
This PR is released today with stable 2.3.0 |
| @@ -256,6 +257,10 @@ declare module 'react-native-reanimated' { | |||
| getNode(): ReactNativeScrollView; | |||
| } | |||
| export class Code extends Component<CodeProps> {} | |||
| export class FlatList extends Component<AnimateProps<FlatList>> { | |||
There was a problem hiding this comment.
@piaskowyk this type definition is missing the generic type mentioned in issue 2769. Should probably be defined as:
export class FlatList<T = any> extends Component<AnimateProps<FlatListProps<T>>> {
itemLayoutAnimation: ILayoutAnimationBuilder;
getNode(): ReactNativeFlatList;
}
|
Is there any requirements to use this? Do children need to be |
|
Is this available in Reanimated 3-rc? |
## Summary This PR adds example usage of `itemLayoutAnimation` prop to the example app and docs page with example recording and details. ## Example image of the added docs page  ## Related context Related issue: #6278 Support for `multi-column` lists seems to be impossible to implement. react-native adds additional wrapper component for each row and re-renders list items in different rows when new items are added or items are removed from the list. Because the parent of list items changes and the layout animation cannot be applied to the wrapper that is added to list rows, layout animations won't work for lists with multiple columns. At least, I didn't come up with any valid solution. PR that adds support for `FlatList` items animations: #2674 What react-native does for mutli-column lists: https://github.com/facebook/react-native/blob/2098806c2207f376027184329a7285913ef8d090/packages/react-native/Libraries/Lists/FlatList.js#L643 --------- Co-authored-by: Tomasz Żelawski <[email protected]>
Description
The default implementation of
FlatListwraps every item by custom component. This component hasn't got children's properties - in effect wrapping component hasn't the layout property withlayoutanimation. It means the animation of the layout will not run because the "layout event" will be consumed by the wrapping component instead of his child.How to use it
Fixes: #2664 #2424
Inspired by: @nicholash747 's #2424 (comment) - thanks! 🚀