Yandex Ads for React Native (beta)

This library was created to display Yandex ads in mobile applications developed using the React Native (without fabric) framework

Installation

for npm

npm install @beletsky/react-native-yandex-ads@beta

for yarn

yarn add @beletsky/react-native-yandex-ads@beta

Usage

First of all, you need to initialize the Yandex Ads Mobile library

import React, { useEffect } from 'react';
import YandexAds from "@beletsky/react-native-yandex-ads"

// ...

export function App() {
  useEffect(() => {
    YandexAds.initialize()
  }, [])
  return //...
}

Native

AdNative.Container

| Property | Type | Required | Default | |---------------------------|:---------------------------------------:|------------------:|------------:| | adUnitId | string |❗️ | none | | width | number |❗️ | none | | height | number |❗️ | none | | config (only Android) | typeof defConfig (see deep) |❗️ | none |

AdNative.Image (only Android)

| Property | Type | Required | Default | |---------------------------|:---------------------------------------:|------------------:|------------:| | uniqYandexId | NativeAdTypes |❗️ | none |

AdNative.Media (only Android)

| Property | Type | Required | Default | |---------------------------|:---------------------------------------:|------------------:|------------:| | uniqYandexId | NativeAdTypes |❗️ | none |

AdNative.Text (only Android)

| Property | Type | Required | Default | |---------------------------|:---------------------------------------:|------------------:|------------:| | uniqYandexId | NativeAdTypes |❗️ | none |

for Android

import React from 'react'
import { AdNative, NativeAdTypes } from '@beletsky/react-native-yandex-ads';
import { StyleSheet } from 'react-native';

const ADS_NATIVE_SIZE = {
  width: 400,
  height: 117
}

const ADS_NATIVE_CONFIG = {
  favicon: {
    width: 1,
    height: 1,
  },
  age: {
    fontSize: 11,
    color: '#444',
  },
  title: {
    fontSize: 11,
    color: '#444',
  },
  icon: {
    width: 1,
    height: 1,
  },
  feedback: {
    width: 10,
    height: 10,
  },
  body: {
    fontSize: 16,
    color: '#444',
  },
  domain: {
    color: '#444',
    fontSize: 13,
  },
  media: {
    width: 85,
    height: 85,
  },
}

export function App() {
  return (
    <AdNative.Container
      adUnitId={"R-M-ADS_ID"}
      config={ADS_NATIVE_CONFIG}
      height={ADS_NATIVE_SIZE.height}
      style={styles.container}
      width={ADS_NATIVE_SIZE.width}
    >
      <View>
        <View
          style={styles.contentWrapper}>
          <AdNative.Image
            style={styles.image}
            uniqYandexId={NativeAdTypes.favicon}
          />
          <AdNative.Text
            style={styles.age}
            uniqYandexId={NativeAdTypes.age}
          />
          <AdNative.Text
            lineBreakMode="tail"
            numberOfLines={1}
            style={styles.title}
            uniqYandexId={NativeAdTypes.title}
          />
        </View>
        <AdNative.Text
          lineBreakMode="tail"
          numberOfLines={3}
          style={styles.body}
          uniqYandexId={NativeAdTypes.body}
        />
        <AdNative.Text
          style={styles.domain}
          uniqYandexId={NativeAdTypes.domain}
        />
        <AdNative.Image
          style={styles.icon}
          uniqYandexId={NativeAdTypes.icon}
        />
        <AdNative.Image
          style={styles.feedback}
          uniqYandexId={NativeAdTypes.feedback}
        />
        <AdNative.Text
          style={styles.warning}
          uniqYandexId={NativeAdTypes.warning}
        />
        <AdNative.Text
          style={styles.sponsored}
          uniqYandexId={NativeAdTypes.sponsored}
        />
      </View>
      <AdNative.Media
        height={85}
        style={styles.media}
        uniqYandexId={NativeAdTypes.media}
        width={85}
      />

    </AdNative.Container>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#000',
    width: ADS_NATIVE_SIZE.width,
    height: ADS_NATIVE_SIZE.height,
    flexDirection: 'row',
    paddingVertical: 10,
    paddingLeft: 10,
    paddingRight: 7,
  },
  contentWrapper: {
    display: 'flex',
    flexDirection: 'row',
    overflow: 'visible',
    alignItems: 'center',
  },
  image: {
    display: 'none'
  },
  age: {
    height: 16
  },
  title: {
    height: 16,
    width: ADS_NATIVE_SIZE.width - 157,
    fontSize: 11,
    color: '#444',
    fontFamily: 'Roboto-Regular',
    lineHeight: 16,
    marginBottom: 2,
  },
  body: {
    height: 66,
    width: ADS_NATIVE_SIZE.width - 157,
    minHeight: 30,
    fontSize: 16,
    fontFamily: 'Roboto-Regular',
    lineHeight: 22,
    letterSpacing: 0.25,
    fontWeight: '500',
  },
  domain: {
    height: 16,
    fontSize: 12.5,
    color: '#444',
    fontStyle: 'italic',
    fontWeight: 'normal',
    letterSpacing: 0.192,
  },
  icon: {
    width: 1,
    height: 1,
  },
  feedback: {
    width: 10,
    height: 10,
  },
  warning: {
    height: 13
  },
  sponsored: {
    height: 13
  },
  media: {
    borderRadius: 5,
    overflow: 'hidden',
  }
})

