# Native Ad

### Usage

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

{% hint style="info" %}
Some ad networks require separate packages for native ads. See the [Setup](/aatkit-react-native-integration/start/setup.md) page for details.
{% endhint %}

```javascript
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.

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

    <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 <a href="#markdown-header-google-native-a-ds" id="markdown-header-google-native-a-ds"></a>

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 <a href="#markdown-header-facebook-native-a-ds" id="markdown-header-facebook-native-a-ds"></a>

{% hint style="info" %}
To enable Facebook native ads, install the `@addapptr/react-native-aatkit-facebook-ads` package. See the [Setup](/aatkit-react-native-integration/start/setup.md) page for details.
{% endhint %}

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

### Huawei native ads <a href="#markdown-header-bluestack-native-a-ds" id="markdown-header-bluestack-native-a-ds"></a>

{% hint style="info" %}
To enable Huawei native ads, install the `@addapptr/react-native-aatkit-huawei` package. See the [Setup](/aatkit-react-native-integration/start/setup.md) page for details.
{% endhint %}

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:

```javascript
<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 <a href="#markdown-header-generic-native-a-ds" id="markdown-header-generic-native-a-ds"></a>

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

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

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

    <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 <a href="#markdown-header-loading-native-a-d" id="markdown-header-loading-native-a-d"></a>

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

### Show native ad <a href="#markdown-header-showing-native-a-d" id="markdown-header-showing-native-a-d"></a>

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");
```

#### Show test data <a href="#markdown-header-showing-test-data" id="markdown-header-showing-test-data"></a>

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>

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

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

    <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 <a href="#markdown-header-api" id="markdown-header-api"></a>

For more details about properties of native ad component, please see this [page](/aatkit-react-native-integration/other/reference/rnaatkitunifiednativead.md) in the Reference.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aatkit.gitbook.io/aatkit-react-native-integration/formats/native-ad.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.