React Native android banner

React Native
1

I try to develop yandex banner for android. For example I use ready code for react native admob. I install reactnativeyandexads, but there only full window ads. So I try to develop for my own code. I add Toast to listener OnLoad, and its works banner is loading, but not display. I think it’s related with ReactViewGroup size, or somthing else. It’s my first own component.

my code

 > package ru.mtt.reactnativeyandexads

import android.widget.Toast
import com.facebook.react.bridge.Arguments
import com.facebook.react.bridge.WritableMap
import com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter
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.facebook.react.views.view.ReactViewGroup
import com.yandex.mobile.ads.banner.AdSize
import com.yandex.mobile.ads.banner.BannerAdEventListener
import com.yandex.mobile.ads.banner.BannerAdView
import com.yandex.mobile.ads.common.AdRequest
import com.yandex.mobile.ads.common.AdRequestError

class YandexAdsBannerView : SimpleViewManager<ReactViewGroup>() {
    override fun getName(): String {
        return REACT_CLASS
    }

    private var mThemedReactContext: ThemedReactContext? = null
    private var mView: ReactViewGroup? = null
    private var mEventEmitter: RCTEventEmitter? = null

    private fun sendEvent(eventName: String, params: WritableMap) {
        mThemedReactContext
                ?.getJSModule(RCTDeviceEventEmitter::class.java)
                ?.emit(eventName, params)
    }

    private fun buildEventParams(type: String, adId: String? = null): WritableMap {
        val params = Arguments.createMap()
        params.putString("type", type)
        params.putString("adId", adId)
        return params
    }


    @ReactProp(name = "newId")
//    @ReactPropGroup(names = {"newId","bannerSize"})
    fun setBlockId(view: ReactViewGroup, newId: String) {

        val adSize = AdSize.stickySize(AdSize.FULL_WIDTH);/* AdSize.BANNER_320x50 */

        attachNewAdView(view)
        val newAdView = view.getChildAt(0) as BannerAdView
        newAdView.setBlockId(newId)
        newAdView.setAdSize(adSize)

        val adRequest = AdRequest.Builder().build()
        newAdView.loadAd(adRequest)

        Toast.makeText(mThemedReactContext, "this is toast message = " + newId, Toast.LENGTH_SHORT).show()
    }

    // create view
    override fun createViewInstance(reactContext: ThemedReactContext): ReactViewGroup {
        mThemedReactContext = reactContext;
        mEventEmitter = reactContext.getJSModule(RCTEventEmitter::class.java)
        mView = ReactViewGroup(reactContext)
        attachNewAdView(mView!!)

        return mView!!
    }

    protected fun attachNewAdView(view: ReactViewGroup) {
        val adView = BannerAdView(mThemedReactContext!!)

        // destroy old AdView if present
        try {
            val oldAdView = view.getChildAt(0) as? BannerAdView
            view.removeAllViews()
            oldAdView?.destroy()
        }catch (e: NumberFormatException){}
        view.addView(adView)
        attachEvents(view)
    }

    protected fun attachEvents(view: ReactViewGroup) {
        val adView = view.getChildAt(0) as BannerAdView
        adView.setBannerAdEventListener(object : BannerAdEventListener {
            override fun onAdLoaded() {
//                mEventEmitter!!.receiveEvent(view.id, "onAdLoaded", null)
                Toast.makeText(mThemedReactContext, "onAdLoaded =" + view.getChildCount(), Toast.LENGTH_SHORT).show()
            }

            override fun onLeftApplication() {
//                mEventEmitter!!.receiveEvent(view.id, "onLeftApplication", null)
            }

            override fun onReturnedToApplication() {
//                mEventEmitter!!.receiveEvent(view.id, "onReturnedToApplication", null)
            }

            override fun onAdFailedToLoad(error: AdRequestError) {
//                mEventEmitter!!.receiveEvent(view.id, "onAdFailedToLoad", null)
            }
        });
    }



    companion object {
        private const val REACT_CLASS = "MyYandexAdsBanner"
    }
}

then package

    > package ru.mtt.reactnativeyandexads

import java.util.Arrays

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

class YandexAdsPackage : ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        return Arrays.asList<NativeModule>(YandexAdsModule(reactContext))
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return Arrays.asList(YandexAdsBannerView())
    }
}

and my js class

>     import React from 'react';

    import {
      NativeModules,
      requireNativeComponent,
      View,
      NativeEventEmitter,
    } from 'react-native';

    const RNBanner = requireNativeComponent('MyYandexAdsBanner');

    export default class YandexBanner extends React.Component {

      constructor() {
        super();
        this.state = {
          style: {},
        };
      }

      render() {
        const { newId, bannerSize, style } = this.props;
        return (
          <View style={this.props.style}>
            <RNBanner
              style={this.state.style}
              newId={newId}/>
          </View>
        );
      }
    }

invoke of banner

`

<YandexBanner style={{height: 100, width: ScreenWidth}} collapsable={false} newId=‘R-M-DEMO-300x250’/>

`