Google IMA webview is not showing when used inside react native on android

[Tom Brinkkemper]

Google IMA webview is not showing when used inside react native on android

I've asked this qustion on Stack overflow that sums up the issue.

Hopefully someone can point me in the right directing to tackle this issue.

I know react-native is not a supported platform, but android is, and in the end we're running a native android app :).

If required/picked up I can share the project to reproduce the issue.

In short: We use reacte native on android and use the native VideoView to show videos with ads using the Google IMA SDK for android. The video plays, the ads play, but the Webview containing "read more" and "skip ad" is not added to the view hierarchy. When I use the exact same code in a native app. Everything works.

Some more context:

• The video player / google ima sdk integration is copied straight from the google ima example app.
  
• When the component is placed in a native anroid app everything works fine.
  
• The logcat output of the react-native app does show logs coming from chromium, leading my to believe the webview is instantiated (see logs below)
  

02-01 17:15:30.742 20258-20258/com.videoplayer I/chromium: [INFO:CONSOLE(741)] " [ 53.222s] [ima.vast.VideoAdEventTracker] dispatching event firstquartile", source: https://imasdk.googleapis.com/native/core/3.44.0/native_bridge_debug__nl.js (741)
02-01 17:15:30.745 20258-20258/com.videoplayer I/SDK_LOG:ima.vast.VideoAdEventTracker: dispatching event firstquartile
02-01 17:15:30.762 20258-20258/com.videoplayer I/chromium: [INFO:CONSOLE(741)] " [ 53.241s] [ima.vast.VastAdServerReporter] Reporting urls for event : firstquartile", source: https://imasdk.googleapis.com/native/core/3.44.0/native_bridge_debug__nl.js (741)
02-01 17:15:30.764 20258-20258/com.videoplayer I/chromium: [INFO:CONSOLE(741)] " [ 53.243s] [ima.vast.VastAdServerReporter] Pinging reporting URL: https://pubads.g.doubleclick.net/pagead/conversion/?ai=BodGfHD1zWuSp...shortend....3D33%26pngs%3D9,14,15s&gv=atos%3D0,0,0,0,0%26amtos%3D0,0,0,0,0%26avt%3D0%26davs%3D0%26dafvs%3D0%26ss%3D1%26t%3D1517501725661&sdkv=h.3.44.0%2Fn.android.3.7.4%2Fcom.videoplayer", source: https://imasdk.googleapis.com/native/core/3.44.0/native_bridge_debug__nl.js (741)
02-01 17:15:30.765 20258-20258/com.videoplayer I/chromium: [INFO:CONSOLE(741)] " [ 53.243s] [ima.vast.VastAdServerReporter] Pinging reporting URL: https://pubads.g.doubleclick.net/pagead/conversion/?ai=B2oRCHD1zWu7CE4_Og...shortend....%26ss%3D1%26t%3D1517501725661&sdkv=h.3.44.0%2Fn.android.3.7.4%2Fcom.videoplayer", source: https://imasdk.googleapis.com/native/core/3.44.0/native_bridge_debug__nl.js (741)

• When inspecting the view it's clear the webview is not added to the view-hierarchy. 

 

 

• When adding a native webview inside the android component instead of the video component, the webview is rended perfectly. nb: That is react-native including the native android component that is adding a webview ;)
  

Relevant code from the React Native component:

@SuppressLint("ViewConstructor")
public class ReactVideoViewWithAds extends FrameLayout implements
    LifecycleEventListener {

private VideoPlayerWithAdPlayback mVideoPlayerWithAdPlayback;
private RelativeLayout mCompanionAdSlot;
private VideoPlayerController mVideoPlayerController;

public ReactVideoViewWithAds(ThemedReactContext themedReactContext) {
    super(themedReactContext);
    createViews();
    themedReactContext.addLifecycleEventListener(this);
}

private void createViews() {

    FrameLayout.LayoutParams companionAdLayoutParams = new FrameLayout.LayoutParams(
            FrameLayout.LayoutParams.MATCH_PARENT,
            (int) (50 * getResources().getSystem().getDisplayMetrics().density));
    companionAdLayoutParams.gravity = Gravity.CENTER_HORIZONTAL;
    mCompanionAdSlot = new RelativeLayout(getContext());
    mCompanionAdSlot.setBackgroundColor(Color.BLUE);
    addView(mCompanionAdSlot, companionAdLayoutParams);

    //player with ad playback
    FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
            FrameLayout.LayoutParams.MATCH_PARENT,
            FrameLayout.LayoutParams.MATCH_PARENT);
    mVideoPlayerWithAdPlayback = new VideoPlayerWithAdPlayback(getContext());
    addView(mVideoPlayerWithAdPlayback, layoutParams);


    initPlayer();
}

private void initPlayer() {
    mVideoPlayerController = new VideoPlayerController(
            getContext(),
            mVideoPlayerWithAdPlayback,
            null,
            null,
            "nl",
            mCompanionAdSlot,
            null);
}

[ima-sdk-adv...@google.com]

Hi Tom,

Thank you for reaching out to support. I appreciate that you took the time to create such a detailed write-up. However, as we do not support the platform, our team won't able to provide guidance on working with React Native. I would suggest looking for support somewhere that is React focused. That being said, even if you get this 'working', our team won't be able to guarantee consistent behavior.

Regards,

Chris Feldman

IMA SDK Team

[Tom Brinkkemper]

He Chris, Thanks for the quike reply.

In order to try and experiment a bit more, I'm looking for the source code of/or information about the part of the IMA Android SDK that creates the webview containing al the ad-related interactions.

Unfortunatly the sdk is not opensource and it's a complete black box.

Could you perhaps share some information as to how the SKD creates this webview?
perhaps that could lead me to understand why it's not visible in a react-native inviorment,

which could then help me get in touch with react-native developers to maybe solve it.

Hope this is possible!

Tom

Op donderdag 1 februari 2018 19:49:24 UTC+1 schreef ima-sdk-adv...@google.com:

[ima-sdk-adv...@google.com]

Hi Tom,

I'm not able to comment on the inner workings of our SDK. Also, I don't have enough familiarity with React Native to speculate on what might be happening.

Regards,

Chris Feldman
IMA SDK Team

=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~
Also find us on our blog and Google+ page:
    http://googleadsdeveloper.blogspot.com
    https://plus.google.com/115658573333388777174/
=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~

--
You received this message because you are subscribed to the Google Groups "Interactive Media Ads SDK" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ima-sdk+unsubscribe@googlegroups.com.
To post to this group, send email to ima...@googlegroups.com.
Visit this group at https://groups.google.com/group/ima-sdk.
For more options, visit https://groups.google.com/d/optout.