Native Ad

Integrate native ads

Usage

First import RNAatkit and another native ads components (some of them might not be needed, depending on networks providing ads to your app)

Some ad networks require separate packages for native ads. See the Setup page for details.

import {
    RNAatkit,
    RNAatkitUnifiedNativeAd,
    GenericNativeAdView,
    TitleView,
    DescriptionView,
    ImageView,
    IconView,
    CallToActionView,
    GoogleUnifiedNativeAdView,
    GoogleImageView
} from '@addapptr/react-native-aatkit'
import {
    FacebookImageView,
    FacebookIconView,
    FacebookNativeAdView
} from '@addapptr/react-native-aatkit-facebook-ads';
import {
    HuaweiImageView,
    HuaweiUnifiedNativeAdView
}
from '@addapptr/react-native-aatkit-huawei';

Add RNAatkitUnifiedNativeAd as root component of native ad. Set placement name using name property. AATKit will automatically create new placement when RNAatkitUnifiedNativeAd is created. Depending on networks providing native ads to your app, put GenericNativeAdView, GoogleUnifiedNativeAdView and/or FacebookNativeAdView components under RNAatkitUnifiedNativeAd. These components should be parents of native ads layouts.

<RNAatkitUnifiedNativeAd name="unifiedNativeAd" style={styles.nativeAd}>

    <GoogleUnifiedNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by Google network.
    </GoogleUnifiedNativeAdView>

    <FacebookNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by Facebook network.
    </FacebookNativeAdView>

    <HuaweiUnifiedNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by Huawei network.
    </HuaweiUnifiedNativeAdView>

    <GenericNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by other networks.
    </GenericNativeAdView>

</RNAatkitUnifiedNativeAd>

Google native ads

Prepare layout for native ads provided by Google network. Use TitleView, DescriptionView, GoogleImageView, IconView, CallToActionView and every UI components you like. All these elements should be children of GoogleUnifiedNativeAdView, example:

<GoogleUnifiedNativeAdView style={styles.nativeAd}>
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <TitleView style={{color:"red"}} />
        <IconView style={{width: 20, height: 20}} />
    </View>
    <GoogleImageView style={{width: 320, height: 166}} />
    <DescriptionView />
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <Text>
            Sponsored
        </Text>
        <View style={{backgroundColor:"blue"}}>
            <CallToActionView style={{color:"white"}} />
        </View>
    </View>
</GoogleUnifiedNativeAdView>

Facebook native ads

To enable Facebook native ads, install the @addapptr/react-native-aatkit-facebook-ads package. See the Setup page for details.

Prepare layout for native ads provided by Facebook network. Use TitleView, DescriptionView, FacebookImageView, FacebookIconView, CallToActionView and every UI components you like. All these elements should be children of FacebookNativeAdView, example:

<FacebookNativeAdView style={styles.nativeAd}>
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <TitleView style={{color:"red"}} />
        <FacebookIconView style={{width: 20, height: 20}} />
    </View>
    <FacebookImageView style={{width: 320, height: 166}} />
    <DescriptionView />
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <Text>
            Sponsored
        </Text>
        <View style={{backgroundColor:"blue"}}>
            <CallToActionView style={{color:"white"}} />
        </View>
    </View>
</FacebookNativeAdView>

Huawei native ads

To enable Huawei native ads, install the @addapptr/react-native-aatkit-huawei package. See the Setup page for details.

Prepare layout for native ads provided by Huawei network. Use TitleView, DescriptionView, HuaweiImageView, IconView, CallToActionView and every UI components you like. All these elements should be children of HuaweiUnifiedNativeAdView, example:

<HuaweiUnifiedNativeAdView style={styles.nativeAd}>
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <TitleView style={{color:"red"}} />
        <IconView style={{width: 20, height: 20}} />
    </View>
    <HuaweiImageView style={{width: 320, height: 166}} />
    <DescriptionView />
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <Text>
            Sponsored
        </Text>
        <View style={{backgroundColor:"blue"}}>
            <CallToActionView style={{color:"white"}} />
        </View>
    </View>
</HuaweiUnifiedNativeAdView>

Generic native ads

Prepare layout for native ads provided by other networks. Use TitleView, DescriptionView, ImageView, IconView, CallToActionView and every UI components you like. All these elements should be children of GenericNativeAdView, example:

<GenericNativeAdView style={styles.nativeAd}>
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <TitleView style={{color:"red"}} />
        <IconView style={{width: 20, height: 20}} />
    </View>
    <ImageView style={{width: 320, height: 166}} />
    <DescriptionView />
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <Text>
            Sponsored
        </Text>
        <View style={{backgroundColor:"blue"}}>
            <CallToActionView style={{color:"white"}} />
        </View>
    </View>
</GenericNativeAdView>

Special requirements

When preparing layouts, please keep in mind some ad networks have special requirements on how they should look. If your app gets native ads from Google, Facebook and other networks, finally you might end up with RNAatkitUnifiedNativeAd containing child elements like:

