👩💻How to Use Huawei Ads Kit in React Native with Example App ?
Hello developers,
In this article we will learn how to use the native type of Ads Kit. An example of this use case scenario is we will show a native ad after every three images on the Instagram homepage. Let’s start.
Huawei Ads Service Introduction
Ads Kit leverages the vast user base of Huawei devices and Huawei’s extensive data capabilities to provide you with the Publisher Service, helping you monetize traffic. Meanwhile, it provides the advertising service for advertisers to deliver personalized campaigns or commercial ads to Huawei device users.
Native Ads
Native ads fit seamlessly into the surrounding content to match your app design. Such ads can be customized as needed. You can learn more information and detail from official native ads kit document.
The table below shows the dedicated ad slot IDs for the native ad test, you can use the id you want for the test. In the example, we will use large image and video media type.
Ads Kit
After the registration process is completed on HUAWEI Developers, we can create a new React Native project, configure and integrate it with the Huawei Ads kit. You can continue according to the steps specified in the official document. Let’s start our application.
First of all, we need 3 state variables. ‘page’ variable will be used incrementally to pull the next data as we scroll down the page. ‘posts’ variable will host posts and ‘loading’ variable, will show and hide the activityIndicator component when we make requests.
In the componentDidMount lifecycle, make requests. “https://randomuser.me/api/?results=10&page=1" is a link that returns random people.
We create component for native ad. This component has one props. This will determine the type of props ad in.
By default, the divider is assigned to the itemBottom variable. We assign the itemBottom variable after every three images we add ads using our native component. When using the native component, then set the type of native ads to be large image if the index is an even number, and video if it is an odd number and the set the FlatList component to make a request when the scroll view is scrolling down.
Conclusion
I tried to explain Native ads as simply and clearly as possible with an example application. For source codes, you can visit the repository.
