How to properly use Jetpack Compose inside BottomSheetDialogFragment? - android-jetpack-compose

Question

For example, I have MyBottomSheetDialogFragment with Compose LazyColumn code in the application:
class MyBottomSheetDialogFragment : BottomSheetDialogFragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
return ComposeView(requireContext()).apply {
setContent {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("Header", color = Color.Black)
LazyColumn(
Modifier
.weight(1f)
.fillMaxWidth()) {
items(100) {
Text("Item $it", Modifier.fillMaxWidth(), Color.Black)
}
}
}
}
}
}
}
And show it using this code:
MyBottomSheetDialogFragment().show(activity.supportFragmentManager, null)
That's what we have:
MyBottomSheetDialogFragment screen image.jpg
Now if to scroll LazyColumn list DOWN then everything works as it should, but if to scroll LazyColumn list UP then Bottom Sheet Dialog scrolls instead of LazyColumn list.
How to properly implement LazyColumn inside BottomSheetDialogFragment?
When we used the XML RecyclerView list, to fix this issue we had to wrap the RecyclerView list with NestedScrollView like described here, but how to fix it with Jetpack Compose?

Answer 1

You should use a BottomSheetScaffold and set the sheetContent with your bottom sheet content. Don't use the BottomSheetDialogFragment.
Here's an example of basic structure of a BottomSheetScaffold:
val scaffoldState = rememberBottomSheetScaffoldState(
bottomSheetState = rememberBottomSheetState(BottomSheetValue.Expanded)
)
BottomSheetScaffold(
modifier = Modifier.navigationBarsPadding(),
scaffoldState = scaffoldState,
topBar = {
// Your topBar
},
sheetShape = BottomSheetShape,
sheetPeekHeight = MaterialTheme.spacing.large,
sheetContent = {
// Your sheet content
}
) { innerPadding ->
// You content
}

Answer 2

You can use the new rememberNestedScrollInteropConnection() on compose 1.2.0 which will allow compose to interrupt View's scrolling and enable nested scrolling.
In your case it will be
setContent {
Column(modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection()), horizontalAlignment = Alignment.CenterHorizontally) {
Text("Header", color = Color.Black)
LazyColumn(
Modifier
.weight(1f)
.fillMaxWidth()) {
items(100) {
Text("Item $it", Modifier.fillMaxWidth(), Color.Black)
}
}
}
}