react-native-appvert v1.0.12

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

2. 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';

3. PopupAds

Component for Popup types

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

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.