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

• Create android layout from android studio
• It should be like this
• Set layoutName prop to view

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 } |