Fullscreen in Hybrid
Our goal with the hybrid integration is to allow you to use your own web views to render any content you want, but also to:
- Enhance the user’s experience as far as is possible within a web view.
- Not touch your web view’s presentation or location in the view hierarchy.
- Not mess with your web view’s delegates, clients, or any other property.
To do this, we require a small amount of integration work from your part. This insures that when the user interacts with your web views, they’ll have the best possible user experience.
As on desktop, Klarna’s components may sometimes display dialogs and other fullscreen content. On mobile, this translates to covering the entire web view. Klarna sometimes presents content that requires the users full attention, which the user must either explicitly interact with (or dismiss) to continue.
However, in many applications that embed web views, these web views are not in a fullscreen presentation. The web view may only take up part of the screen, or there may be a tab or navigation bars above and below. This could allow a user to navigate away or preform conflicting actions.
To address this, we expose four events that allow you to move your web view to a fullscreen presentation in the way that is most suitable for your app.
We expose four events that you will be notified of. These events load web content so we don’t offer durations between each event.
The Four Events
Will Show Fullscreen
This means that a Klarna component in your web view will show content that needs a full-screen presentation. This will overlay the entire web view.
The Klarna component will, after this event, show a loader while it’s loading content to present in fullscreen.
Did Show Fullscreen
This means that a Klarna component in your web view has dismissed the loader and is now displaying content in fullscreen over your entire web view.
Will Hide Fullscreen
This means that a Klarna component in your web view will dismiss the fullscreen content its presenting.
Did Hide Fullscreen
This means that a Klarna component is now in its original presentation state. Only taking up its initial space in the web view.
When you’re done performing any transitions or animations, you’ll need to call a completion callback that is provided to you in your listener. This lets the transitioning Klarna component know that your app is ready to continue.
We outline two possible approches to handling fullscreen events below.
The Easier Approach
1. On Will Show Fullscreen
You can put your web view in a view controller (or dialog) that you present modally on the
will show fullscreen event.
2. On Will Hide Fullscreen
You can then restore the web view to its original location on the
will hide fullscreen event
and dismiss the full-screen.
A More Complete Approach
The above integration might risk showing a brief flash as the web view is removed from its place and added to its new location.
Similarly: if you restore the web view to its place before the full-screen view animates out, it will go blank until it animates out; if you restore the web view after it animates out, the web view’s original location will display the brief flash instead.
1. On Will Show Fullscreen
Replace the web view with a screenshot of it on
will show fullscreen. This way, when the web
view is moved, there wont be a blank space where it stood before.
2. On Did Show Fullscreen
You can put the web view in a fullscreen view controller (or dialog) and animate it in on
did show fullscreen. This way, the content in the web view is already the fullscreen
content when it animates in.
3. On Will Hide Fullscreen
As with will show, you can replace the content in the fullscreen view controller with a screenshot
will hide fullscreen. You can restore the web view to its original place and remove the
the first web view screen shot at this point.
4. On Did Hide Fullscreen
Finally, you can dismiss the fullscreen view controller/dialog on
did hide fullscreen.