Skip to content

Latest commit

 

History

History
320 lines (270 loc) · 11.6 KB

README.md

File metadata and controls

320 lines (270 loc) · 11.6 KB

react-native-admost

Getting started

$ yarn add @charmy.tech/react-native-admost

Run Example Project

yarn install
cd example
yarn run prebuild
yarn run android -d
yarn run ios -d

Android

  • You should follow the "Edit Files" section on AdMost
  • These dependencies already exist in gradle
  implementation 'com.admost.sdk:amr:+' 
  implementation 'com.google.android.gms:play-services-base:17.1.0'

Update Project build.grandle

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://mvn-repo.admost.com/artifactory/amr-2' }
    }
}

IOS

  • You should follow the "Create your podfile and install" section on AdMost
  • These dependencies already exist in pod
  s.dependency "AMRSDK", "~> 1.5"

Usage

AdMostAdView

import React, { useEffect } from "react";
import { View, StatusBar, SafeAreaView } from "react-native";

import AdMost, { AdMostAdView } from "@charmy.tech/react-native-admost";

export default function App() {
  useEffect(() => {
    const appId = "<your-app-id>";

    AdMost.initAdMost({
      appId: appId,
      userConsent: true,
      subjectToGDPR: false,
      subjectToCCPA: false,
      userChild: false,
    });

    AdMost.setUserId("123123");
    AdMost.setCanRequestAds(false);
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: "center" }}>
        <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
        <AdMostAdView
          zoneId="c4a15983-d6fe-49ec-8e8b-844663190559"
          tag="Ragib"
          style={{ width: "100%", height: 50 }}
          onReady={({ nativeEvent }) => {
            console.log("ON_READY", nativeEvent);
          }}
          onFail={({ nativeEvent }) => {
            console.log("ON_FAIL", nativeEvent);
          }}
          onClick={({ nativeEvent }) => {
            console.log("ON_CLICK", nativeEvent);
          }}
        />

        <AdMostAdView
          zoneId="<admost-zone-id>"
          style={{ width: "100%", height: 250 }}
          onReady={({ nativeEvent }) => {
            console.log("ON_READY", nativeEvent);
          }}
          onFail={({ nativeEvent }) => {
            console.log("ON_FAIL", nativeEvent);
          }}
          onClick={({ nativeEvent }) => {
            console.log("ON_CLICK", nativeEvent);
          }}
        />
      </View>
    </SafeAreaView>
  );
}

Android Custom Layout

IOS Custom Layout

  • cp -r CustomXibs ${project_rootdir}/node_modules/@charmy.tech/react-native-admost/
  • pod install in ios folder
  • It should be like this
  • Set layoutName prop to view

Props

Prop Required Type Default value Description
zoneId true string AdMost zoneId
layoutName false string DEFAULT Custom layout name(layout_admost_native_250, CustomNative200x200)
tag false string Tags will let you monitor the performance of the ads across different dimensions for the same zone
style true ViewStyle View style ({ width: "100%", height: 50 })
autoLoadDelayMs false number 100 Auto load delay (min 100 ms)
onReady false func on ready callback event
onFail false func on fail callback event
onClick false func on click callback event

AdMostInterstitial

import React, { useEffect } from "react";
import { View, StatusBar, Button, SafeAreaView } from "react-native";

import AdMost, { AdMostInterstitial } from "@charmy.tech/react-native-admost";

export default function App() {
  useEffect(() => {
    const appId = "<your-app-id>";

    AdMost.initAdMost({
      appId: appId,
      userConsent: true,
      subjectToGDPR: false,
      subjectToCCPA: false,
      userChild: false,
    });
  }, []);

  // Interstitial events
  useEffect(() => {
    const adMostOnReadyEvent = AdMost.addInterstitialListener.onReady((e) => {
      console.log("ON_READY", e);
      AdMostInterstitial.showAd(e.zoneId, "TEST");
    });

    const adMostOnFailEvent = AdMost.addInterstitialListener.onFail((e) => {
      console.log("ON_FAIL", e);
    });

    const adMostOnDismissEvent = AdMost.addInterstitialListener.onDismiss((e) => {
      console.log("ON_DISMISS", e);
    });

    const adMostOnShownEvent = AdMost.addInterstitialListener.onShown((e) => {
      console.log("ON_SHOWN", e);
    });

    const adMostOnClickedEvent = AdMost.addInterstitialListener.onClicked((e) => {
      console.log("ON_CLICKED", e);
    });

    const adMostOnStatusChangedEvent = AdMost.addInterstitialListener.onStatusChanged((e) => {
      console.log("ON_STATUS_CHANGED", e);
    });

    return () => {
      adMostOnReadyEvent.remove();
      adMostOnFailEvent.remove();
      adMostOnDismissEvent.remove();
      adMostOnShownEvent.remove();
      adMostOnClickedEvent.remove();
      adMostOnStatusChangedEvent.remove();
    };
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: "center" }}>
        <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
        <Button
          onPress={() => AdMostInterstitial.loadAd("<admost-zone-id>")}
          title="Load Interstitial Ad"
          color="red"
        />
      </View>
    </SafeAreaView>
  );
}

