react-native-appvert

Getting Started

1. Install to your Project: yarn add react-native-appvert or npm install --save react-native-appvert

react-native-appvert comes with rxjs, lodash and react-native-device-info as dependencies. You need to reference to this for linking native library

1. Usage

import { AppVertProvider, AppVertManager } from 'react-native-appvert';
import { BannerAds } from' react-native-appvert/lib/component';
import { APPVERT_BANNER } from' react-native-appvert/lib/constants';
 
export default class App extends React.Component {
  componentWillMount = () => {
    AppVertManager.initManager({
      endpointAppVert: 'default will point to appvert production api',
      appKey: 'app key string',
      // deviceId: 'device id string', default is value from  react-native-device-info 
      // ipAddress: 'ip adress stirng', default is value from  react-native-device-info 
    });
    AppVertManager.registerNewAdsSlot('adslot stirng', APPVERT_BANNER);
    AppVertManager.fetchCampaign();
    // AppVertManager.fetchCampaign(campaign-id, APPVERT_BANNER);       will fetch only ads for provided campaign-id
  }
 
  render = () => {
    return (
      <BannerAds
         adSlotId="adsSlotId"
        // width={640}  optional
        // height={100}  optional
        // onPress={ads => Linking.openURL(ads.campaign.linkUrl)}
      />
    )
  }
}

Running Example

copy the folder lib to example project before running

API

1. AppVertManager

import { AppVertManager } from 'react-native-appvert';

initManager argument: an object contains folowing properties:

• endpointAppVert: (string) custom appvert api endpoint. default is https://api.appvert.ios/api/v1
• appKey: (string) appkey provided by appvert portal
• deviceId (string)
• ipAddress (string)

description: initiate AppVertManager with appKey, device IpAddress, deviceId and custom appvert endpoint. react-native-appvert request react-native-device-info as peerDependency, it will get DeviceId and ipAddress by default when import. however, in some iOS device, RNDI does not work as expected and you should set it manually. endPointAppVert is point to appvert production api as default

fetchCampaign argument

• adsSlotId
• type: one of APPVERT_POPUP, APPVERT_BANNER, APPVERT_LARGE_BANNER, APPVERT_FULL_BANNER, APPVERT_MEDIUM_RECTANGLE, APPVERT_LEADER_BOARD. eg: import { APPVERT_FULL_BANNER } from 'react-native-appvert/lib/constants',
• successCallback: ads => {} argument is the ads object hold all ads data
• failCallback: err => {}
• finishCallback: ads => {} argument is the ads object hold all ads data

description: call API to get data of the ads with provided adsSlotId. because Appvert portalcan config the frequency of a trigger, so you should call this method every timeyou want a component display the coresponding adsSlot. successCallback will becalled when the ads fetched successfully with data. failCallback is called withall other reason. The calling without adsSlotId and type will fetch all ads youhave registered by method registerNewAdsSlot. successCallback andfailCallback are invoked for each ads. finishCallback is called when all adscomplete.

You don't need to control the ads manually. All Appvert Ads component has been implemented AppVertHOC under the hood. It allow the component will update the ads by themseft

dismissAds argument

• option: an object with: adsSlotId isClick: true if user click ads, false if user close ads displayDuration: time since the ads display until user dismiss
• successCallback = () => {},
• failCallback = () => {}

registerNewAdsSlot argument

• adsSlotId
• type: one of APPVERT_POPUP, APPVERT_BANNER, APPVERT_LARGE_BANNER, APPVERT_FULL_BANNER, APPVERT_MEDIUM_RECTANGLE, APPVERT_LEADER_BOARD

description register this ads to AppVertManager's management list. so you can fetch all of them in a single call

showPopupAds argument

• adsSlotId
• successCalback: () => {}
• failCallback: () => {}

description Call fetchCampaign under the hood. this method will sefl manage the PopupAds component for you. if the call return success with data. The PopupAds with coresponding adsSlotId is opened, successCallback will be called. otherwise, call failCallback.

removeAdsSlot argument

• adsSlotId

description remove the coresponding adsSlotId from the management list

getAds argument

description return all ads data at current time

clearDataForAdSlot argument option 1: id: string option 2: ids: array of string

description remove ads data with corresponding id and update the Ads Component which use this Id

2. BannerAds

Component for Banner types

import { BannerAds } from 'react-native-appvert/component';

property	type	description
onPress	function	callback when user click the banner. function recieve one argument is ads data of the adsSlotId
adsSlotId	string
width	number	the width of the banner. when undefined, the banner will use the width returned from api if get data success
height	number	the height of the banner. when undefined, the banner will use the height returned from api if get data success
data	object	the data of the coresponding ads. you do not provide value for this prop. It receive value from AppvertManager itself

3. PopupAds

Component for Popup types

import { PopupAds } from 'react-native-appvert/component';

property	type	description
onPress	function	callback when user click the popup. function recieve one argument is ads data of the adsSlotId. Notes: The Component will handle all other sub process when user click the ads: call api dismiss, auto close the ads, call onDismiss callback
adsSlotId	string
width	number	the width of the popup content. when undefined, the popup content will use the width returned from api if get data success
height	number	the height of the popup content. when undefined, the popup content will use the height returned from api if get data success
onShow	function	callback called when the popup open
onDismiss	function	callback called when the popup close
coutdownTextStyle	object	the style of the countdown text
closeIcon	element	the close icon component
closeIconContainerStyle	object	the style of close icon container. height is required
modalBackgroundColor	string	color of background
modalOpacity	number	opacity of background
animationType	string	animation type of modal reference from RN modal. default is fade
isDelayClose	boolean	Does this ad apply the delay close button. Default is false
closeTimeDelay	number	the time to delay the displayment of close button. Default is 0
data	object	the data of the coresponding ads. you do not provide value for this prop. It receive value from AppvertManager itself

4. AppVertHOC

import { AppVertHOC } from 'react-native-appvert/component';

There will be time you want to create your own component with the data get from AppVert. This HOC will help you to do so.

Assumming you have write for your own a custom component MyAppVertAds with receive a data (standard appvert ads schema) property and display.

Usage:

render = () => {
  const Ads = AppVertHOC(MyAppVertAds, 'adsSlotId');
  return (
    <Ads
      // your other property
    />
  )
}

To fetch data, you can call: AppVertManager.fetchCampaign('adsSlotId', adsType)

the HOC component will get ads data by itself and pass into MyAppVertAds's data property. Remember that Appvert has fit size for all Advertisement type except Popup. Ensure to pass the correct adsType, so fetchCampaign can get data successfully.