docs: Rewrite Layout Transition documentation page#6144
docs: Rewrite Layout Transition documentation page#6144patrycjakalinska merged 24 commits intomainfrom
Conversation
New reanimated versions has fixes for layout transitions -> this PR is needed for [Layout Transitions](#6144) to work!
Latropos
left a comment
There was a problem hiding this comment.
I remember that some parts of the documentation have unexpected structure due to some animation behaviour that is not longer present, I've highlighted them in case you want to polish them a bit.
Also I believe that this page of the documentation would benefit if you described the common animation modifiers just in one place on a top of the page:
.duration(duration: number) sets length of the animation (in milliseconds). Defaults to '500'.
.delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
.reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
.withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.
And then, for each layout transition you would name a subsection Custom Curved Transition Modifiers or Custom Modifiers instead of just Modifiers. You could even create a compatibility table, just like in our compatibility guide showing which transition works with given modifier. It is possible, especially that we probably want to unify the duration across all the transition.
I would like you to think over all my suggestions, but feel free to reject them after this consideration.
New reanimated versions has fixes for layout transitions -> this PR is needed for [Layout Transitions](#6144) to work!
8b24f41 to
1d4f5e0
Compare
## Summary The `combineTransition` method doesn't seem to be necessary. It doesn't add any additional logic, duplicates the public API, and misleadingly suggests that `combineTransition` and `EntryExitTransition` are distinct entities. In fact, it has even been removed from the documentation page [here](#6144).
New reanimated versions has fixes for layout transitions -> this PR is needed for [Layout Transitions](#6144) to work!
3f04608 to
c20d20a
Compare
New reanimated versions has fixes for layout transitions -> this PR is needed for [Layout Transitions](#6144) to work!
afb32dd to
36ce409
Compare
szydlovsky
left a comment
There was a problem hiding this comment.
There are some rough edges but we're almost there!
szydlovsky
left a comment
There was a problem hiding this comment.
Left a small NIT but it isn't super important
New reanimated versions has fixes for layout transitions -> this PR is needed for [Layout Transitions](#6144) to work!
## Summary The `combineTransition` method doesn't seem to be necessary. It doesn't add any additional logic, duplicates the public API, and misleadingly suggests that `combineTransition` and `EntryExitTransition` are distinct entities. In fact, it has even been removed from the documentation page [here](software-mansion#6144).
To be up to date we rewritten Layout Transition, implemented InteractiveExample with selectable transition and added new, refreshed videos.
Jumping, Curved and Entry/Exit Transition are available on web
This needs latest react-native-reanimated@nightly
It includes new updated Fading default
durationfrom this PR.check default duration in transitions
Before:
before.mov
After:
after.mov
How interactivExample works:
Screen.Recording.2024-06-20.at.14.37.20.mov