How to use Huawei Ads with MoPub mediation (React Native)

İsmail Emre Bayırlı
Huawei Developers
Published in
4 min readMar 9, 2021

In this article, we will talk about how to obtain Huawei ads in MoPub in React Native applications. Make sure you have successfully completed the Huawei -MoPub mediation creation part before starting the integration.

We will need the MoPub React Native SDK to integrate MoPub into our app. But there is no official React Native SDK for MoPub, therefore third party SDKs has been used in the article.

react-native-mopub-sdk will be used for integration MoPub into React Native. You can use another SDK or create your own SDK for integration.

Add MoPub React Native SDK mentioned above to your project. You can use sample codes in here to make sure integration is okay. After integration run project. Your project should look like this; (You can use test ad IDs to make sure the integration is successful)

When you clicked “load ad” button interstitial ad will open.

Rewarded ads will not work on either MoPub or Huawei in this SDK. But with some changes we will solve this problem. We will come to that later.

After you have successfully started the app, you must open the native android project on Android Studio.

Open your project-level gradle file and include Huawei’s maven repository;

Then open your app-level build gradle, include Huawei Ads dependency (required by the adapter) and the Huawei mediation adapter;

If your app can run only on Huawei mobile phones, you can integrate the Huawei Ads Lite SDK (Optional)

After successfully adding the Huawei Ads Kit and Huawei mediation adapter to your local project, the remaining steps are very easy.

We used test ad unit IDs at the beginning of the integration. Now replace the ad unit IDs with the ad unit ids after the Huawei-MoPub mediation.

After id changes ads will replace to Huawei ads.

Huawei Interstitial Ad

Note: Since there is no official React Native MoPub SDK, some ad types will not work after adapter integration. Only interstitials will work in this React Native MoPub SDK. If you want to use another SDK for React Native MoPub integration, other ad types can run successfully after mediation adapter integration.

You can use Huawei Ads Kit React Native SDK for Banner and Native ads.

For Rewarded Ads:

When we try to use Rewarded ads in this SDK that we used to React Native MoPub integration, we will encounter “No reward found” error for Rewarded ads. If you look at the React Native MoPub SDK, you’ll notice that this error is not coming from MoPub Android SDK. Which means we can solve this problem with some changes.

Open your native android project in Android Studio. Go to react-native-mopub-sdk > find and open RNMoPubRewardedVideo class.

We will change the presentRewardedVideoAdForAdUnitID function as above. In this function, the SDK sends an error that is not included in the official React Native Android SDK. We don’t need extra control.

After these changes, the rewarded ads will be shown on the MoPub side and on the Huawei Side.

Huawei Rewarded Ad
MoPub Rewarded Ad

Summary

In this article, we learned how to use MoPub-Huawei mediation adapter in React Native. Even if you use MoPub or other Mobile Ad Networks, you can increase your revenue by using Huawei Ads in your app. Thank you.

References

Huawei-MoPub mediation creation:

Huawei mediation adapter:

Huawei Ads Kit React Native:

react-native-mopub-sdk:

--

--