From 955bc103a84814958c6ec8ed848f8459535a03ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20=C5=81opaci=C5=84ski?= Date: Sat, 27 Dec 2025 17:49:50 +0100 Subject: [PATCH 1/2] Update items and container layout animations in docs --- packages/docs/docs/flex/props.mdx | 50 +++++++++-------------------- packages/docs/docs/grid/props.mdx | 52 ++++++++++--------------------- 2 files changed, 31 insertions(+), 71 deletions(-) diff --git a/packages/docs/docs/flex/props.mdx b/packages/docs/docs/flex/props.mdx index 219a025a..806836c9 100644 --- a/packages/docs/docs/flex/props.mdx +++ b/packages/docs/docs/flex/props.mdx @@ -254,13 +254,23 @@ Horizontal padding of the flex container. --- -### animateHeight +### dimensionsAnimationType Whether the height of the flex component should be animated when the items are reordered. -| type | default | required | -| --------- | ------- | -------- | -| `boolean` | false | NO | +| type | default | required | +| --------------------------------- | -------- | -------- | +| `'layout' \| 'none' \| 'worklet'` | `'none'` | NO | + +- `'none'` - No animation +- `'layout'` - uses **Reanimated Layout Animations** +- `'worklet'` - uses **Reanimated worklet-based animations** + +:::info + +`'layout'` mode is more performant than `'worklet'` but it doesn't affect surrounding views during the animation. If you have content rendered next to the sortable grid, it will update its position immediately instead of animating. + +::: :::warning @@ -667,39 +677,9 @@ type LayoutAnimation = --- -### itemsLayout - -Layout transition to use when items are reordered. - -| type | default | required | -| ------------------ | ----------------------------- | -------- | -| `LayoutTransition` | LinearTransition\* / null\*\* | NO | - -\*Library default `itemsLayout` implementation for native platforms - -\*\*No default value on Web - -
- Type definitions - -```tsx -type LayoutTransition = - | BaseAnimationBuilder - | LayoutAnimationFunction - | typeof BaseAnimationBuilder; -``` - -
- -:::warning Warning (Web) - -This prop is **not supported** on Web. - -::: - --- -### itemsLayoutTransitionMode +### itemPositionsAnimationMode Controls when items positions are animated. diff --git a/packages/docs/docs/grid/props.mdx b/packages/docs/docs/grid/props.mdx index 6388e191..ef5ff206 100644 --- a/packages/docs/docs/grid/props.mdx +++ b/packages/docs/docs/grid/props.mdx @@ -121,13 +121,23 @@ Gap between columns in the grid. --- -### animateHeight +### dimensionsAnimationType -Whether the height of the grid should be animated when the items are reordered. +Whether and how to animate container dimensions changes. -| type | default | required | -| --------- | ------- | -------- | -| `boolean` | false | NO | +| type | default | required | +| --------------------------------- | -------- | -------- | +| `'layout' \| 'none' \| 'worklet'` | `'none'` | NO | + +- `'none'` - No animation +- `'layout'` - uses **Reanimated Layout Animations** +- `'worklet'` - uses **Reanimated worklet-based animations** + +:::info + +`'layout'` mode is more performant than `'worklet'` but it doesn't affect surrounding views during the animation. If you have content rendered next to the sortable grid, it will update its position immediately instead of animating. + +::: :::warning @@ -549,39 +559,9 @@ type LayoutAnimation = --- -### itemsLayout - -Layout transition to use when items are reordered. - -| type | default | required | -| ------------------ | ----------------------------- | -------- | -| `LayoutTransition` | LinearTransition\* / null\*\* | NO | - -\*Used as a default value on native platforms - -\*\*No default value on Web - -
- Type definitions - -```tsx -type LayoutTransition = - | BaseAnimationBuilder - | LayoutAnimationFunction - | typeof BaseAnimationBuilder; -``` - -
- -:::warning Warning (Web) - -This prop is **not supported** on Web. - -::: - --- -### itemsLayoutTransitionMode +### itemPositionsAnimationMode Controls when items positions are animated. From a61f520c1745ff4b8e323b696114d09a6d3bd06c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20=C5=81opaci=C5=84ski?= Date: Sat, 27 Dec 2025 17:58:21 +0100 Subject: [PATCH 2/2] Slight improvement --- packages/docs/docs/flex/props.mdx | 9 ++------- packages/docs/docs/grid/props.mdx | 9 ++------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/docs/docs/flex/props.mdx b/packages/docs/docs/flex/props.mdx index 806836c9..028eece6 100644 --- a/packages/docs/docs/flex/props.mdx +++ b/packages/docs/docs/flex/props.mdx @@ -268,13 +268,8 @@ Whether the height of the flex component should be animated when the items are r :::info -`'layout'` mode is more performant than `'worklet'` but it doesn't affect surrounding views during the animation. If you have content rendered next to the sortable grid, it will update its position immediately instead of animating. - -::: - -:::warning - -This may sometimes cause **performance issues** as it requires layout recalculations. +- `'layout'` mode is more performant than `'worklet'` but it doesn't affect surrounding views during the animation (surrounding content updates position immediately). +- `'worklet'` mode affects surrounding views but is less performant as it requires layout recalculations on every frame. ::: diff --git a/packages/docs/docs/grid/props.mdx b/packages/docs/docs/grid/props.mdx index ef5ff206..208de7d4 100644 --- a/packages/docs/docs/grid/props.mdx +++ b/packages/docs/docs/grid/props.mdx @@ -135,13 +135,8 @@ Whether and how to animate container dimensions changes. :::info -`'layout'` mode is more performant than `'worklet'` but it doesn't affect surrounding views during the animation. If you have content rendered next to the sortable grid, it will update its position immediately instead of animating. - -::: - -:::warning - -This may sometimes cause **performance issues** as it requires layout recalculations. +- `'layout'` mode is more performant than `'worklet'` but it doesn't affect surrounding views during the animation (surrounding content updates position immediately). +- `'worklet'` mode affects surrounding views but is less performant as it requires layout recalculations on every frame. :::