Compose BottomNavigation - How to disable BottomNavigationTransition animation

47 views Asked by At

Inside the Compose BottomNavigation class, there is a BottomNavigationTransition that changes the selected/unselected tab color with an animation progress.

@Composable
private fun BottomNavigationTransition(
    activeColor: Color,
    inactiveColor: Color,
    selected: Boolean,
    content: @Composable (animationProgress: Float) -> Unit
) {
    val animationProgress by animateFloatAsState(
        targetValue = if (selected) 1f else 0f,
        animationSpec = BottomNavigationAnimationSpec
    )

    val color = lerp(inactiveColor, activeColor, animationProgress)

    CompositionLocalProvider(
        LocalContentColor provides color.copy(alpha = 1f),
        LocalContentAlpha provides color.alpha,
    ) {
        content(animationProgress)
    }
}

private val BottomNavigationAnimationSpec = TweenSpec<Float>(
    durationMillis = 300,
    easing = FastOutSlowInEasing
)

This is causing an unwanted behaviour in bottom navigation. When a tab is selected, for a very short period of time, the tab is filled with inactiveColor first, and then after 300ms it is filled with activeColor. Here is slowed down GIF of this. As you can see the tab is first filled with BLUE color, and then it becomes RED.

enter image description here

Is there any way to disable this behaviour?

0

There are 0 answers