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

Attention, in this version, the display of ads in Android and iOS is different, we are making every effort to create a single visual part

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