{"id":13789485,"url":"https://github.com/rjrjr/compose-backstack","last_synced_at":"2025-04-05T20:06:22.964Z","repository":{"id":37662657,"uuid":"249345157","full_name":"rjrjr/compose-backstack","owner":"rjrjr","description":"Simple composable for rendering transitions between backstacks.","archived":false,"fork":false,"pushed_at":"2023-02-20T21:15:17.000Z","size":3929,"stargazers_count":510,"open_issues_count":12,"forks_count":23,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-03-28T22:33:26.525Z","etag":null,"topics":["android","compose","jetpack-compose","kotlin"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rjrjr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":null},"created_at":"2020-03-23T05:40:04.000Z","updated_at":"2025-03-13T19:30:03.000Z","dependencies_parsed_at":"2024-05-03T15:36:43.065Z","dependency_job_id":null,"html_url":"https://github.com/rjrjr/compose-backstack","commit_stats":null,"previous_names":["zach-klippenstein/compose-backstack"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjrjr%2Fcompose-backstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjrjr%2Fcompose-backstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjrjr%2Fcompose-backstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjrjr%2Fcompose-backstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rjrjr","download_url":"https://codeload.github.com/rjrjr/compose-backstack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393569,"owners_count":20931812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","compose","jetpack-compose","kotlin"],"created_at":"2024-08-03T22:00:24.523Z","updated_at":"2025-04-05T20:06:22.947Z","avatar_url":"https://github.com/rjrjr.png","language":"Kotlin","funding_links":[],"categories":["Index"],"sub_categories":[],"readme":"# compose-backstack\n[![Maven Central](https://img.shields.io/maven-central/v/com.zachklipp/compose-backstack.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:com.zachklipp%20a:compose-backstack)\n[![GitHub license](https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg?style=flat)](https://www.apache.org/licenses/LICENSE-2.0)\n\nSimple library for [Jetpack Compose](https://developer.android.com/jetpack/compose) for rendering\nbackstacks of screens and animated transitions when the stack changes. It is _not_ a navigation\nlibrary, although it is meant to be easy to plug into your navigation library of choice\n(e.g. [compose-router](https://github.com/zsoltk/compose-router)), or even just use on its own.\n\nThe Compose version that this library is compatible with is indicated in this library's version\nnumber.\n\n## Usage\n\nThe entry point to the library is the `Backstack` composable. It essentially looks like this:\n\n```kotlin\n@Composable fun \u003cT : Any\u003e Backstack(\n    backstack: List\u003cT\u003e,\n    content: @Composable() (T) -\u003e Unit\n)\n```\n\nThe API is very similar to a lot of composables that draw lists: it takes a list of keys and a\ncomposable function that knows how to draw a key. In this case, a key represents a distinct screen\nin the backstack. When the top key in the stack changes between compose passes, the screens will\nbe animated with a transition.\n\nThe actual API takes a few more parameters, e.g. to allow custom animations. See the\n[source kdoc](compose-backstack/src/main/java/com/zachklipp/compose/backstack/Backstack.kt) for\ndetails!\n\n## Example\n\n```kotlin\n sealed class Screen {\n   object ContactList: Screen()\n   data class ContactDetails(val id: String): Screen()\n   data class EditContact(val id: String): Screen()\n }\n\n data class Navigator(\n   val push: (Screen) -\u003e Unit,\n   val pop: () -\u003e Unit\n )\n\n @Composable fun App() {\n   var backstack: List\u003cScreen\u003e by remember { mutableStateOf(listOf(Screen.ContactList)) }\n   val navigator = remember {\n     Navigator(\n       push = { backstack += it },\n       pop = { backstack = backstack.dropLast(1) }\n     )\n   }\n\n   Backstack(backstack) { screen -\u003e\n     when(screen) {\n       Screen.ContactList -\u003e ShowContactList(navigator)\n       is Screen.ContactDetails -\u003e ShowContact(screen.id, navigator)\n       is Screen.EditContact -\u003e ShowEditContact(screen.id, navigator)\n     }\n   }\n }\n```\n\n## Custom transitions\n\nTransitions between screens are defined by implementing the `BackstackTransition` interface and\npassing the implementation to the `Backstack` composable. This interface has a single method:\n\n```kotlin\nfun Modifier.modifierForScreen(\n    visibility: State\u003cFloat\u003e,\n    isTop: Boolean\n): Modifier\n```\n\nThe `modifierForScreen` method is called for every active/visible screen in the backstack, and must return a [`Modifier`](https://developer.android.com/reference/kotlin/androidx/ui/core/Modifier)\nthat will be applied to the entire screen. Compose has many `Modifier`s built-in, which can be used\nto do a wide variety of visual transformations such as adjust position, size, transparency, etc.\n\nWhen animating between two screens, `visibility` will be somewhere\nbetween 0 and 1 for both the top screen and the screen immediately under the top one.\n\nThe `isTop` flag indicates if the returned modifier will be applied to the top screen or not, and\ncan be used to display a different animation for the top vs under-top screens. For example, the\n`Slide` transition uses `isTop` to determine whether to translate the screen to the end/right, or\nthe start/left.\n\nVisibility will always transition between 0 and 1. If you need to map that range to a different\nrange of floats, or any other type, you can use one of the `lerp` functions provided by Compose.\n\n### Testing custom transitions\n\nYou can use the `BackstackViewerApp` composable in the `backstack-viewer` artifact to test your\ncustom transitions interactively. This composable is used by the sample app, and in the screenshots\nbelow.\n\n## Inspecting the backstack\n\nThe `compose-backstack-xray` gives you a single extension function: `FrameController.xrayed(Boolean)`. This function returns a `FrameController` that will wrap its receiver and, when passed `true`, display it in an interactive, translucent, pseudo-3D stack – similar to Android Studio's Layout Inspector.\nThe top-most screen in the stack will still\nbe rendered in its regular position, but with a very low opacity, and will still be interactive.\n\n![Backstack inspector](.images/inspector.gif)\n\n## Advanced usage: `FrameController`\n\nBoth transition animations and the xray tool are implemented via the `FrameController` API. This is the lowest-level way to plug into the `Backstack` function. More advanced features (e.g. stack peeking like the iOS back gesture) can be implemented by writing custom `FrameController`s. For more information, see the kdoc in the source: [`FrameController.kt`](compose-backstack/src/main/java/com/zachklipp/compose/backstack/FrameController.kt).\n\n## Samples\n\nThere is a sample app in the `sample` module that demonstrates various transition animations and\nthe behavior with different backstacks.\n\n![Slide Transition](.images/sample-slide.gif)\n![Crossfade Transition](.images/sample-crossfade.gif)\n![Custom Transition](.images/sample-custom.gif)\n\n## Gradle\n\n`compose-backstack` is on Maven Central:\n\n```\nallprojects {\n    repositories {\n        mavenCentral()\n    }\n}\n\ndependencies {\n    implementation \"com.zachklipp:compose-backstack:${Versions.backstack}\"\n\n    // For BackstackViewerApp.\n    debugImplementation \"com.zachklipp:compose-backstack-viewer:${Versions.backstack}\"\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frjrjr%2Fcompose-backstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frjrjr%2Fcompose-backstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frjrjr%2Fcompose-backstack/lists"}