fix(ui): migrate to androidx-navigation-animation & ui bug fix (#717)

app/build.gradle

@@ -181,7 +181,6 @@ dependencies {
     // https://github.com/google/accompanist/releases
     implementation "com.google.accompanist:accompanist-pager:$accompanist"
     implementation "com.google.accompanist:accompanist-flowlayout:$accompanist"
-    implementation "com.google.accompanist:accompanist-navigation-animation:$accompanist"
     implementation "com.google.accompanist:accompanist-swiperefresh:$accompanist"
 
     implementation platform("androidx.compose:compose-bom:$composeBom")

app/src/main/java/me/ash/reader/ui/ext/NavGraphBuilderExt.kt

@@ -9,55 +9,18 @@
 package me.ash.reader.ui.ext
 
 import androidx.compose.animation.*
-import androidx.compose.animation.core.tween
 import androidx.compose.runtime.Composable
 import androidx.navigation.NamedNavArgument
 import androidx.navigation.NavBackStackEntry
 import androidx.navigation.NavDeepLink
 import androidx.navigation.NavGraphBuilder
-import com.google.accompanist.navigation.animation.composable
+import androidx.navigation.compose.composable
 import me.ash.reader.ui.motion.materialSharedAxisXIn
 import me.ash.reader.ui.motion.materialSharedAxisXOut
 
-@OptIn(ExperimentalAnimationApi::class)
-@Deprecated(message = "Migrate to Forward and backward transition", replaceWith = ReplaceWith("forwardAndBackwardComposable(route = route, arguments = arguments, deepLinks = deepLinks) { content() }")
-)
-fun NavGraphBuilder.animatedComposable(
-        route: String,
-        arguments: List<NamedNavArgument> = emptyList(),
-        deepLinks: List<NavDeepLink> = emptyList(),
-        content: @Composable AnimatedVisibilityScope.(NavBackStackEntry) -> Unit,
-) = composable(
-        route = route,
-        arguments = arguments,
-        deepLinks = deepLinks,
-        enterTransition = {
-            fadeIn(animationSpec = tween(220, delayMillis = 90)) +
-                    scaleIn(
-                            initialScale = 0.92f,
-                            animationSpec = tween(220, delayMillis = 90)
-                    )
-        },
-        exitTransition = {
-            fadeOut(animationSpec = tween(90))
-        },
-        popEnterTransition = {
-            fadeIn(animationSpec = tween(220, delayMillis = 90)) +
-                    scaleIn(
-                            initialScale = 0.92f,
-                            animationSpec = tween(220, delayMillis = 90)
-                    )
-        },
-        popExitTransition = {
-            fadeOut(animationSpec = tween(90))
-        },
-        content = content
-)
-
 private const val INITIAL_OFFSET_FACTOR = 0.10f
 
-@OptIn(ExperimentalAnimationApi::class)
-fun NavGraphBuilder.forwardAndBackwardComposable(
+fun NavGraphBuilder.animatedComposable(
         route: String,
         arguments: List<NamedNavArgument> = emptyList(),
         deepLinks: List<NavDeepLink> = emptyList(),

app/src/main/java/me/ash/reader/ui/page/common/HomeEntry.kt

@@ -3,6 +3,7 @@ package me.ash.reader.ui.page.common
 import android.util.Log
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
@@ -14,8 +15,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.hilt.navigation.compose.hiltViewModel
-import com.google.accompanist.navigation.animation.AnimatedNavHost
-import com.google.accompanist.navigation.animation.rememberAnimatedNavController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.rememberNavController
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.collectLatest
 import me.ash.reader.domain.model.general.Filter
@@ -23,7 +24,7 @@ import me.ash.reader.infrastructure.preference.LocalDarkTheme
 import me.ash.reader.infrastructure.preference.LocalReadingDarkTheme
 import me.ash.reader.ui.ext.collectAsStateValue
 import me.ash.reader.ui.ext.findActivity
-import me.ash.reader.ui.ext.forwardAndBackwardComposable
+import me.ash.reader.ui.ext.animatedComposable
 import me.ash.reader.ui.ext.initialFilter
 import me.ash.reader.ui.ext.initialPage
 import me.ash.reader.ui.ext.isFirstLaunch
@@ -54,7 +55,7 @@ import me.ash.reader.ui.page.settings.troubleshooting.TroubleshootingPage
 import me.ash.reader.ui.page.startup.StartupPage
 import me.ash.reader.ui.theme.AppTheme
 
-@OptIn(ExperimentalAnimationApi::class, androidx.compose.material.ExperimentalMaterialApi::class)
+@OptIn(androidx.compose.material.ExperimentalMaterialApi::class)
 @Composable
 fun HomeEntry(
     homeViewModel: HomeViewModel = hiltViewModel(),
@@ -64,7 +65,7 @@ fun HomeEntry(
     var isReadingPage by rememberSaveable { mutableStateOf(false) }
     val filterUiState = homeViewModel.filterUiState.collectAsStateValue()
     val subscribeUiState = subscribeViewModel.subscribeUiState.collectAsStateValue()
-    val navController = rememberAnimatedNavController()
+    val navController = rememberNavController()
 
     val intent by rememberSaveable { mutableStateOf(context.findActivity()?.intent) }
     var openArticleId by rememberSaveable {
@@ -142,104 +143,106 @@ fun HomeEntry(
         else LocalDarkTheme.current.isDarkTheme()
     ) {
 
-        AnimatedNavHost(
-            modifier = Modifier.background(MaterialTheme.colorScheme.surface),
+        NavHost(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(MaterialTheme.colorScheme.surface),
             navController = navController,
             startDestination = if (context.isFirstLaunch) RouteName.STARTUP else RouteName.FEEDS,
         ) {
             // Startup
-            forwardAndBackwardComposable(route = RouteName.STARTUP) {
+            animatedComposable(route = RouteName.STARTUP) {
                 StartupPage(navController)
             }
 
             // Home
-            forwardAndBackwardComposable(route = RouteName.FEEDS) {
+            animatedComposable(route = RouteName.FEEDS) {
                 FeedsPage(
                     navController = navController,
                     homeViewModel = homeViewModel,
                     subscribeViewModel = subscribeViewModel
                 )
             }
-            forwardAndBackwardComposable(route = RouteName.FLOW) {
+            animatedComposable(route = RouteName.FLOW) {
                 FlowPage(
                     navController = navController,
                     homeViewModel = homeViewModel,
                 )
             }
-            forwardAndBackwardComposable(route = "${RouteName.READING}/{articleId}") {
+            animatedComposable(route = "${RouteName.READING}/{articleId}") {
                 ReadingPage(navController = navController, homeViewModel = homeViewModel)
             }
 
             // Settings
-            forwardAndBackwardComposable(route = RouteName.SETTINGS) {
+            animatedComposable(route = RouteName.SETTINGS) {
                 SettingsPage(navController)
             }
 
             // Accounts
-            forwardAndBackwardComposable(route = RouteName.ACCOUNTS) {
+            animatedComposable(route = RouteName.ACCOUNTS) {
                 AccountsPage(navController)
             }
 
-            forwardAndBackwardComposable(route = "${RouteName.ACCOUNT_DETAILS}/{accountId}") {
+            animatedComposable(route = "${RouteName.ACCOUNT_DETAILS}/{accountId}") {
                 AccountDetailsPage(navController)
             }
 
-            forwardAndBackwardComposable(route = RouteName.ADD_ACCOUNTS) {
+            animatedComposable(route = RouteName.ADD_ACCOUNTS) {
                 AddAccountsPage(navController)
             }
 
             // Color & Style
-            forwardAndBackwardComposable(route = RouteName.COLOR_AND_STYLE) {
+            animatedComposable(route = RouteName.COLOR_AND_STYLE) {
                 ColorAndStylePage(navController)
             }
-            forwardAndBackwardComposable(route = RouteName.DARK_THEME) {
+            animatedComposable(route = RouteName.DARK_THEME) {
                 DarkThemePage(navController)
             }
-            forwardAndBackwardComposable(route = RouteName.FEEDS_PAGE_STYLE) {
+            animatedComposable(route = RouteName.FEEDS_PAGE_STYLE) {
                 FeedsPageStylePage(navController)
             }
-            forwardAndBackwardComposable(route = RouteName.FLOW_PAGE_STYLE) {
+            animatedComposable(route = RouteName.FLOW_PAGE_STYLE) {
                 FlowPageStylePage(navController)
             }
-            forwardAndBackwardComposable(route = RouteName.READING_PAGE_STYLE) {
+            animatedComposable(route = RouteName.READING_PAGE_STYLE) {
                 ReadingStylePage(navController)
             }
-            forwardAndBackwardComposable(route = RouteName.READING_DARK_THEME) {
+            animatedComposable(route = RouteName.READING_DARK_THEME) {
                 ReadingDarkThemePage(navController)
             }
-            forwardAndBackwardComposable(route = RouteName.READING_PAGE_TITLE) {
+            animatedComposable(route = RouteName.READING_PAGE_TITLE) {
                 ReadingTitlePage(navController)
             }
-            forwardAndBackwardComposable(route = RouteName.READING_PAGE_TEXT) {
+            animatedComposable(route = RouteName.READING_PAGE_TEXT) {
                 ReadingTextPage(navController)
             }
-            forwardAndBackwardComposable(route = RouteName.READING_PAGE_IMAGE) {
+            animatedComposable(route = RouteName.READING_PAGE_IMAGE) {
                 ReadingImagePage(navController)
             }
-            forwardAndBackwardComposable(route = RouteName.READING_PAGE_VIDEO) {
+            animatedComposable(route = RouteName.READING_PAGE_VIDEO) {
                 ReadingVideoPage(navController)
             }
 
             // Interaction
-            forwardAndBackwardComposable(route = RouteName.INTERACTION) {
+            animatedComposable(route = RouteName.INTERACTION) {
                 InteractionPage(navController)
             }
 
             // Languages
-            forwardAndBackwardComposable(route = RouteName.LANGUAGES) {
+            animatedComposable(route = RouteName.LANGUAGES) {
                 LanguagesPage(navController = navController)
             }
 
             // Troubleshooting
-            forwardAndBackwardComposable(route = RouteName.TROUBLESHOOTING) {
+            animatedComposable(route = RouteName.TROUBLESHOOTING) {
                 TroubleshootingPage(navController = navController)
             }
 
             // Tips & Support
-            forwardAndBackwardComposable(route = RouteName.TIPS_AND_SUPPORT) {
+            animatedComposable(route = RouteName.TIPS_AND_SUPPORT) {
                 TipsAndSupportPage(navController)
             }
-            forwardAndBackwardComposable(route = RouteName.LICENSE_LIST) {
+            animatedComposable(route = RouteName.LICENSE_LIST) {
                 LicenseListPage(navController)
             }
         }

app/src/main/java/me/ash/reader/ui/page/settings/accounts/AccountDetailsPage.kt

@@ -44,7 +44,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavHostController
-import com.google.accompanist.navigation.animation.rememberAnimatedNavController
+import androidx.navigation.compose.rememberNavController
 import me.ash.reader.R
 import me.ash.reader.infrastructure.preference.KeepArchivedPreference
 import me.ash.reader.infrastructure.preference.SyncBlockListPreference
@@ -76,7 +76,7 @@ import java.util.Date
 @OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun AccountDetailsPage(
-    navController: NavHostController = rememberAnimatedNavController(),
+    navController: NavHostController = rememberNavController(),
     viewModel: AccountViewModel = hiltViewModel(),
 ) {
     val uiState = viewModel.accountUiState.collectAsStateValue()

app/src/main/java/me/ash/reader/ui/page/settings/accounts/AccountsPage.kt

@@ -17,7 +17,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavHostController
-import com.google.accompanist.navigation.animation.rememberAnimatedNavController
+import androidx.navigation.compose.rememberNavController
 import me.ash.reader.R
 import me.ash.reader.ui.component.base.*
 import me.ash.reader.ui.ext.collectAsStateValue
@@ -25,10 +25,9 @@ import me.ash.reader.ui.page.common.RouteName
 import me.ash.reader.ui.page.settings.SettingItem
 import me.ash.reader.ui.theme.palette.onLight
 
-@OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun AccountsPage(
-    navController: NavHostController = rememberAnimatedNavController(),
+    navController: NavHostController = rememberNavController(),
     viewModel: AccountViewModel = hiltViewModel(),
 ) {
     val context = LocalContext.current

app/src/main/java/me/ash/reader/ui/page/settings/accounts/AddAccountsPage.kt

@@ -16,7 +16,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavHostController
-import com.google.accompanist.navigation.animation.rememberAnimatedNavController
+import androidx.navigation.compose.rememberNavController
 import me.ash.reader.R
 import me.ash.reader.ui.component.base.DisplayText
 import me.ash.reader.ui.component.base.FeedbackIconButton
@@ -26,10 +26,9 @@ import me.ash.reader.ui.page.settings.SettingItem
 import me.ash.reader.ui.page.settings.accounts.addition.*
 import me.ash.reader.ui.theme.palette.onLight
 
-@OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun AddAccountsPage(
-    navController: NavHostController = rememberAnimatedNavController(),
+    navController: NavHostController = rememberNavController(),
     viewModel: AccountViewModel = hiltViewModel(),
     additionViewModel: AdditionViewModel = hiltViewModel(),
 ) {