Our great sponsors
-
react-native-admob-native-ads
A simple and robust library for creating & displaying Admob Native Advanced Ads in your React Native App using Native Views.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
Google AdMob is an advertising service created to generate revenue for mobile app developers. Essentially preferred by advertisers with the possibility of mediation creation with different advertising sources and its dominance in the market. Thanks to its compatibility with different ad types and platforms, it’s also preferred by mobile application developers. \n' + ' In this article, we will learn step by step how to show Huawei Ads Kit ads on React Native using AdMob mediation. Make sure that you have successfully completed the mediation creation on AdMob for Huawei Ads before starting integration. \n' + ' [How to use Huawei Ads with AdMob mediation ?](https://medium.com/huawei-developers/how-to-use-huawei-ads-with-admob-mediation-377bdc1ba01c) \n' + ' First of all, we need an SDK to integrate AdMob into our React Native application. AdMob doesn’t provide official support for React Native. Instead of that, we will use open source third-party SDKs for integration. The SDKs we will use will be different according to the ad types we will display. \n' + ' > The SDKs that referenced are the ones for this article. If React-Native has another SDK (official or 3rd party) that supports AdMob, you can also use it. \n' + ' If you want to display **Banner** Ad, **Interstitial** Ad, or **Rewarded** Ad you can use the following SDK; \n' + ' > **react-native-admob** \n' + ' > [For GitHub repository](https://github.com/sbugert/react-native-admob) \n' + ' > [For installion guide](https://github.com/sbugert/react-native-admob#installation) \n' + ' If you want to display **Native** Ads you can use the following SDK; \n' + ' > **react-native-admob-native-ads** \n' + ' > [For GitHub repository](https://github.com/ammarahm-ed/react-native-admob-native-ads) \n' + ' > [For installion guide](https://ammarahm-ed.github.io/react-native-admob-native-ads/docs/installation-3/) \n' + ' Do not forget to **_link_ **SDKs for installing native dependencies. You can follow how this process is done from [here](https://reactnative.dev/docs/linking-libraries-ios#automatic-linking). \n' + ' If you have successfully completed the SDK integration by following the steps, you can display all AdMob ads you want on your React-Native project. You can use [test-IDs](https://developers.google.com/admob/android/test-ads#sample\_ad\_units) for this process. \n' + ' **AdMob Banner Ad** \n' + '[https://medium.com/media/e479da93180120653eec961f57d1ace7/href\](https://medium.com/media/e479da93180120653eec961f57d1ace7/href) **AdMob Interstitial Ad** \n' + '[https://medium.com/media/40a75892142a9bbd45a95a76f5261528/href\](https://medium.com/media/40a75892142a9bbd45a95a76f5261528/href) **Admob Rewarded Ad** \n' + '[https://medium.com/media/eb71cbcbe0c75ab961dc06ef291c3124/href\](https://medium.com/media/eb71cbcbe0c75ab961dc06ef291c3124/href) **AdMob Native Ad** \n' + '[https://medium.com/media/b5d74a6e266c1cd79e28d2323af3247c/href\](https://medium.com/media/b5d74a6e266c1cd79e28d2323af3247c/href) After successfully completed the integration steps of React-Native AdMob SDK and make sure that you can display all ad types, you can start the Huawei adapter integration. In order to do this, you need to open the native Android part of your React-Native project in Android Studio or such an application. \n' + ' The first step is to open your project-level build-gradle file of the Android side of the React-Native project and include the Huawei repository in your project. \n' + '[https://medium.com/media/ab10d9ca22b1a6d1d8e495a7c2a727ef/href\](https://medium.com/media/ab10d9ca22b1a6d1d8e495a7c2a727ef/href) After that open your app-level build-gradle and implement Huawei Ads Kit dependency and Huawei mediation adapter. \n' + '[https://medium.com/media/2758b5aaf0f5cb535ce83056a98abb3d/href\](https://medium.com/media/2758b5aaf0f5cb535ce83056a98abb3d/href) If you have successfully completed the dependency implementation steps, all you have to do is to display Huawei Ads. For more information regarding Huawei Ads, refer to the official documentation [here](https://developer.huawei.com/consumer/en/doc/HMSCore-Guides-V5/publisher-service-introduction-0000001070671805-V5). \n' + ' At the beginning of the article, we’ve used AdMob test IDs to show AdMob ads. Now we will display Huawei ads using our mediated Huawei ads IDs instead of AdMob test IDs. \n' + ' Replace adUnitIDs in code blocks with mediated Huawei IDs. An example of this is in the code blog below. \n' + '[https://medium.com/media/16b28e01306778bc7a84b5ec75213305/href\](https://medium.com/media/16b28e01306778bc7a84b5ec75213305/href) You can show Huawei ads by changing the adUnitID for all Banner, Interstitial, Rewarded, and Native Ad types. \n' + '
Google AdMob is an advertising service created to generate revenue for mobile app developers. Essentially preferred by advertisers with the possibility of mediation creation with different advertising sources and its dominance in the market. Thanks to its compatibility with different ad types and platforms, it’s also preferred by mobile application developers. \n' + ' In this article, we will learn step by step how to show Huawei Ads Kit ads on React Native using AdMob mediation. Make sure that you have successfully completed the mediation creation on AdMob for Huawei Ads before starting integration. \n' + ' [How to use Huawei Ads with AdMob mediation ?](https://medium.com/huawei-developers/how-to-use-huawei-ads-with-admob-mediation-377bdc1ba01c) \n' + ' First of all, we need an SDK to integrate AdMob into our React Native application. AdMob doesn’t provide official support for React Native. Instead of that, we will use open source third-party SDKs for integration. The SDKs we will use will be different according to the ad types we will display. \n' + ' > The SDKs that referenced are the ones for this article. If React-Native has another SDK (official or 3rd party) that supports AdMob, you can also use it. \n' + ' If you want to display **Banner** Ad, **Interstitial** Ad, or **Rewarded** Ad you can use the following SDK; \n' + ' > **react-native-admob** \n' + ' > [For GitHub repository](https://github.com/sbugert/react-native-admob) \n' + ' > [For installion guide](https://github.com/sbugert/react-native-admob#installation) \n' + ' If you want to display **Native** Ads you can use the following SDK; \n' + ' > **react-native-admob-native-ads** \n' + ' > [For GitHub repository](https://github.com/ammarahm-ed/react-native-admob-native-ads) \n' + ' > [For installion guide](https://ammarahm-ed.github.io/react-native-admob-native-ads/docs/installation-3/) \n' + ' Do not forget to **_link_ **SDKs for installing native dependencies. You can follow how this process is done from [here](https://reactnative.dev/docs/linking-libraries-ios#automatic-linking). \n' + ' If you have successfully completed the SDK integration by following the steps, you can display all AdMob ads you want on your React-Native project. You can use [test-IDs](https://developers.google.com/admob/android/test-ads#sample\_ad\_units) for this process. \n' + ' **AdMob Banner Ad** \n' + '[https://medium.com/media/e479da93180120653eec961f57d1ace7/href\](https://medium.com/media/e479da93180120653eec961f57d1ace7/href) **AdMob Interstitial Ad** \n' + '[https://medium.com/media/40a75892142a9bbd45a95a76f5261528/href\](https://medium.com/media/40a75892142a9bbd45a95a76f5261528/href) **Admob Rewarded Ad** \n' + '[https://medium.com/media/eb71cbcbe0c75ab961dc06ef291c3124/href\](https://medium.com/media/eb71cbcbe0c75ab961dc06ef291c3124/href) **AdMob Native Ad** \n' + '[https://medium.com/media/b5d74a6e266c1cd79e28d2323af3247c/href\](https://medium.com/media/b5d74a6e266c1cd79e28d2323af3247c/href) After successfully completed the integration steps of React-Native AdMob SDK and make sure that you can display all ad types, you can start the Huawei adapter integration. In order to do this, you need to open the native Android part of your React-Native project in Android Studio or such an application. \n' + ' The first step is to open your project-level build-gradle file of the Android side of the React-Native project and include the Huawei repository in your project. \n' + '[https://medium.com/media/ab10d9ca22b1a6d1d8e495a7c2a727ef/href\](https://medium.com/media/ab10d9ca22b1a6d1d8e495a7c2a727ef/href) After that open your app-level build-gradle and implement Huawei Ads Kit dependency and Huawei mediation adapter. \n' + '[https://medium.com/media/2758b5aaf0f5cb535ce83056a98abb3d/href\](https://medium.com/media/2758b5aaf0f5cb535ce83056a98abb3d/href) If you have successfully completed the dependency implementation steps, all you have to do is to display Huawei Ads. For more information regarding Huawei Ads, refer to the official documentation [here](https://developer.huawei.com/consumer/en/doc/HMSCore-Guides-V5/publisher-service-introduction-0000001070671805-V5). \n' + ' At the beginning of the article, we’ve used AdMob test IDs to show AdMob ads. Now we will display Huawei ads using our mediated Huawei ads IDs instead of AdMob test IDs. \n' + ' Replace adUnitIDs in code blocks with mediated Huawei IDs. An example of this is in the code blog below. \n' + '[https://medium.com/media/16b28e01306778bc7a84b5ec75213305/href\](https://medium.com/media/16b28e01306778bc7a84b5ec75213305/href) You can show Huawei ads by changing the adUnitID for all Banner, Interstitial, Rewarded, and Native Ad types. \n' + '
**Summary** \n' + ' In this article, we learned how to use the AdMob-Huawei mediation adapter in React Native applications. \n' + ' Thank you. \n' + ' **References** \n' + ' Huawei-AdMob mediation creation: \n' + ' [How to use Huawei Ads with AdMob mediation ?](https://medium.com/huawei-developers/how-to-use-huawei-ads-with-admob-mediation-377bdc1ba01c) \n' + ' How to use Huawei Ads with Google AdMob mediation: \n' + ' [How to use Huawei Ads with Google AdMob mediation (Banner Ads)](https://clho40.medium.com/how-to-use-huawei-ads-with-google-admob-mediation-banner-ads-5ff1791e750c) \n' + ' Huawei mediation adapter: \n' + ' [clho40/Mediation](https://github.com/clho40/Mediation) \n' + ' Huawei Ads Kit React Native: \n' + ' [Document](https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides-V1/introduction-0000001050196714-V1) \n' + ' * * * \n' + ' [How to use Huawei Ads with AdMob mediation (React Native)](https://medium.com/huawei-developers/how-to-use-huawei-ads-with-admob-mediation-react-native-e02a78ebb1eb) was originally published in [Huawei Developers](https://medium.com/huawei-developers) on Medium, where people are continuing the conversation by highlighting and responding to this story. \n'