mori-atsushi / insetsx

WindowInsets utility for compose multiplatform
Apache License 2.0
227 stars 2 forks source link

Insets padding issue in iOS #21

Open pushpalroy opened 1 year ago

pushpalroy commented 1 year ago

I want to keep the AppBar fixed and scroll up the screen/list when the keyboard opens. I want to do this when a TextField is clicked.

So I have added the following:

In the Scaffold:

Scaffold(
        modifier = Modifier.windowInsetsPadding(
            WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical)
        ),
        scaffoldState = scaffoldState,
        topBar = {
            TaskBoardAppBar(
                isExpandedScreen = isExpandedScreen,
                onBackClick = onBackClick,
                title = viewModel.boardInfo.value.second,
                navigateToChangeBgScreen = { passedString -> navigateToChangeBgScreen(passedString) },
                onHamBurgerMenuClick = { expandedPanel = !expandedPanel },
                onSaveClicked = { saveCardClicked = true },
                editModeEnabled = editModeEnabled
            )
        },...

And in the TextField:

TextField(
                        modifier = Modifier.imePadding(),
                        value = editedTitle.value,
                        onValueChange = { editedTitle.value = it }
                    )

In Android, it's looking good and I'm able to achieve the desired behavior.

But, in iOS, the following are observed, when the keyboard opens:

  1. The AppBar is scrolled up along with the entire scaffold/screen. So it is no more visible.
  2. A large padding comes above the keyboard.

Please find the screenshot of the comparison, when run in simulators:

Left - Android Right - iOS

Screenshot 2023-05-07 at 1 02 45 AM

mori-atsushi commented 1 year ago

In iOS, the window will automatically move if the focused element is obscured by the software keyboard. But we can not disable it. This is a problem on the Compose Multiplatform side, and I could not come up with a workaround. https://github.com/JetBrains/compose-multiplatform/issues/3128

Therefore, the ime-related API is experimental.

pushpalroy commented 1 year ago

Thanks, @mori-atsushi. Is there any workaround for now, till there is no proper solution from Compose Multiplatform?

mori-atsushi commented 1 year ago

@pushpalroy Currently I don't know of any workaround. In iOS, it may be better to use the default behavior instead of using ime insets.