Skip to content

Change navigation transitions #229

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Jun 27, 2025
Merged

Change navigation transitions #229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c1b9cf
Change navigation transitions
aabewhite Jun 25, 2025
b9ce576
Make exit fade-out faster
aabewhite Jun 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions Sources/SkipUI/SkipUI/Containers/Navigation.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@
import Foundation
#if SKIP
import androidx.activity.compose.BackHandler
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
Expand Down Expand Up @@ -151,8 +154,8 @@ public struct NavigationStack : View {
let isRTL = EnvironmentValues.shared.layoutDirection == LayoutDirection.rightToLeft
NavHost(navController: navController, startDestination: Navigator.rootRoute, modifier: modifier) {
composable(route: Navigator.rootRoute,
exitTransition: { slideOutHorizontally(targetOffsetX: { $0 * (isRTL ? 1 : -1) / 3 }) },
popEnterTransition: { slideInHorizontally(initialOffsetX: { $0 * (isRTL ? 1 : -1) / 3 }) }) { entry in
exitTransition: { fadeOut(animationSpec: tween(durationMillis: 200)) + slideOutHorizontally(targetOffsetX: { $0 * (isRTL ? 1 : -1) / 3 }) },
popEnterTransition: { fadeIn() + slideInHorizontally(initialOffsetX: { $0 * (isRTL ? 1 : -1) / 3 }) }) { entry in
guard let state = navigator.value.state(for: entry) else {
return
}
Expand All @@ -174,10 +177,10 @@ public struct NavigationStack : View {
for destinationIndex in 0..<Navigator.destinationCount {
composable(route: Navigator.route(for: destinationIndex, valueString: "{identifier}"),
arguments: listOf(navArgument("identifier") { type = NavType.StringType }),
enterTransition: { slideInHorizontally(initialOffsetX: { $0 * (isRTL ? -1 : 1) }) },
exitTransition: { slideOutHorizontally(targetOffsetX: { $0 * (isRTL ? 1 : -1) / 3 }) },
popEnterTransition: { slideInHorizontally(initialOffsetX: { $0 * (isRTL ? 1 : -1) / 3 }) },
popExitTransition: { slideOutHorizontally(targetOffsetX: { $0 * (isRTL ? -1 : 1) }) }) { entry in
enterTransition: { fadeIn() + slideInHorizontally(initialOffsetX: { $0 * (isRTL ? -1 : 1) / 3 }) },
exitTransition: { fadeOut(animationSpec: tween(durationMillis: 200)) + slideOutHorizontally(targetOffsetX: { $0 * (isRTL ? 1 : -1) / 3 }) },
popEnterTransition: { fadeIn() + slideInHorizontally(initialOffsetX: { $0 * (isRTL ? 1 : -1) / 3 }) },
popExitTransition: { fadeOut(animationSpec: tween(durationMillis: 200)) + slideOutHorizontally(targetOffsetX: { $0 * (isRTL ? -1 : 1) / 3 }) }) { entry in
guard let state = navigator.value.state(for: entry), let targetValue = state.targetValue else {
return
}
Expand Down
8 changes: 4 additions & 4 deletions Sources/SkipUI/SkipUI/Containers/TabView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
#if !SKIP_BRIDGE
import Foundation
#if SKIP
import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
Expand Down Expand Up @@ -383,8 +383,8 @@ public struct TabView : View {
NavHost(navController,
modifier: Modifier.fillMaxWidth().weight(Float(1.0)),
startDestination: "0",
enterTransition: { EnterTransition.None },
exitTransition: { ExitTransition.None }) {
enterTransition: { fadeIn() },
exitTransition: { fadeOut() }) {
// Use a constant number of routes. Changing routes causes a NavHost to reset its state
for tabIndex in 0..<100 {
composable(String(describing: tabIndex)) { _ in
Expand Down