React-Native custom Android UI Module: Implementing admob view

Question

After implementing the react-native UI module for Android, I could only see white space without the view on my screen.

My onAdLoaded listener did got fired. However it is only display white screen and not visible on my screen.

Here's some snippet of my code.

public class ReactAdMobManager extends SimpleViewManager<AdView> {

    private AdView mAdView;

    @ReactProp(name = "src")
    public void setSrc(AdView view, String src) {
        Log.d("ReactAdMobManager", "inside set src");
    }

    public static final String REACT_CLASS = "RCTAdMobView";

    @Override
    public String getName() {
        return REACT_CLASS;
    }


    @Override
    public AdView createViewInstance(ThemedReactContext context) {
        Log.d("ReactAdMobManager", "inside create view instance");
        mAdView = new AdView(context);
        mAdView.setAdSize(AdSize.FULL_BANNER);
        mAdView.setAdUnitId("xxxxx");

        mAdView.setAdListener(new AdListener() {
            @Override
            public void onAdLoaded() {
                Log.d("ReactAdMobManager", "ad loaded");
            }
        });

        // Create an ad request.
        AdRequest adRequest = new AdRequest.Builder().addTestDevice("50AC32B853DA4B3E64C3B10BC26D0380").build();
        //adRequest.
        mAdView.loadAd(adRequest);

        return mAdView;

    }

}

My react code AndroidAdmobView.js

var React = require('react-native');
var { requireNativeComponent } = React;


var AdmobView = React.createClass ({

  render() {
      return <RCTAdmob style={{flex:1, height:50}}/>; 
  }
})

AdmobView.propTypes = {
  src: React.PropTypes.string
};

var RCTAdmob = requireNativeComponent('RCTAdMobView', AdmobView);

module.exports = AdmobView;

Usage

var AdView = require('./AndroidAdmobView')
<AdView style={{height:50}} src="foo" />

Answer 1

hi I know it's a bit old and maybe not really the same as I had but this could help you.

I was trying to implement a Google DFP Plugin within a RN Component on Android. I nearly tried everything and it didn't work. At the end I found out the Ad only shows up when I set the height of the View. When the View is set to the exact width and height like the ad, my plugin worked like a charm. The Problem now is I don't want to set the height and width hardcoded because sometimes there will be a request but no ad will be shown. Maybe you don't have a network connection or not all of your channels are filled with banners. So I came up with the idea of setting the size of the AdView to 0 and on the native java side I attach a listener to the onAdLoaded method. On the JS side you also need a listener witch gets called when the Ad is loaded and in this JS listener you can set the height of the Plugin to the desired size.

I know it's not really the best solution, but in my case it worked and as long as nobody has another solution and share's the solution with me, I'm happy that my way worked. Below my Plugin Code:

NativeAdView.java

package com.YOURPACKAGE.ch.CustomModules;

import android.graphics.Color;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.View;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.events.RCTEventEmitter;
import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.doubleclick.PublisherAdRequest;
import com.google.android.gms.ads.doubleclick.PublisherAdView;

    public class NativeAdView extends SimpleViewManager<View> {

    public static final String REACT_CLASS = "NativeAdView";

    private PublisherAdView adView;
    private ThemedReactContext mContext = null;

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    public View createViewInstance(final ThemedReactContext context) {

        mContext = context;
        adView = new PublisherAdView(context);

        adView.setAdListener(new AdListener() {
            public void onAdLoaded() {
                WritableMap eventData = Arguments.createMap();
                ReactContext reactContext = (ReactContext) context;
                reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                        .emit("YouCustomEventName", eventData);
            }
        });

        return adView;

    }

    @ReactProp(name = "adUnitId")
    public void setAdUnitId(View view, @Nullable String adUnitId) {

        PublisherAdRequest adRequest = new PublisherAdRequest.Builder().build();
        AdSize customAdSize = new AdSize(300, 250);
        adView.setAdUnitId(adUnitId);
        adView.setAdSizes(customAdSize);

        adView.loadAd(adRequest);

    }



    public void onAdFailedToLoad(int errorCode) {

    }
}

AdView.android.js

'use strict';

import React, { PropTypes } from 'react';

import {
    requireNativeComponent,
    View,
    Text,
    DeviceEventEmitter,
    Dimensions,
    LayoutAnimation
} from 'react-native';

let params = {
    name: 'NativeAdView',
    propTypes: {
        ...View.propTypes,
        ...Text.propTypes,
        adUnitId: PropTypes.string
    },
};

let NativeAdView = requireNativeComponent('NativeAdView', params);

let window = Dimensions.get('window');

class AdView extends React.Component {

    constructor() {
        super();

        this.state = {
            adHeight: 0,
            adWidth: 0
        };
    }

    componentWillMount() {
        let self = this;
        this._adListener = DeviceEventEmitter.addListener('YouCustomEventName', function(e) {
            console.log(e);
            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
            let adSize = JSON.parse(self.props.row.params.format);
            self.setState({
                adHeight: adSize[1],
                adWidth: adSize[0]
            });         
        });
    }

    componentWillUnmount() {
        this._adListener.remove();
    }

    render() {

        if(this.props.row.params) {

            let adSize = JSON.parse(this.props.row.params.format);

            let margin;
            let height;
            let width;
            let adWidth;
            let adHeight;
            let adText;
            if(this.state.adWidth > 0 && this.state.adHeight > 0) {
                margin = 30;
                height = this.state.adHeight + 60;
                width = window.width;
                adHeight = this.state.adHeight;
                adWidth = this.state.adWidth;
                adText = (
                    <View style={{marginLeft: adWidth-45}}>
                        <Text style={{color: 'lightgray', fontSize: 10}}>Anzeige</Text>
                    </View>
                );
            } else {
                margin = 0;
                height = 0;
                width = 0;
                adHeight = 0;
                adWidth = 0;
            }

            return(
                <View style={{justifyContent: 'center', alignItems: 'center', height: height, width: width, marginTop: margin}}>
                    {adText}
                    <NativeAdView 
                        style={{height: adHeight, width: adWidth, marginLeft: margin, marginRight: margin, marginBottom: margin}}
                        adUnitId={this.props.row.params.name} />
                </View>
            );
        } else {
            return <View />;            
        }
    }
}

module.exports = AdView;

Maybe someone has another, better solution for this. This should be a help for anyone who is as desperate as I was when I tried this :)