Bar-ads NPM | npm.io

bar-ads

Admob wrapper for use with Expo Go

Installation

npm install bar-ads

Configuration

To use ads, you must first add app ids for android and iOS in your app.json file. This should live at the bottom of the file, just before the final closing bracket. Here is an example:

{
  "expo": {
    // Normal expo info like version, icon, etc.
  },
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-9999999999999999~9999999999",
    "ios_app_id": "ca-app-pub-9999999999999999~9999999999",
    "delay_app_measurement_init": true
  }
}

Simply copy and paste this into your app.json file, updating the ids with ones from AdMob.

Usage for Ads

Based on react-native-google-mobile-ads, this provides an expo go safe way to develop.

BannerAd Props

Props for BannerAd differ slightly from the BannerAd component of react-native-google-mobile-ads in 2 ways: 1. Instead of a single adUnit, there is adUnitAndroid and adUnitIOS. 2. Adding showLabel will add an 'Advertisement' label above the ad.

BannerAd Example

import { BannerAd, BannerAdSize } from 'react-native-bear-and-rye-library';
import { ANDROID_BANNER_ID, IOS_BANNER_ID } from './constancts';
// ...

const Screen = () => (
  <View>
    <BannerAd
      adUnitAndroid={ANDROID_BANNER_ID}
      adUnitIOS={IOS_BANNER_ID}
      size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
    />
  </View>
);

This example will produce a banner ad with the word 'Adverstisement' centered above it. To hide this label, simply use the hideLabel prop.

Reward Ad Example

import { useRewardedAd, RewardAdResult } from 'react-native-bear-and-rye-library';
import { ANDROID_REWARDED_ID, IOS_REWARDED_ID } from './constancts';
// ...

const Component = () => {
  const rewardedCallback = React.useCallback((result: RewardAdResult) => {
    if (result === RewardAdResult.Rewarded) {
      // rewareded callback logic goes here
    }
  })
  const { show, isLoaded } = useRewardedAd({
    adUnitAndroid: ANDROID_REWARDED_ID,
    adUnitIOS: IOS_REWARDED_ID,
    rewardedCallback,
    debug: true, // Add Debugging
  });

  return (
    <View>
      <Pressable onPress={show}>
        <Text>Watch ad to get a reward!</Text>
      </Pressable>
    </View>
  )
}

Interstitial Ad Example

import { useInterstitialAd } from 'react-native-bear-and-rye-library';
import { ANDROID_INTERSTITIAL_ID, IOS_INTERSTITIAL_ID } from './constancts';
// ...

const Component = () => {
  const [counter, setCounter] = React.useState(0);
  const { show, isLoaded } = useInterstitialAd({
    adUnitAndroid: ANDROID_INTERSTITIAL_ID,
    adUnitIOS: IOS_INTERSTITIAL_ID,
    debug: true, // Add Debugging
  });

  React.useEffect(() => {
    // Show Ad for every ten increases to counter
    if (counter % 10 === 0 && isLoaded) {
      show();
    }
  }, [counter])

  return (
    <View>
      <Pressable onPress={() => setCounter(counter + 1)}>
        <Text>{counter}</Text>
      </Pressable>
    </View>
  )
}