Skip to content

Commit

Permalink
update layout transitions docs (#6275)
Browse files Browse the repository at this point in the history
## Summary

This PR includes changes for layout transitions imports in docs.
Since Transition import re-named to LinearTransition, docs needs to be
changed as well

---------

Co-authored-by: Krzysztof Piaskowy <krzysztof.piaskowy@swmansion.com>
  • Loading branch information
Bayramito and piaskowyk authored Jul 16, 2024
1 parent 6fe5efa commit e6ad5c8
Showing 1 changed file with 4 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,23 @@ To be precise how to animate positions and dimensions of components. What's impo
### 1. Import chosen transition

```js
// Transition is just an example and should be replaced by real animation. For Instance Layout
import { Transition } from 'react-native-reanimated';
// LinearTransition is just an example and should be replaced by real animation. For Instance Layout
import { LinearTransition } from 'react-native-reanimated';
```

### 2. Choose Animated Component which layout you want to animate

```js
// AnimatedComponent - component created by createAnimatedComponent or imported from Reanimated
<AnimatedComponent layout={Transition} >
<AnimatedComponent layout={LinearTransition} >
```

### 3. Customize the animation

Different type of layout transitions can be customized differently. For the complete list of option please refer to the paragraph specific to the particular animation type. We recommend using builders outside of components or with `useMemo` to ensure the best performance.

```js
const transition = Transition.duration(3000).otherModifier();
const transition = LinearTransition.duration(3000).otherModifier();

function App() {
return <AnimatedComponent layout={transition} />;
Expand Down

0 comments on commit e6ad5c8

Please sign in to comment.