ios-style-bottom-sheet-nav3

KO | EN

gitlite — search

#docker #ui #swift #css #list #nextjs #markdown #csharp #dotnet #deep-learning

ios-style-bottom-sheet-nav3

(★ 9)

No description available.

File Explorer

ZIP Download

- .gitignore
- amazonq.xml
- AndroidProjectSystem.xml
- compiler.xml
- deploymentTargetSelector.xml
- deviceManager.xml
- gradle.xml
- misc.xml
- runConfigurations.xml
- .gitignore
- build.gradle.kts
- - gradle-wrapper.jar
  - gradle-wrapper.properties
- gradle-daemon-jvm.properties
- libs.versions.toml
- IosBottomSheetSceneStrategy.gif
.gitignore
build.gradle.kts
gradle.properties
gradlew
gradlew.bat
README.md
settings.gradle.kts

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

A [`SceneStrategy`](https://developer.android.com/guide/navigation/navigation-3/scenes) for
**Jetpack Navigation 3** that presents bottom sheets as an **iOS-style stack** — each new sheet
slides up over the previous one, and the sheets underneath scale down, lift so their rounded tops
peek out, and dim. The classic "card behind card" presentation stack from iOS.

Unlike wrapping Material's `ModalBottomSheet` (which renders each sheet in its own window with its
own full-screen scrim, so stacked sheets can't peek or transform relative to each other), this
strategy groups all consecutive sheet entries into a **single overlay scene** and draws them as
plain cards — which is what makes the relative scale / lift / dim possible.

## Preview

![iOS-style bottom sheet stack](https://raw.githubusercontent.com/tbahlai/ios-style-bottom-sheet-nav3/main/media/IosBottomSheetSceneStrategy.gif)

## Features

- 📚 **True stack** — open sheets on top of sheets; lower ones recede like iOS.
- 🎚️ **Saturating depth** — deeper sheets stop shrinking past `maxVisibleDepth` (no infinite scale-down).
- 👆 **Swipe / scrim / back / programmatic** dismiss, all with the same slide-down animation.
- 🔁 **Symmetric** open/close animations.
- 💾 **Survives config change / process death** — restored sheets settle in place instead of replaying their enter slide.
- 🧬 **ViewModel-friendly** — each sheet keeps its own `ViewModel`/`rememberSaveable` state while it's on the back stack.
- 🎨 **Themed & tunable** — colors from `MaterialTheme`; look/motion via a single `IosBottomSheetStyle`.

## Requirements

- Jetpack Compose (Material 3)
- `androidx.navigation3:navigation3-runtime` + `navigation3-ui` (**1.1.4+**)
- Sheet keys are regular Navigation 3 keys (`@Serializable` if you use `rememberNavBackStack`)

## Install

It's a single self-contained file — copy
[`IosBottomSheetScene.kt`](app/src/main/java/com/tsynytsyna/nav3bottomsheets/nav/IosBottomSheetScene.kt)
into your project and adjust the `package`.

## Usage

Mark any destination as a sheet with `iosBottomSheet()` metadata, then register the strategy on
`NavDisplay`. Below with the app's `Navigator` / `NavigationState`:

```kotlin
@Serializable data object Home : NavKey
@Serializable data class Details(val id: Int) : NavKey

@Composable
fun App() {
    val navigationState = rememberNavigationState(
        startKey = Home,
        topLevelKeys = setOf(Home),
    )
    val navigator = remember { Navigator(navigationState) }
  
    val entryProvider = entryProvider {
        entry<Home> {
            HomeScreen(onOpenDetails = { navigator.navigate(Details(id = 1)) })
        }
        // Marked as a sheet → rendered in the iOS-style stack.
        entry<Details>(metadata = iosBottomSheet()) { key ->
            val dismiss = LocalDismissIosSheet.current
            DetailsScreen(id = key.id, onClose = dismiss)
        }
    }

NavDisplay(
        entries = navigationState.toEntries(entryProvider),
        onBack = { navigator.goBack() },
        sceneStrategies = remember { listOf(IosBottomSheetSceneStrategy()) },
    )
}
```

- **Open** a sheet by navigating to a sheet-marked key (`navigator.navigate(...)`).
- **Close** from inside a sheet via `LocalDismissIosSheet.current` — same slide-down as swipe /
  scrim / back.
- Any trailing run of sheet-marked entries becomes the stack; everything before it stays as the
  normal background. A non-sheet destination pushed on top (e.g. a full-screen screen) is handled by
  the default single-pane strategy and simply covers the stack — popping it reveals the sheets again.

> `NavigationState.toEntries(...)` applies the `SaveableStateHolder` + `ViewModelStore` decorators,
> so each sheet keeps its own `rememberSaveable` / `ViewModel` state while it's on the back stack.

> `Navigator` / `NavigationState` are the recommended helpers from Google's Navigation 3 guide,
> copied into this project as suggested — see the
> [Navigation 3 migration guide](https://developer.android.com/guide/navigation/navigation-3/migration-guide).
> The strategy itself doesn't depend on them; it works with any `NavDisplay` setup.

## Customization

All look & motion live in `IosBottomSheetStyle`; tweak with `copy` on the default:

```kotlin
val style = IosBottomSheetDefaults.copy(
    maxVisibleDepth = 1,
    cornerRadius = 24.dp,
    transitionDurationMillis = 250,
)
val strategy = remember(sheetState) { IosBottomSheetSceneStrategy<NavKey>(sheetState, style) }
```

| Field                      | Default        | Meaning                                                             |
|----------------------------|----------------|---------------------------------------------------------------------|
| `topGapFraction`           | `0.05`         | Screen-height fraction left as a tappable gap above the front sheet |
| `topGap`                   | `8.dp`         | Extra fixed gap above the front sheet                               |
| `peekHeight`               | `10.dp`        | How far each lower sheet peeks above the one in front               |
| `cornerRadius`             | `16.dp`        | Rounded top-corner radius (drives `shape`)                          |
| `elevation`                | `24.dp`        | Front-sheet shadow                                                  |
| `maxVisibleDepth`          | `2`            | How many sheets keep receding before the stack "saturates"          |
| `scaleStep`                | `0.06`         | Scale removed per depth level                                       |
| `dimStep` / `maxDim`       | `0.18` / `0.5` | Dim added per depth level, clamped                                  |
| `scrimAlpha`               | `0.45`         | Peak backdrop opacity                                               |
| `transitionDurationMillis` | `320`          | Enter/exit duration (symmetric)                                     |
| `dismissDistanceFraction`  | `0.28`         | Drag distance (screen fraction) to dismiss on release               |
| `dismissVelocity`          | `1400`         | Fling velocity (px/s) that dismisses regardless of distance         |
| `stackSpring`              | spring         | Spring for depth transitions & drag settle-back                     |

## How it works

- The strategy returns one **`OverlayScene`** containing all trailing sheet entries; the scene key
  is the top sheet's `contentKey`, so `NavDisplay` re-renders the overlay on every push/pop.
- Each sheet is a plain `Box` card; a `depth` animation drives its scale / lift / dim, `offsetY`
  drives enter/exit, and a drag offset drives swipe-to-dismiss.
- Because the scene's composition is torn down on each push/pop, per-sheet animation state lives in
  the remembered `IosBottomSheetState`; a **saveable** set of seen keys prevents already-open sheets
  from replaying their enter slide after recreation.

## License

MIT — do whatever; attribution appreciated.

ios-style-bottom-sheet-nav3

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README