Disable ripple effect of BottomNavigationItem

Question

I need a bottom navigation bar for my app. To display the items I use BottomNavigationItem:

BottomNavigation(
    ...
) {
    ...
    BottomNavigationItem(
        ...
        onClick = {onItemSelect(item)},
        ...
    )
}

However, these come with a ripple effect that I want to disable, though I don't know how to. The BottomNavigationItem requires the attribute onClick so using the .clickable() modifier is not an option.

Edit:

This answer from Gabriele Mariotti recommends passing a MutableInteractionSource to the .clickable function, as well as null for indication. Though BottomNavigationItem accepts a MutableInteractionSource, it does not seem to accept an indication.

Answer 1

In this case you can provide a custom LocalRippleTheme to override the default behaviour.

Something like:

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
    BottomNavigation {
            BottomNavigationItem(
              //...
            )
        }
    }
}

with:

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f,0.0f,0.0f,0.0f)
}