Getting "Error: Got unexpected null" when navigating away from screen with Facebook Native Ad

Hi there,

I’ve been struggling with this for a while, so reaching out to the community to see if anyone else has a solution. I implemented Facebook Native Ads according to the documentation and have them showing up in my production app on iOS and Android. I’m on Expo SDK 31. When I navigate away from the screen the ads are on, the app throws this exception and crashes (this is the relevant part of the error):

[16:03:27] Error: Error: Error: Error: Error: Got unexpected null

This error is located at:
    in TouchableOpacity (at AdTriggerView.js:52)
    in AdTriggerView (at FacebookNativeAdCard.js:30)
    in FacebookNativeAdCard (at withNativeAd.js:98)
    in CTKNativeAd (at withNativeAd.js:94)
    in NativeAdContainer (at HomeScreen.js:56)

Here’s the component that renders the ad:

import React, { PureComponent } from 'react';
import { View, Text } from 'react-native';
import { FacebookAds } from 'expo';

const { AdTriggerView, AdMediaView, AdIconView } = FacebookAds;

class FacebookNativeAdCard extends PureComponent {
  render() {
    if (!this.props.nativeAd) return null;

    const {
      advertiserName,
      headline,
      bodyText,
      sponsoredTranslation
    } = this.props.nativeAd;

    if (!advertiserName || !headline || !bodyText || !sponsoredTranslation) return null;

    const { containerStyleSmallHorizontal, imageStyleSmallHorizontal } = styles;

    return (
      <AdTriggerView style={containerStyleSmallHorizontal}>
        <View style={{ flex: 1 }}>
          <Text>{advertiserName}</Text>
          <Text numberOfLines={4}>{headline}</Text>
          <Text>{bodyText}</Text>
          <Text>{sponsoredTranslation}</Text>
        </View>
        <AdMediaView style={imageStyleSmallHorizontal} />
        <AdIconView style={{ width: 0, height: 0 }} />
      </AdTriggerView>
    );
  }
}

const styles = {
  ...
};

export default FacebookAds.withNativeAd(FacebookNativeAdCard);

Even before seeing this error, there seems to be some weird stuff going on with the FacebookAds modules. According to the documentation, you need to include AdMediaView in the child tree for the AdTriggerView to work. But I actually found that the AdIconView also needed to be included. If it wasn’t, the AdMediaView was blank and the AdTriggerView wasn’t clickable. That’s why you see the “height: 0, width: 0” on the AdIconView component in my code. I had to include it in there otherwise nothing would work.

Unfortunately, after getting it to work, it throws the above error when I navigate away from the screen the ads appear.

I was poking around in the AdTriggerView code and there seem to be two places where “nullthrows” is used. I’m guessing one of those is throwing the error. Not sure which one it is or why.

Any idea why this might be happening? Any suggestions on how to resolve or dig in further to pinpoint what’s causing the error?

Just a follow-up. I traced through the code using the Chrome debugger and found where the error is being thrown. It’s actually in withNativeAd.tsx. I haven’t completely read through all the code, but it looks like there’s a line in AdTriggerView.tsx that is meant to unregister the components in the ad manager that trigger the ad. Here’s that line:

https://github.com/expo/expo/blob/master/packages/expo/src/facebook-ads/AdTriggerView.tsx#L35

That in turn ends up calling the unregisterComponent method in withNativeAd that in turn calls the _setAdNodeHandles method. Here’s the line that’s throwing the error in that method:

https://github.com/expo/expo/blob/master/packages/expo/src/facebook-ads/withNativeAd.tsx#L175

You’ll notice that a few lines up there’s a developer note:

// TODO: handle unregistering views when components are unmounted

Any thoughts on changes necessary to complete this method to handle the unmounting scenario? This seems like a really common scenario for Native Ads – specifically Native Ad components needing to be unmounted because the screen they’re on is unmounted.

Also, I noticed this line of code in the same method that’s throwing the error:

https://github.com/expo/expo/blob/master/packages/expo/src/facebook-ads/withNativeAd.tsx#L173

That explains why the AdIconView also needs to be included. It looks like you need to include both the AdMediaView and AdIconView for the ad to be interacted with. It would be good to update the documentation as it currently states that you only need to include AdMediaView. Here’s a pull request to do that: https://github.com/expo/expo/pull/3331

Thanks for the meticulously detailed report of this issue @stevenpal. Hopefully we can get your PR reviewed and merged soon! Please follow along there for future updates.

Cheers,

Adam

Thanks for following up @adamjnav! It looks like @ide already merged the pull request for the update to the documentation (thanks for the quick turnaround).

If anyone has any thoughts on how to finish up the part of the Facebook ads code to support unmounting, maybe I could take a stab at it when I have time. I’m guessing if it were trivial, though, you guys would have implemented it at the time. Happy to help if I can.

Just wanted to quickly check-in to see if anyone had a chance to look at what’s involved in completing the native ad code to support unmounting. Any ideas?

It’s not an open issue in the underlying library you guys forked (although it seems like perhaps you have an older version of the library – Investigate what needs to be done for scoping in Expo · Issue #74 · callstack/react-native-fbads · GitHub).

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.