@beletsky/react-native-yandex-ads v1.2.3

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

AdNative.Image (only Android)

AdNative.Media (only Android)

AdNative.Text (only Android)

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

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

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

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

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