I get a gap between my modal bottom sheet and soft keyboard. I'm using Jetpack compose for UI. Is there any solution for this, as I can't find any

Question

So my UI is showing something like this

My code is as below.

// modal bottom sheet state

val modalBottomSheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = true
    )

//Custom Otp Field from Basic Text field.

CustomOtpField(
    text = accessPin,
    onTextChanged = {
        if (it.isEmpty()) accessPin = it
        it.lastOrNull()?.let { mChar ->
            if (!(mChar == '.' || mChar == ' ')) {
                if (it.length <= 4) {
                    accessPin = it
                }
            }
        }
    },
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Number,
        imeAction = ImeAction.Done
    )
)

I need the gap to be omitted. Any help will be appreciated.

Answer 1

This issue is partially resolved in another library version, try to use a new version of material3 library:

implementation 'androidx.compose.material3:material3-android:1.2.0'

Or update version of BOM:

implementation platform('androidx.compose:compose-bom:2024.02.01')