Skip to content

Commit ecc4512

Browse files
authored
docs: Update items and container layout animations in docs (#530)
## Description As the title says
1 parent 68ddc12 commit ecc4512

File tree

2 files changed

+25
-75
lines changed

2 files changed

+25
-75
lines changed

packages/docs/docs/flex/props.mdx

Lines changed: 12 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -254,17 +254,22 @@ Horizontal padding of the flex container.
254254

255255
---
256256

257-
### animateHeight
257+
### dimensionsAnimationType
258258

259259
Whether the height of the flex component should be animated when the items are reordered.
260260

261-
| type | default | required |
262-
| --------- | ------- | -------- |
263-
| `boolean` | false | NO |
261+
| type | default | required |
262+
| --------------------------------- | -------- | -------- |
263+
| `'layout' \| 'none' \| 'worklet'` | `'none'` | NO |
264264

265-
:::warning
265+
- `'none'` - No animation
266+
- `'layout'` - uses **Reanimated Layout Animations**
267+
- `'worklet'` - uses **Reanimated worklet-based animations**
266268

267-
This may sometimes cause **performance issues** as it requires layout recalculations.
269+
:::info
270+
271+
- `'layout'` mode is more performant than `'worklet'` but it doesn't affect surrounding views during the animation (surrounding content updates position immediately).
272+
- `'worklet'` mode affects surrounding views but is less performant as it requires layout recalculations on every frame.
268273

269274
:::
270275

@@ -667,39 +672,9 @@ type LayoutAnimation =
667672

668673
---
669674

670-
### itemsLayout
671-
672-
Layout transition to use when items are reordered.
673-
674-
| type | default | required |
675-
| ------------------ | ----------------------------- | -------- |
676-
| `LayoutTransition` | LinearTransition\* / null\*\* | NO |
677-
678-
\*Library default `itemsLayout` implementation for native platforms
679-
680-
\*\*No default value on Web
681-
682-
<details>
683-
<summary>Type definitions</summary>
684-
685-
```tsx
686-
type LayoutTransition =
687-
| BaseAnimationBuilder
688-
| LayoutAnimationFunction
689-
| typeof BaseAnimationBuilder;
690-
```
691-
692-
</details>
693-
694-
:::warning Warning (Web)
695-
696-
This prop is **not supported** on Web.
697-
698-
:::
699-
700675
---
701676

702-
### itemsLayoutTransitionMode
677+
### itemPositionsAnimationMode
703678

704679
Controls when items positions are animated.
705680

packages/docs/docs/grid/props.mdx

Lines changed: 13 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -121,17 +121,22 @@ Gap between columns in the grid.
121121

122122
---
123123

124-
### animateHeight
124+
### dimensionsAnimationType
125125

126-
Whether the height of the grid should be animated when the items are reordered.
126+
Whether and how to animate container dimensions changes.
127127

128-
| type | default | required |
129-
| --------- | ------- | -------- |
130-
| `boolean` | false | NO |
128+
| type | default | required |
129+
| --------------------------------- | -------- | -------- |
130+
| `'layout' \| 'none' \| 'worklet'` | `'none'` | NO |
131131

132-
:::warning
132+
- `'none'` - No animation
133+
- `'layout'` - uses **Reanimated Layout Animations**
134+
- `'worklet'` - uses **Reanimated worklet-based animations**
133135

134-
This may sometimes cause **performance issues** as it requires layout recalculations.
136+
:::info
137+
138+
- `'layout'` mode is more performant than `'worklet'` but it doesn't affect surrounding views during the animation (surrounding content updates position immediately).
139+
- `'worklet'` mode affects surrounding views but is less performant as it requires layout recalculations on every frame.
135140

136141
:::
137142

@@ -549,39 +554,9 @@ type LayoutAnimation =
549554

550555
---
551556

552-
### itemsLayout
553-
554-
Layout transition to use when items are reordered.
555-
556-
| type | default | required |
557-
| ------------------ | ----------------------------- | -------- |
558-
| `LayoutTransition` | LinearTransition\* / null\*\* | NO |
559-
560-
\*Used as a default value on native platforms
561-
562-
\*\*No default value on Web
563-
564-
<details>
565-
<summary>Type definitions</summary>
566-
567-
```tsx
568-
type LayoutTransition =
569-
| BaseAnimationBuilder
570-
| LayoutAnimationFunction
571-
| typeof BaseAnimationBuilder;
572-
```
573-
574-
</details>
575-
576-
:::warning Warning (Web)
577-
578-
This prop is **not supported** on Web.
579-
580-
:::
581-
582557
---
583558

584-
### itemsLayoutTransitionMode
559+
### itemPositionsAnimationMode
585560

586561
Controls when items positions are animated.
587562

0 commit comments

Comments
 (0)