Xamarin Forms 101: How to fix keyboard overlapping or covering entry in iOS

Are you working on an entry or form inside your Xamarin iOS project?

Are you having a problem with your UI because the keyboard is overlapping your entry?

In this post, you will see how easy it is to fix the keyboard-overlapping issue on your iOS project.

 

In Android, you will not encounter the keyboard-sliding up issue because by default the UI moves up when the keyboard appears on your screen. This is not the case with iOS.

In iOS, you have to manually fix the overlapping keyboard whether it is Xamarin.iOS, Xamarin Forms, or even iOS on the XCode.

If Cocoapod library in Swift has IQKeyboardManager, a codeless drop-in universal library that allows prevents issues of keyboard sliding up and cover UITextField/UITextView, Xamarin has a Nuget package that solves this problem. It is called Xam.Plugins.Forms.KeyboardOverlap

Here’s how to use it.

 

Step 1:

The first step is to right-click on your iOS project. Then go to Manage NuGet Packages.

 

Step 2:

On the browse tab, type keyboardoverlap. Look for Xam.Plugins.Forms.KeyboardOverlap by Paul Patarinski.

 

Step 3:

Install the KeyboardOverlap Nuget package on your iOS project.

 

Step 4:

Call KeyboardOverlapRenderer.Init() on your iOS project only by going to your AppDelegate class and then writing the KeyboardOverlapRenderer.Init() under the LoadApplication method line and above the FinishedLaunching method line.

 

 

Step 5:

Build and deploy your project without the KeyboardOverlapRenderer and with KeyboardOverlapRenderer’s help.

You can see on the 2nd screenshot that the keyboard slides up covering the entry view.

While on the 3rd screenshot, the Nuget package fixes the issue by automatically moving up the entry view along with the keyboard.

 

 

To sum up, Android does not have keyboard-sliding up issue out of the box, whereas iOS has it by default. To fix the problem, install Xam.Plugins.Forms.KeyboardOverlap in your iOS project. As simple as that.

Here’s the GitHub URL of this demo. https://github.com/webmasterdevlin/KeyboardOverlapDemo

Happy coding!



2 Comments

  • Ich

    Hi Devlin,
    thanks for the post. Just one question: The plugin just moves the whole page up. Is it possible to keep a header at the top so that the user still sees to which user / message / topic the user is responding to?
    Many thanks!

    • Devlin

      You’re welcome, Ich. I’m not sure if Absolute Layout can fix it. However, you shouldn’t worry about the UX because the user’s focus is on the entry. Once the user pressed a different view or hit the hardware button (Android), the page will back to its normal layout.