Navigate back in wear devices

[rslemos]

Voyager Navigator supports back navigation by means of BackHandler.

Unfortunately, wear devices completely ignore onBackPressed [citation needed].

The Navigation component for wear ("androidx.wear.compose:compose-navigation") take extra measures for this, for instance in SwipeDismissableNavHost (and others like rememberSwipeDismissableNavController).

I can try something specific in my application to glue a SwipeToDismissBox and Voyager Navigator, though I don't know yet exactly how or how to even begin with.

Have you ever considered supporting wear devices? Any ideas on how to tackle this? What are the obstacles ahead?

[rslemos]

I've got something working. I'll leave the code here for your consideration:

@Composable
fun WearApp(
) {
    MaterialTheme {
        Navigator(HomeScreen) { navigator ->
            SwipeToDismissBox(
                onDismissed = { navigator.pop() },
                hasBackground = navigator.size >= 2,
            ) { isBackground ->
                if (isBackground) {
                    val previousScreen = navigator.items[navigator.size - 2]

                    navigator.saveableState("currentScreen", previousScreen) {
                        previousScreen.Content()
                    }
                } else
                    CurrentScreen()
            }
        }
    }
}

The use of "currentScreen" [parameter to saveableState] may be questionable. I thought that if I were to use any other key ("previousScreen" for instance) perhaps another new pristine screen would be rendered.

---

Apart from that SwipeToDismissBox it also came to me (through LogCat) that

OnBackInvokedCallback is not enabled for the application.
Set 'android:enableOnBackInvokedCallback="true"' in the application manifest.

Though I'm yet to know if this will make wear device produce onBackPressed on a swipe right gesture, or if this only applies to the "back physical button" (currently it works as a "running tasks" button).

[rslemos]

After fiddling a little with Voyager Navigation, SwipeToDismissBox and SlideTransition, I've came to:

@Composable
fun WearApp(
) {
    MaterialTheme {
        Navigator(HomeScreen) { navigator ->
            SlideTransition(navigator) {
                SwipeToDismissBox(
                    onDismissed = { navigator.pop() },
                    hasBackground = navigator.size >= 2,
                ) { isBackground ->
                    (if (isBackground) navigator.items[navigator.size - 2] else navigator.lastItem).Content()
                }
            }
        }
    }
}

And it kind of works. Swiping right will nagivate back; screens will enter and exit by SlideTransition animation. But the background thing is wrong.

Voyager will instantiate a new screen (with a brand new view model) to render the background screen. After completing the "nagivate back" gesture, the previous screen's state is rightfully restored.

I'm about to abandon completely the idea of animating navigation in favor of simply animating visibility.

[rslemos]

I've corrected the "background screen" by creating local copies of SlideTransition and ScreenTransition, so that a new parameter was introduced (and an old one changed conditionally):

public enum class SaveStateOption {
    Stock,
    Custom
}

@Composable
public fun ScreenTransition2(
    /* ... other parameters unchanged */
    saveStateOption: SaveStateOption = SaveStateOption.Stock,
    content: ScreenTransitionContent = when (saveStateOption) {
        SaveStateOption.Stock -> ({ it.Content() })
        SaveStateOption.Custom -> ({ screen ->
            navigator.saveableState("transition", screen) {
                screen.Content()
            }
        })
    },
) { /* function body unchanged, but calling ScreenTransition2 and also forwarding saveStateOption */ }

@Composable
public fun ScreenTransition2(
    /* ... other parameters unchanged */
    saveStateOption: SaveStateOption = SaveStateOption.Stock,
    content: ScreenTransitionContent = when (saveStateOption) {
        SaveStateOption.Stock -> ({ it.Content() })
        SaveStateOption.Custom -> ({ screen ->
            navigator.saveableState("transition", screen) {
                screen.Content()
            }
        })
    },
) {
    AnimatedContent(
        /* nothing changed in these arguments */
    ) { screen ->
        when (saveStateOption) {
            SaveStateOption.Stock -> {
                navigator.saveableState("transition", screen) {
                    content(screen)
                }
            }
            SaveStateOption.Custom -> content(screen)
        }

    }
}

@Composable
public fun SlideTransition2(
    /* ... other parameters unchanged */
    saveStateOption: SaveStateOption = SaveStateOption.Stock,
    content: ScreenTransitionContent = when (saveStateOption) {
        SaveStateOption.Stock -> ({ it.Content() })
        SaveStateOption.Custom -> ({ screen ->
            navigator.saveableState("transition", screen) {
                screen.Content()
            }
        })
    },
) { /* function body unchanged, but calling ScreenTransition2 and also forwarding saveStateOption */ }

Basically all the functions stay the same, with the addition of saveStateOption parameter: if Stock then the original (released) behavior is retained; if Custom then it is expected that content will navigator.saveableState(...) itself.

---

To use my new SlideTransition2 with SwipeToDismissBox it is necessary to invoke this new Custom option:

@Composable
fun WearApp(
) {
    MaterialTheme {
        Navigator(HomeScreen) { navigator ->
            SlideTransition2(
                navigator,
                saveStateOption = SaveStateOption.Custom,
            ) { screen ->
                SwipeToDismissBox(
                    onDismissed = { navigator.pop() },
                    hasBackground = navigator.size >= 2,
                ) {  isBackground ->
                    if (isBackground) {
                        val previousScreen = navigator.items[navigator.size - 2]
                        navigator.saveableState("currentScreen", previousScreen) {
                            previousScreen.Content()
                        }
                    } else {
                        navigator.saveableState("currentScreen", screen) {
                            screen.Content()
                        }
                    }
                }
            }
        }
    }
}

---

There is only a little burr left to hone: the entire swipe back gesture occurs perfectly, with the background screen retaining the correct state and all.

BUT after swipe back is committed, the slide out animation happens again: the exiting screen is brought to foreground, and is slided out again. I'll now look for some mean to turn off animation in case navigator.pop() comes from SwipeToDismissBox.onDismissed.