0

I try to implement my toast stack from my React-Native app in Jetpack Compose.

MainActivity:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val toastStack = ToastStack()

        setContent {
            MainContent(toastStack) // Here we have logic that pushes a toast into our stack
            ToastStack(toastStack) // Here we show toasts
        }
    }
}

ToastStack:

@Composable
fun ToastStack(toastStack: ToastStack) {
    val stack by toastViewModel.stack.observeAsState(listOf())

    LazyColumn(
        verticalArrangement = Arrangement.Bottom,
        userScrollEnabled = false,
        modifier = Modifier
            .fillMaxSize(),
    ) {
        items(stack, key = { it.id }) { toast ->
            Toast(
                toast = toast,
                onToastEnd = { toastStack.removeToast(toast.id) }
            )
        }
    }
}

The problem is that LazyColumn have the size of the screen and it blocks all touch events for the MainContent. In React-Native I used pointerEvents="box-none" to make the view that contains toasts ignore all touch events. Is there any way I can do the same in Jetpack Compose?

MiracetteNytten
  • 31
  • 2
  • Does [this](https://stackoverflow.com/a/69146178/3585796) answer your question? Also note that it would prevent users from swiping the `Toast`, which is not perfect UX to me. I'd say that you don't need a lazy column here (do you expect to have more than a full screen of toasts?), so you can just use a `Column` which will warp content size. – Phil Dukhov Jun 08 '22 at 08:20
  • I've tried this and it doesn't work. – MiracetteNytten Jun 08 '22 at 08:40
  • It works because LazyColumn doesn't fill the screen. If you add fillMaxSize() modifier, it won't work anymore including scrolling. – MiracetteNytten Jun 08 '22 at 09:11
  • Yes, seems it doesn't work in case of lazy column. but why would you need to make it `fillMaxSize` at all? I think you can let it wrap content size so Toast can get a touch and other view part is not blocked. – Phil Dukhov Jun 08 '22 at 09:45
  • I need to show toasts at the bottom of the screen. I tried to use offset instead, but the animation looks bad. – MiracetteNytten Jun 08 '22 at 10:22
  • `Box(Modifier.fillMaxSize()) { LazyColumn(Modifier.align(Alignment.BottomCenter)) { } }` – Phil Dukhov Jun 08 '22 at 10:23

0 Answers0