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

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.