1. Addapptr Avatar Addapptr
  2. Plugins
  3. REACT native plugin

Wiki

Clone wiki

REACT native plugin / unifiedNativeAds

View History

Unified native Ads

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

#!javascript

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

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. 

#!javascript

<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>

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

    <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:

#!javascript

<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

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:

#!javascript

<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>

BlueStack native ads

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

#!javascript

<BlueStackNativeAdView style={styles.nativeAd}>
    <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }}>
        <TitleView style={{color:"red"}} />
        <IconView style={{width: 20, height: 20}} />
    </View>
    <BlueStackImageView 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>
</BlueStackNativeAdView>

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:

#!javascript

<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>

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:

#!javascript

<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>

    <BlueStackNativeAdView style={styles.nativeAd}>
        <View style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-around',
        }}>
            <TitleView style={{color:"red"}} />
            <IconView style={{width: 20, height: 20}} />
        </View>
        <BlueStackImageView 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>
    </BlueStackNativeAdView>

<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>

Loading native ad

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

#!javascript

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:

#!javascript

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

    ...

</RNAatkitUnifiedNativeAd>

Showing 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.

#!javascript

RNAatkit.showUnifiedNativeAdPlacement("unifiedNativeAd");

Showing test data

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

#!javascript

<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>

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

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

</RNAatkitUnifiedNativeAd>

Setting 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.

#!javascript

<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>

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

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

</RNAatkitUnifiedNativeAd>

Updated