title: Implementing Custom Webview in Xamarin Forms
body: <p>I'm new with <code>Xamarin.Forms</code> and I have implemented a custom web view renderer in <code>Droid</code> project.</p>
  <p>The issue is when implementing the renderer in <code>iOS</code> project, it's like the <code>Webview</code> is initialized without loading the CSS and Javascript. Because it only display <code>HTML</code> page without any functionality.</p>
  <p>After some research, I know we have to implement <code>WKWebviewRenderer</code> and we have to load the <code>LoadFileUrl</code> method in <code>iOS</code> but I still can't catch the url in the renderer.</p>
  <p>Anyone have an idea please about how to implement the following <code>Android Renderer</code> code into <code>iOS Renderer</code>??</p>
  <p><strong>Custom renderer in Droid project:</strong></p>
  <pre><code>[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyProject.Droid.WebViewRenderer))]
  namespace MyProject.Droid
  {
      public class WebViewRenderer : Xamarin.Forms.Platform.Android.WebViewRenderer
      {
          private bool isMyCustomWebview = false;
          public IWebViewController ElementController =&gt; Element;
  
          protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs&lt;Xamarin.Forms.WebView&gt; e)
          {
              base.OnElementChanged(e);
              if (e.NewElement.GetType() == typeof(MyCustomWebview))
              {
                  Control.SetWebViewClient(new Callback(this));
                  isMyCustomWebview = true;
              }
              else
              {
                  Control.SetWebViewClient(new Callback(Plugin.CurrentActivity.CrossCurrentActivity.Current.Activity));
                  isMyCustomWebview = false;
              }
          }
  
  
          public class Callback : WebViewClient
          {
              Activity _context;
              public Callback(Activity _context)
              {
                  this._context = _context;
              }
  
              WebViewRenderer _renderer;
  
              public Callback(WebViewRenderer renderer)
              {
                  _renderer = renderer ?? throw new ArgumentNullException(&quot;Renderer&quot;);
              }
  
              public override void OnPageStarted(Android.Webkit.WebView view, string url, Android.Graphics.Bitmap favicon)
              {
                  base.OnPageStarted(view, url, favicon);
                  if (_renderer != null &amp;&amp; _renderer.isMyCustomWebview)
                  {
                      DependencyService.Get&lt;ILoadingIndicator&gt;().Show();
                      var args = new WebNavigatingEventArgs(WebNavigationEvent.NewPage, new UrlWebViewSource { Url = url }, url);
                      _renderer.ElementController.SendNavigating(args);
                  }
  
              }
              public override void OnPageFinished(Android.Webkit.WebView view, string url)
              {
                  base.OnPageFinished(view, url);
                  if (_renderer != null &amp;&amp; _renderer.isMyCustomWebview)
                  {
                      DependencyService.Get&lt;ILoadingIndicator&gt;().Dismiss();
                      var source = new UrlWebViewSource { Url = url };
                      var args = new WebNavigatedEventArgs(WebNavigationEvent.NewPage, source, url, WebNavigationResult.Success);
                      _renderer.ElementController.SendNavigated(args);
                  }
              }
          }
      }
  }
  </code></pre>
  <p><strong>UPDATE: Custom renderer in iOS project:</strong></p>
  <pre><code>[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyProject.iOS.WebViewRenderer))]
  namespace MyProject.iOS
  {
      // Xamarin.Forms.Platform.iOS.WebViewRenderer
      public class WebViewRenderer : ViewRenderer&lt;WebView, WKWebView&gt;
      {
          WKWebView wkWebView;
  
          protected override void OnElementChanged(ElementChangedEventArgs&lt;WebView&gt; e)
          {
              base.OnElementChanged(e);
              if (Control != null) return;
              var config = new WKWebViewConfiguration();
              wkWebView = new WKWebView(Frame, config) { NavigationDelegate = new MyNavigationDelegate() };
              SetNativeControl(wkWebView);
          }
      }
  
      public class MyNavigationDelegate : WKNavigationDelegate
      {
          public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
          {
  
              //get url here
              var url = webView.Url;
  
              // webView.LoadFileUrl(url, url);
  
          }
      }
  }
  </code></pre>
  <p><strong>UPDATE:</strong></p>
  <p>Here's how I'm setting the source and base url for the webview in the portable project:</p>
  <pre><code>var result = await client.PostAsync(&quot;/embedded/pay&quot;, content);
  if (result.IsSuccessStatusCode)
  {
      var resp = await result.Content.ReadAsStringAsync();
      var html = new HtmlWebViewSource
      {
          Html = resp,
          BaseUrl = paymentGatewayUrl
      };
  
      //Adding Cookie
      CookieContainer cookies = new CookieContainer();
      var domain = new Uri(html.BaseUrl).Host;
      var cookie = new Cookie
      {
          Secure = true,
          Expired = false,
          HttpOnly = false,
          Name = &quot;cookie&quot;,
          Expires = DateTime.Now.AddDays(10),
          Domain = domain,
          Path = &quot;/&quot;
      };
      cookies.Add(new Uri(html.BaseUrl), cookie);
      webView.Source = html;
  }
  </code></pre>