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