How to deal with iOs keyboard overlapping entry when the page already has a scrollview in Xamarin Forms

Question

I am having a problem regarding the keyboard on iOS. I am developing a chat page on Xamarin, cross platform, and this page has a scrollView which make possible to the user to sc

Answer 1

I encountered the same problem while trying to implement a chat feature in our app. A solution is to use a custom renderer for the Entry, and adjust its margin when the keyboard event is triggered. I followed the pattern set in this post.

In this case, I embed my Entry into a ContentView, so I inherit from a ViewRenderer to adjust the ContentView. Depending on the situation, the Renderer you inherit from may vary. However, in most cases you should be able to reset the margin to the Keyboard's height.

using System;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using HBIClientFacingApp;
using HBIClientFacingApp.iOS;

[assembly:ExportRenderer( typeof(ChatViewWithEntry), typeof(ChatEntryRenderer))]
namespace YourNameSpace.iOS
{
    public class ChatEntryRenderer : ViewRenderer //Depending on your situation, you will need to inherit from a different renderer
    {
        public ChatEntryRenderer()
        {   
            UIKeyboard.Notifications.ObserveWillShow ((sender, args) => {

                if (Element != null)
                {
                    Element.Margin = new Thickness(0,0,0, args.FrameEnd.Height); //push the entry up to keyboard height when keyboard is activated
                }
            });

            UIKeyboard.Notifications.ObserveWillHide ((sender, args) => {

                if (Element != null)
                {
                       Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
                }

            }); 
        }

    }
}