Modal

Default

Day	Night	Right to Left

Modal without action

Day	Night	Right to Left

Modal without action and title

Day	Night	Right to Left

Modal with back icon

Day	Night	Right to Left

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Example of a Modal:

                                                
                                                import androidx.compose.runtime.rememberCoroutineScope
                                                import androidx.compose.runtime.saveable.rememberSaveable
                                                import net.skyscanner.backpack.compose.modal.BpkModal
                                                import net.skyscanner.backpack.compose.modal.rememberBpkModalState
                                                
                                                val showModal = rememberSaveable { mutableStateOf(true) }
                                                
                                                if (showModal.value) {
                                                    val modalState = rememberBpkModalState()
                                                    val coroutineScope = rememberCoroutineScope()
                                                    BpkModal(
                                                        state = modalState,
                                                        title = title,
                                                        navIcon = NavIcon.Close(
                                                            contentDescription = "Navigate back",
                                                            onClick = { coroutineScope.launch { modalState.hide() } },
                                                        ),
                                                        action = TextAction(
                                                            text = "Action",
                                                            onClick = {
                                                                coroutineScope.launch { modalState.hide() }
                                                            },
                                                        ),
                                                        onDismiss = { showModal.value = false },
                                                    ) {
                                                        // modal content
                                                    }
                                                }

Note: to correctly show/hide the modal with animation use rememberBpkModalState and modalState.hide() as shown in the example above. The onDismiss callback will be called when the modal is fully dismissed.