Methods

Name Params Return Description
loadAd (zoneId: string) void Load ad
destroyAd (zoneId: string) void Destroy Ad
showAd (zoneId: string, tag: string) Promise Show when ad is ready
isLoading (zoneId: string) Promise Ad is loading
isLoaded (zoneId: string) Promise Ad is loaded

Events

Name Params
ON_READY { network: string; ecpm: number; zoneId: string }
ON_FAIL { errorCode: number; errorDescription?: string(iOS); zoneId: string }
ON_DISMISS { message?: string(Android); zoneId: string }
ON_SHOWN { network: string; zoneId: string }
ON_CLICKED { network: string; zoneId: string }
ON_STATUS_CHANGED { network: string; zoneId: string }

AdMostRewarded

import React, { useEffect } from "react";
import { View, StatusBar, Button, SafeAreaView } from "react-native";

import AdMost, { AdMostRewarded } from "@charmy.tech/react-native-admost";

export default function App() {
  useEffect(() => {
    const appId = "<your-app-id>";

    AdMost.initAdMost({
      appId: appId,
      userConsent: true,
      subjectToGDPR: false,
      subjectToCCPA: false,
      userChild: false,
    });
  }, []);

  // Rewarded events
  useEffect(() => {
    const adMostOnReadyEvent = AdMost.addRewardedListener.onReady((e) => {
      console.log("ON_READY", e);
      AdMostRewarded.showAd(e.zoneId, "TEST");
    });

    const adMostOnFailEvent = AdMost.addRewardedListener.onFail((e) => {
      console.log("ON_FAIL", e);
    });

    const adMostOnDismissEvent = AdMost.addRewardedListener.onDismiss((e) => {
      console.log("ON_DISMISS", e);
    });

    const adMostOnCompleteEvent = AdMost.addRewardedListener.onComplete((e) => {
      console.log("ON_COMPLETE", e);
    });

    const adMostOnShownEvent = AdMost.addRewardedListener.onShown((e) => {
      console.log("ON_SHOWN", e);
    });

    const adMostOnClickedEvent = AdMost.addRewardedListener.onClicked((e) => {
      console.log("ON_CLICKED", e);
    });

    const adMostOnStatusChangedEvent = AdMost.addRewardedListener.onStatusChanged((e) => {
      console.log("ON_STATUS_CHANGED", e);
    });

    return () => {
      adMostOnReadyEvent.remove();
      adMostOnFailEvent.remove();
      adMostOnDismissEvent.remove();
      adMostOnCompleteEvent.remove();
      adMostOnShownEvent.remove();
      adMostOnClickedEvent.remove();
      adMostOnStatusChangedEvent.remove();
    };
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: "center" }}>
        <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
        <Button
          onPress={() => AdMostRewarded.loadAd("<admost-zone-id>")}
          title="Load Rewarded Ad"
          color="red"
        />
      </View>
    </SafeAreaView>
  );
}

Methods

Name Params Return Description
loadAd (zoneId: string) void Load ad
destroyAd (zoneId: string) void Destroy Ad
showAd (zoneId: string, tag: string) Promise Show when ad is ready
isLoading (zoneId: string) Promise Ad is loading
isLoaded (zoneId: string) Promise Ad is loaded

Events

Name Params
ON_READY { network: string; ecpm: number; zoneId: string }
ON_FAIL { errorCode: number; errorDescription?: string(iOS); zoneId: string }
ON_DISMISS { message?: string(Android); zoneId: string }
ON_COMPLETE { network: string; zoneId: string }
ON_SHOWN { network: string; zoneId: string }
ON_CLICKED { network: string; zoneId: string }
ON_STATUS_CHANGED { network: string; zoneId: string }