for IOS

import React from 'react'
import { AdNative } from '@beletsky/react-native-yandex-ads';
import { StyleSheet } from 'react-native';

const ADS_NATIVE_SIZE = {
  width: 400,
  height: 117
}

export function App() {
  return (
    <AdNative.Container
      adUnitId={"R-M-ADS_ID"}
      height={ADS_NATIVE_SIZE.height}
      style={styles.container}
      width={ADS_NATIVE_SIZE.width}
    />
  )
}

const styles = StyleSheet.create({
  container: {
    width: ADS_NATIVE_SIZE.width,
    height: ADS_NATIVE_SIZE.height,
    flexDirection: 'row',
    paddingVertical: 10,
    paddingLeft: 10,
    paddingRight: 7,
  }
})

Banner

| Property | Type | Required | Default | |---------------------------|:---------------------------------------:|------------------:|------------:| | adUnitId | string |❗️ | none | | place (only IOS) | 'top' or 'bottom' |❔️ | 'top' | | size | AdBannerType |❗️ (or customSize) | none | | customSize | { width, height } |❗️ (or size) | none | | requestParams | { [key: string]: string } |❔️ | none | | onDidLoad | (adId?: string) => void |❔️ | none | | onClick | (adId?: string) => void |❔️ | none | | onWillLeaveApp | (adId?: string) => void |❔️ | none | | onWillPresent | (adId?: string) => void |❔️ | none | | onDidDismiss | (adId?: string) => void |❔️ | none | | onDidReturnedToApplication| (adId?: string) => void |❔️ | none | | onDidTrackImpression | (adId?: string, data?: string) => void |❔️ | none | | onDidFailLoading | (adId?: string, error?: string) => void |❔️ | none |

import React from 'react'
import { AdBanner } from "@beletsky/react-native-yandex-ads";

// ...

export function App() {
  return (
    <AdBanner
      onDidLoad={() => console.log('on did load')}
      onDidFailLoading={() => console.log('failed load')}
      adUnitId={"R-M-ADS_ID"}
      size={AdBannerType.BANNER_300x300}
    />
  )
}

Banner

| Property | Type | Required | Default | |---------------------------|:---------------------------------------:|------------------:|------------:| | adUnitId | string |❗️ | none | | place (only IOS) | 'top' or 'bottom' |❔️ | 'top' | | size | AdBannerType |❗️ (or customSize) | none | | customSize | { width, height } |❗️ (or size) | none | | onDidLoad | (adId?: string) => void |❔️ | none | | onClick | (adId?: string) => void |❔️ | none | | onWillLeaveApp | (adId?: string) => void |❔️ | none | | onWillPresent | (adId?: string) => void |❔️ | none | | onDidDismiss | (adId?: string) => void |❔️ | none | | onDidReturnedToApplication| (adId?: string) => void |❔️ | none | | onDidTrackImpression | (adId?: string, data?: string) => void |❔️ | none | | onDidFailLoading | (adId?: string, error?: string) => void |❔️ | none |

import React from 'react'
import { AdBanner } from "@beletsky/react-native-yandex-ads";

// ...
export function App() {
  return (
    <AdBanner
      onDidLoad={() => console.log('on did load')}
      onDidFailLoading={() => console.log('failed load')}
      adUnitId={"R-M-ADS_ID"}
      size={AdBannerType.BANNER_300x300}
    />
  )
}

Interstitial

| Method | Type | Required | Default | |---------------------------|:----------------------------------------------:|---------------------:|------------:| | show() | (adUnitId: string) => boolean | adUnitId is required | none | | addEventListener() | (eventType, callback) => { remove: () => void }|

import { InterstitialEventTypes as EventTypes, AdInterstitial } from "@beletsky/react-native-yandex-ads";
import React, { useEffect } from 'react';

// ...

function App() {
  useEffect(() => {
    const adsListener = AdInterstitial.show(EventTypes.didLoad,
      (source) => {
        console.log(source)
      })
    return () => {
      adsListener.remove()
    }
  }, [])
  return // ...
}

Rewarded

| Method | Type | Required | Default | |---------------------------|:----------------------------------------------:|---------------------:|------------:| | show() | (adUnitId: string) => boolean | adUnitId is required | none | | addEventListener() | (eventType, callback) => { remove: () => void }|

import { RewardedEventTypes as EventTypes, AdRewarded } from "@beletsky/react-native-yandex-ads";
import React, { useEffect } from 'react';

// ...

function App() {
  useEffect(() => {
    const adsListener = AdRewarded.show(EventTypes.didLoad,
      (source) => {
        console.log(source)
      })
    return () => {
      adsListener.remove()
    }
  }, [])
  return // ...
}

License

MIT

Created by Yaroslav Beletsky @beletsky