react-native-appvert

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

Usage no npm install needed!

<script type="module">
  import reactNativeAppvert from 'https://cdn.skypack.dev/react-native-appvert';
</script>

README

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.