Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Rewrite Layout Transition documentation page #6144

Merged
merged 24 commits into from
Jul 24, 2024

Conversation

patrycjakalinska
Copy link
Collaborator

@patrycjakalinska patrycjakalinska commented Jun 20, 2024

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 duration from 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

@patrycjakalinska patrycjakalinska marked this pull request as ready for review June 20, 2024 12:39
patrycjakalinska added a commit that referenced this pull request Jun 21, 2024
New reanimated versions has fixes for layout transitions -> this PR is
needed for [Layout
Transitions](#6144)
to work!
Copy link
Contributor

@Latropos Latropos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

patrycjakalinska added a commit that referenced this pull request Jul 1, 2024
New reanimated versions has fixes for layout transitions -> this PR is
needed for [Layout
Transitions](#6144)
to work!
@patrycjakalinska patrycjakalinska force-pushed the @patrycjakalinska/rewrite-layout-transitions branch from 8b24f41 to 1d4f5e0 Compare July 1, 2024 10:30
github-merge-queue bot pushed a commit that referenced this pull request Jul 15, 2024
## 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).
patrycjakalinska added a commit that referenced this pull request Jul 19, 2024
New reanimated versions has fixes for layout transitions -> this PR is
needed for [Layout
Transitions](#6144)
to work!
@patrycjakalinska patrycjakalinska force-pushed the @patrycjakalinska/rewrite-layout-transitions branch from 3f04608 to c20d20a Compare July 19, 2024 12:04
patrycjakalinska added a commit that referenced this pull request Jul 23, 2024
New reanimated versions has fixes for layout transitions -> this PR is
needed for [Layout
Transitions](#6144)
to work!
@patrycjakalinska patrycjakalinska force-pushed the @patrycjakalinska/rewrite-layout-transitions branch from afb32dd to 36ce409 Compare July 23, 2024 08:21
Copy link
Contributor

@szydlovsky szydlovsky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some rough edges but we're almost there!

@szydlovsky szydlovsky self-requested a review July 23, 2024 16:44
Copy link
Contributor

@szydlovsky szydlovsky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a small NIT but it isn't super important

patrycjakalinska and others added 5 commits July 23, 2024 20:04
New reanimated versions has fixes for layout transitions -> this PR is
needed for [Layout
Transitions](#6144)
to work!
@patrycjakalinska patrycjakalinska force-pushed the @patrycjakalinska/rewrite-layout-transitions branch from 88bd6ba to a09d480 Compare July 23, 2024 18:04
@patrycjakalinska patrycjakalinska added this pull request to the merge queue Jul 24, 2024
Merged via the queue into main with commit dae7a1e Jul 24, 2024
7 checks passed
@patrycjakalinska patrycjakalinska deleted the @patrycjakalinska/rewrite-layout-transitions branch July 24, 2024 08:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants