Compose Stacked Snackbar 🗂️

Stacked Snackbar for Compose Multiplatform (Android, iOS and Desktop). This library has built-in basic snackbar type (error, warning, success and info) and also able to accept custom composable snackbar

Interaction and Animation

Compose Stacked Snackbar support swipe left or right interaction to dismiss the snackbar

Interaction	Animation Type : Bounce	Animation Type : Slide
interaction.mp4	animation_bounce.mp4	animation_slide.mp4

Features

• Built-in basic snackbar type for error, warning, info and success
• Support custom composable snackbar
• Swipe left or right to dismiss
• Built-in bounce and slide animation
• Support custom snackbar action
• Auto dismiss with duration (short and long duration)
• Support max stack configuration
• Easy to use and easy to migrate from default compose snackbar

Usage Comparison with Default Compose Snackbar

Deafult Compose Snackbar	Compose Stacked Snackbar

There is no need to add/manage coroutine scopes to launch compose stacked snackbar, because compose stacked snackbar already has internal coroutine scopes.

Installation

Compose Multiplatform

Add this line to shared build.gradle

sourceSets {
  commonMain.dependencies {
    implementation("io.github.rizmaulana:compose-stacked-snackbar:1.0.3")
  }
}

If your android version targetSdk and compileSdk <= 33, you need to add this line on project level build.gradle

subprojects {
    project.configurations.configureEach {
        resolutionStrategy {
            force("androidx.emoji2:emoji2-views-helper:1.3.0")
            force("androidx.emoji2:emoji2:1.3.0")
        }
    }
}

Android

Add this line to app level build.gradle

dependencies {
  implementation "io.github.rizmaulana:compose-stacked-snackbar:1.0.3"
}

// If your android version `targetSdk` and `compileSdk` <= 33, you need to add this line
project.configurations.configureEach {
    resolutionStrategy {
        force("androidx.emoji2:emoji2-views-helper:1.3.0")
        force("androidx.emoji2:emoji2:1.3.0")
    }
}

Usage

Basic Usage

val stackedSnackbarHostState = rememberStackedSnackbarHostState()

Scaffolf(
  snackbarHost = { StackedSnackbarHost(hostState = stackedSnackbarHostState)  }
){
  Button(onClick = {
    stackedSnackbarHostState.showInfoSnackbar("Info Snackbar")
  }){
    Text("Click Me!")
  }
}

Snackbar Configuration

val stackedSnackbarHostState = rememberStackedSnackbarHostState(
  maxStack = 5,
  animation = StackedSnackbarAnimation.Slide
)

Snackbar Type

stackedSnackbarHostState.showInfoSnackbar("Info Snackbar")

stackedSnackbarHostState.showWarningSnackbar("Warning Snackbar")

stackedSnackbarHostState.showErrorSnackbar("Error Snackbar")

stackedSnackbarHostState.showSuccessSnackbar("Success Snackbar")

stackedSnackbarHostState.showCustomSnackbar(content = { dismiss ->
  Row {
    Text("Custom Snackbar")
    Image(painterResource = "close.xml", modifier = Modifier.clickable { dismiss.invoke() })
  }
})

Built-In Snackbar Parameter

stackedSnackbarHostState.showInfoSnackbar(
  title = "Info Snackbar",
  description = "Description of Info Snackbar",
  actionLabel = "Go To Settings",
  action = {
    println("Action snackbar clicked")
  },
  duration = StackedSnackbarDuration.Short
)

Note : Auto dismiss duration (StackedSnackbarDuration.Short and StackedSnackbarDuration.Long) only works if there is only 1 stacked snackbar, if there are more than 1 stacked snackbar, auto dismiss duration will be disable.

Contributing

Pull requests are welcome

Credits

• Snackbar Inspiration by Emil Kowalski
• Compose Multiplatform Library Template by KevinnZou