I think I’ve hit a bug in Compose Material - is an...

# compose

[dorche]

I think I’ve hit a bug in Compose Material - is anyone else experiencing this? Basically BottomSheetScaffold is not rendering properly in Previews (only Preview as far as I can see) on androidx.compose.material:material:1.2.0-beta03 but it does on the previous version - androidx.compose.material:material:1.2.0-beta02 . More in 🧵

[dorche]

On a brand new project created from the Android Studio template, with the following code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BottomSheetStateIssueTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    BottomSheetBug()
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BottomSheetBug() {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )
    val coroutineScope = rememberCoroutineScope()
    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Box(
                Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(Color.Cyan)
            ) {
                Text(text = "Hello from sheet")
            }
        },
        sheetPeekHeight = 50.dp,
        contentColor = Color.Red
    ) {
        Box(modifier = Modifier.height(200.dp)) {
            Button(onClick = {
                coroutineScope.launch {
                    if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                        bottomSheetScaffoldState.bottomSheetState.expand()
                    } else {
                        bottomSheetScaffoldState.bottomSheetState.collapse()
                    }
                }
            }) {
                Text(text = "Expand/Collapse Bottom Sheet")
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BottomSheetStateIssueTheme {
        BottomSheetBug()
    }
}

the Preview shows this on the beta03 version:

[dorche]

When you run it on device or even just “Start Interactive Mode”, it fixes itself, screenshots below for collapsed and expanded state…

[dorche]

The release notes for beta03 indeed mention changes to BottomSheetScaffold which I’m guessing broke that https://developer.android.com/jetpack/androidx/releases/compose-material#1.2.0-beta03

[dorche]

This is quite disruptive for us atm because we are using Previews for screenshot testing..

Could someone confirm if they are seeing the same behaviour and I’m not going crazy?

[jossiwolf]

It me! Please file an issue at https://buganizer.corp.google.com/issues?q=status:open%20componentid:742043&s=created_time:desc 🙂

[jossiwolf]

(I made that change. Sorry!)

[dorche]

I don’t think I have a login for that, is that an internal bug tracker?

[jossiwolf]

Ugh, sorry! The right link https://issuetracker.google.com/issues?q=status:open%20componentid:742043

[Tristan Hamilton]

I seem to have bumped into similar issue - trying to preview an expanded ModalBottomSheetLayout in 1.2.0 and i only see the scrim until i click on interactive mode.
Was a ticket created in the end?

[dorche]

Hey no sorry I was on holiday and only coming back this week so I've not raised one yet.
Let me know if you end up raising one, if not I'll do it this week and drop a message here

[Tristan Hamilton]

Ah no worries, I wanted to check first to see if there was a root cause in case ive got a different issue - i tried to rollback through a couple of the 1.2 betas/alphas for the view im trying to preview and i still only see the scrim until I click interactive mode 😕 so maybe im doing something wrong. Think id need to try experiment in a simple project to confirm before opening a ticket.

[dorche]

That might be because another library is promoting material to a newer version still, try this (might need tweaking if you use Kotlin DSL)

implementation("androidx.compose.material:material") {
        version {
            // todo remove when BottomSheetScaffold Preview Bug is fixed
            strictly '1.2.0-beta02'
        }
    }

That’s the latest version I found to be working fine at the time.

This is what I did for our project because we absolutely depend on the previews working fine

[Tristan Hamilton]

ok made a super small example here: https://github.com/Munzey/ModalBottomSheetPreviewBug/blob/master/app/src/main/java/com/example/modalbottomsheetpreviewbug/MainActivity.kt

regardless of the compose version (tried 1.0.0, 1.1.0, 1.2.0-alpha0X etc), the preview does not show the expanded bottom sheet, only the scrim has rendered.
When you click interactive mode, the modal pops up.

This seems different to your issue listed above so I’ll submit a ticket for this case anyway.

[Tristan Hamilton]

ticket @jossiwolf https://issuetracker.google.com/issues/241895902 🙇

[jossiwolf]

Thanks for filing @Tristan Hamilton! FWIW the original issue was about BottomSheetScaffold - we reverted the change that surfaced the bug in that. The issue you are seeing has the same root cause though which we are working on fixing, but it will be a bit still. I might mark your issue as duplicate and then you can follow along in the OG bug 🙂

[Tristan Hamilton]

thanks for the follow up!