<RNAatkitUnifiedNativeAd name="unifiedNativeAd" style={styles.nativeAd}>

    <GoogleUnifiedNativeAdView style={styles.nativeAd}>
        <View style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-around',
        }}>
            <TitleView style={{color:"red"}} />
            <IconView style={{width: 20, height: 20}} />
        </View>
        <GoogleImageView style={{width: 320, height: 166}} />
        <DescriptionView />
        <View style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-around',
        }}>
            <Text>
                Sponsored
            </Text>
            <View style={{backgroundColor:"blue"}}>
                <CallToActionView style={{color:"white"}} />
            </View>
        </View>
    </GoogleUnifiedNativeAdView>

    <FacebookNativeAdView style={styles.nativeAd}>
        <View style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-around',
        }}>
            <TitleView style={{color:"red"}} />
            <FacebookIconView style={{width: 20, height: 20}} />
        </View>
        <FacebookImageView style={{width: 320, height: 166}} />
        <DescriptionView />
        <View style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-around',
        }}>
            <Text>
                Sponsored
            </Text>
            <View style={{backgroundColor:"blue"}}>
                <CallToActionView style={{color:"white"}} />
            </View>
        </View>
    </FacebookNativeAdView>

    <HuaweiUnifiedNativeAdView style={styles.nativeAd}>
        <View style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-around',
        }}>
            <TitleView style={{color:"red"}} />
            <IconView style={{width: 20, height: 20}} />
        </View>
        <HuaweiImageView style={{width: 320, height: 166}} />
        <DescriptionView />
        <View style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-around',
        }}>
            <Text>
                Sponsored
            </Text>
            <View style={{backgroundColor:"blue"}}>
                <CallToActionView style={{color:"white"}} />
            </View>
        </View>
    </HuaweiUnifiedNativeAdView>

<GenericNativeAdView style={styles.nativeAd}>
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <TitleView style={{color:"red"}} />
        <IconView style={{width: 20, height: 20}} />
    </View>
    <ImageView style={{width: 320, height: 166}} />
    <DescriptionView />
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <Text>
            Sponsored
        </Text>
        <View style={{backgroundColor:"blue"}}>
            <CallToActionView style={{color:"white"}} />
        </View>
    </View>
</GenericNativeAdView>

</RNAatkitUnifiedNativeAd>

Load native ad

Native ads can't be auto-loaded, so you need to manage loading using reloadPlacement function.

RNAatkit.reloadPlacement("unifiedNativeAd",  (placementReloaded) => {
    console.log("placementReloaded " + placementReloaded);
});

Also you can set reloadOnStart to let AATKit load native ad once it's created and attached to the UI:

<RNAatkitUnifiedNativeAd
    name="NativeAd"
    reloadOnStart={true}>

    ...

</RNAatkitUnifiedNativeAd>

Show native ad

When native ad is loaded, you can use showUnifiedNativeAdPlacement function to load and present data of the native ad. RNAatkitUnifiedNativeAd will automatically decide which layout should be visible, depending on the network providing native ad.

RNAatkit.showUnifiedNativeAdPlacement("unifiedNativeAd");

Show test data

You can show test for specific layout without loading native ad from the server. To achieve this, set showTestDataForLayout attribute.

<RNAatkitUnifiedNativeAd name="unifiedNativeAd" showTestDataForLayout={RNAatkitUnifiedNativeAd.googleLayout} style={styles.nativeAd} >

    <GoogleUnifiedNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by Google network.
    </GoogleUnifiedNativeAdView>

    <FacebookNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by Facebook network.
    </FacebookNativeAdView>

    <HuaweiUnifiedNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by Huawei network.
    </HuaweiUnifiedNativeAdView>

    <GenericNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by other networks.
    </GenericNativeAdView>

</RNAatkitUnifiedNativeAd>

Set custom test data

If you are setting showTestDataForLayout attribute, default test data are presented. However, you can set your own test data of the native ad by testData attribute.

<RNAatkitUnifiedNativeAd 
    name="unifiedNativeAd" 
    showTestDataForLayout={RNAatkitUnifiedNativeAd.genericLayout} 
    testData={
        {
            title: "Your custom title",
            description: "Your custom description of the native ad.",
            imageUrl: "main_image_url",
            iconUrl: "icon_url",
            callToAction: "Your CTA"
        }
    }   
    style={styles.nativeAd} >

    <GoogleUnifiedNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by Google network.
    </GoogleUnifiedNativeAdView>

    <FacebookNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by Facebook network.
    </FacebookNativeAdView>

    <HuaweiUnifiedNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by Huawei network.
    </HuaweiUnifiedNativeAdView>

    <GenericNativeAdView style={styles.nativeAd}>
        //Layout for native ads provided by other networks.
    </GenericNativeAdView>

</RNAatkitUnifiedNativeAd>

API

For more details about properties of native ad component, please see this page in the Reference.