How to hide ad banner offline or when no ad could be loaded - in React Native with Expo?

Question

I implemented ads with the expo and admob in my react native app, but I would like to get rid of the blank/blocking space when no ads are being loaded. Haven't found any examples for that. (other than the banner, I have a header and scrollview on that page). This is how the admob banner is implemented:

// Display a banner
<AdMobBanner
  bannerSize="fullBanner"
  adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace    with your-admob-unit-id
  testDeviceID="EMULATOR" />

Brandon Culley · Accepted Answer · 2019-02-07T15:50:45.860

My solution to this problem is to wrap the admob component in a view with styling to set height equal to zero. When you receive an ad. Then update the styling to show the banner in a view

export class AdContainer extends React.Component {
  constructor() {
    super();
    this.state = { height: 0 };
  }

  bannerError(e) {
    console.log('banner error: ');
    console.log(e);
  }
  adReceived() {
    console.log('banner ad received: ');
    this.setState({
      ...this.state,
      hasAd: true
    });
  }
  adClicked() {
    console.log('banner ad clicked: ');
  }

  render() {
    return (
      <View style={!this.state.hasAd ? { height: 0 } : {}}>
        <View>
          <AdMobBanner
            bannerSize="smartBannerPortrait" // "largeBanner" "fullBanner"
            adUnitID={BANNER_ID}
            testDeviceID="EMULATOR"
            onDidFailToReceiveAdWithError={this.bannerError}
            onAdViewDidReceiveAd={this.adReceived.bind(this)}
            onAdViewWillPresentScreen={this.adClicked.bind(this)}
          />
        </View>
      </View>
    );
  }
}

score 1 · Answer 2 · edited Jan 29 '20 at 17:21

1

From reading their docs, you have 2 methods at your disposal:

onAdLoaded

Accepts a function. Called when an ad is received.

onAdFailedToLoad

Accepts a function. Called when an ad request failed.

If you are offline, you can check the network status like so:

Docs: https://facebook.github.io/react-native/docs/netinfo

NetInfo.getConnectionInfo().then((connectionInfo) => {
  console.log('Initial, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);
});
function handleFirstConnectivityChange(connectionInfo) {
  console.log('First change, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);
  NetInfo.removeEventListener(
    'connectionChange',
    handleFirstConnectivityChange
  );
}
NetInfo.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

I would check if the user is offline, or has a bad connection - and if online - render the Ad, and use the onAdFailedToLoad method to handle ad errors.

edited Jan 29 '20 at 17:21

Brandon Culley

5,219
1
28
28

answered Sep 25 '18 at 18:22

JRK

3,686
1
13
19

Thanks, I will try out these methods. Still not sure how I would hide the banner. Maybe I will check for connectivity and show the banner only if that is successful. – cabhara Sep 25 '18 at 19:35
Perhaps a ternary statement? Let me know if you get stuck. Please accept and up vote if you found useful :) – JRK Sep 25 '18 at 20:01
but what exactly code you write in onAdFailedToLoad() to hide it? – Hiren Prajapati Nov 05 '18 at 10:42
Just use a true/false state variable. – JRK Nov 05 '18 at 11:18

score 1 · Answer 3 · answered Sep 30 '18 at 00:24

I tried several approaches... The problem with onAdFailedToLoad was that it doesn't seem to work when offline. The problem with listening to NetInfo was that a simple implementation only told the network status after a change.

I ended up using a library to discover whether the app was online:

https://github.com/rgommezz/react-native-offline (implementation with redux)

and this approach to hide my admob banner (nested inside MyView):

https://medium.com/scripbox-engineering/how-to-hide-a-view-component-in-react-native-8a4994382c0.

but what exactly code you write in onAdFailedToLoad() to hide it? — Hiren Prajapati, Nov 05 '18 at 10:50

score 0 · Answer 4 · answered Aug 14 '23 at 09:44

Here's a hook solution.

Essentially you want to check if the ad has loaded, if not set the banner height to 0 so that it doesn't leave open empty space.

function MyAdContainer() {
  const [adLoaded, setAdLoaded] = useState(false) // initialize unloaded

  function handleAdLoaded() {
    setAdLoaded(true);
  }

  const containerStyles = adLoaded ? styles.bannerContainer : { height: 0 }; 

  return (
    <View style={containerStyles}>
      <BannerAd
        onAdLoaded={handleAdLoaded}
        {...OTHER_PROPS}
      />
    </View>
  );
}

In this case it doesn't matter if the ad failed or the user is offline because it initializes as false. So only in the case that an ad is successfully loaded do we give that component a height.

How to hide ad banner offline or when no ad could be loaded - in React Native with Expo?

4 Answers4

Linked