I am facing an issue when I am trying to show two different kotlinlang #compose

I am facing an issue when I am trying to show two different kinds of Modals in the same screen. I need to tap the button twice to show the dialog. Seems like I am not handling the states right. Any suggestions?

bug tap.mp4

Here is the code for toggle:

Copy code

@ExperimentalMaterialApi
@Composable
private fun SetupModals() {
    var modalType: ModalType by remember { mutableStateOf(ModalType.HALF) }
    val modalState = rememberModalState(initialValue = ModalStateValue.Hidden)

    Modal(
        title = "タイトル",
        type = modalType,
        state = modalState,
        onActionClick = {},
        onNavigationClick = {
            modalState.hide()
        },
        modalContent = {
            emptyContent()
        }
    ) {
        Screen(
            onHalfModalButtonClick = {
                modalType = ModalType.HALF
                modalState.show()
            },
            onFullModalButtonClick = {
                modalType = ModalType.FULL
                modalState.show()
            }
        )
    }
}

Tash

01/28/2021, 2:52 AM

What if you do something like

Copy code

@Composable
private fun SetupModals() {
    var modalType: ModalType by remember { mutableStateOf(ModalType.HALF) }
    val modalState = rememberModalState(initialValue = ModalStateValue.Hidden)

    if(modalState.value is Shown) {
       Modal(...) {
           ...
       }
    }
}

🙏 1

Utkarsh Tiwari

01/28/2021, 2:57 AM

This way, the screen doesn’t gets composed so no button to click because the modal is what owns the screen which is hidden initially.

Tash

01/28/2021, 3:09 AM

Copy code

@Composable
private fun SetupModals() {
    var modalType: ModalType by remember { mutableStateOf(ModalType.HALF) }
    val modalState = rememberModalState(initialValue = ModalStateValue.Hidden)

    ModalButtons(
      ...,
      onHalfModalClick = {
         modalState = ShowHalf
      },
      onFullModalClick = {
         modalState = ShowFull
      }, 
   )
  
   if (modalState is ShowHalf) {
      HalfModal(onExit = { modalState = Hidden })
   } else if (modalState is ShowFull) {
      FullModal(onExit = { modalState = Hidden })
   }
}

Where

ModalButtons

represents the buttons, and

Half/FullModal

represents the actual Modal (with modal type Half/Full). Edit 1: updated to simplify Edit 2: added example of Modal exit callbacks

6 Views