I'm trying to use Accompanist Compose Animation so...

# compose

[Travis Griggs]

I'm trying to use Accompanist Compose Animation so that my "pages" appear to slide in from left/right. I had a simple NavHost with four mock composables, a button bar on the bottom that switches the route of the controller. Worked great, but no animation.

Per the guide (https://google.github.io/accompanist/navigation-animation/), I added the dependency, changed my NavHost to an AnimatedNavHost and replaced with rememberNavController with rememberAnimatedNavController.

Now nothing shows up in the (Animated)NavHost. Is there some special trick I'm missing?

On the off chance that it needed animation transitions defined for anything to show up at all, I decided to add those. The documentation on that page shows the enterTransition, etal, paramaters as being part of composable slots in the AnimatedNavHost. But it appears that actually those parameters belong in the AnimatedNavHost() call. At least, that compiled, whereas as documented, did not. Either way, it still doesn't show up. :(

[Colton Idle]

Got any code to show?

[Travis Griggs]

sure... is this enough?

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContent {
         Pager4Theme {
            MainScreen()
         }
      }
   }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun MainScreen() {
   val navController = rememberAnimatedNavController()
   Scaffold(bottomBar = {
      PageTabBar(navController = navController, modifier = Modifier.height(100.dp))
   }) { innerPadding ->
      PagesNavHost(
         navController = navController, modifier = Modifier.padding(innerPadding)
      )
   }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun PagesNavHost(
   modifier: Modifier = Modifier,
   navController: NavHostController,
   startDestination: String = "page_plans"
) {
   AnimatedNavHost(modifier = modifier,
      navController = navController,
      startDestination = startDestination) {
      composable("page_plans") { PlansPage() }
      composable("page_maps") { MapsPage() }
      composable("page_status") { StatusPage() }
      composable("page_settings") { SettingsPage() }
   }
}

[Ian Lake]

Did you also change your imports as per that migration guide?

[Ian Lake]

Using the wrong composable would make nothing appear

[Travis Griggs]

import com.google.accompanist.navigation.animation.AnimatedNavHost
import com.google.accompanist.navigation.animation.rememberAnimatedNavController

[Ian Lake]

• Replace import androidx.navigation.compose.composable with import com.google.accompanist.navigation.animation.composable

[Travis Griggs]

Thanks for asking. As I was copy/pasting the above, I saw that the composable was just from compose. Adjusted it and TADA! Thank you so much.

[Travis Griggs]

One dissapointment here (being from a dynamic typing background) is that I thought stronger typing bookkeeping was supposed to keep me from making these kinds of mistakes. Why did the compiler not point out that I was using a compose() implementation that was not going to work out in the context?

[Ian Lake]

The Kotlin DSL used to build your graph is totally unaware of what types of destinations you are using - that's what let you drop in bottom sheet destinations into either NavHost or AnimatedNavHost and have them just work without either of them being aware of how bottom sheets are implemented. That also means that AnimatedNavHost, which only looks for com.google.accompanist.navigation.animation.composable destinations just assumes someone else is handling a androidx.navigation.compose.composable destination, just like a bottomSheet destination. This would certainly be a good candidate for a lint check (since, in fact, it would never work as you've found 🙂 ), but Accompanist currently doesn't ship any lint checks embedded in their libraries. You could certainly file an issue for that though