sheetState isModal not updating

[Sandeep03edu]

• Library Version [0.1.1]
• Affected Device(s) [Xiaomi Redmi 8 with Android 10]

sheetState isModal is not updating when changed during onTargetChanges function

        val scope = rememberCoroutineScope()
        var isModal : Boolean by remember { mutableStateOf(true) }
        val sheetState = rememberFlexibleBottomSheetState(
            flexibleSheetSize = FlexibleSheetSize(
                fullyExpanded = 1.0f,
                intermediatelyExpanded = 0.5f,
                slightlyExpanded = 0f
            ),
            isModal = isModal,
            skipSlightlyExpanded = false,
        )

        FlexibleBottomSheet(
            onDismissRequest = {
                scope.launch {
                    sheetState.hide()
                }
            },
            sheetState = sheetState,
            onTargetChanges = { sheetValue ->
                isModal = sheetValue.ordinal != 0
                println("$TAG Sheet SheetValue: $sheetValue || IsModal:: $isModal || sheetModal :: ${sheetState.isModal}")                
            },
        ) {
            Text(text = "Bottom Sheeeet!!!")
        }

While printing the logs i found below result SheetValue: Hidden || IsModal:: false || sheetModal :: true

I want my bottom sheet to behave as Modal only when it is not hidden i.e., visible If I set isModal as true, then I am not able to access the background content when the sheet is hidden/removed by the user.

Am i missing anything?

[skydoves]

Hey @Sandeep03edu, the example you shared with me is quite confusing. Would you elaborate on this?

If you want to still interact with the background content when your bottom sheet is visible (non-modal), you should give isModal as false.

[Sandeep03edu]

@skydoves I am making the bottom sheet visible when composable is open for the first time, that's why I set the isModal as true. Now, when the user drags down the sheet and make sheet hidden, I want the user to interact with the background composable, i.e., the isModal should be false.

I am implementing the same feature as Instagram's post share button menu When the user clicks the share button a bottom sheet menu opens, and user can't interact with background content, But when the sheet is dismissed user can interact with background content.

[skydoves]

I guess you mean this kind of implementation.

  var isShowing by remember { mutableStateOf(true) }

  if (isShowing) {
    FlexibleBottomSheet(
      onDismissRequest = {
        isShowing = false
      },
      sheetState = rememberFlexibleBottomSheetState(isModal = true),
    ) {
      Text(text = "Bottom Sheeeet!!!")
    }
  }

[Sandeep03edu]

Thanks @skydoves it worked, But I wonder why the sheetState's isModal was not updated in my method? Also, It would be good if the sheet itself had an option to set visibility.

[skydoves]

All those properties that are placed inside the rememberFlexibleBottomSheetState can't be dynamically changed.

You can also change the visibility of your bottom sheet by giving the alpha modifier function like the code below:

FlexibleBottomSheet(
    modifier = Modifier.alpha(1.0f),
    ..

I'm closing this issue. If you still face any other issues, please share them with me. Thanks!