MediaView and CallToActionView are not clickable

[deepslam]

Hello!

Thank you for the awesome package.
It works but in my case, MediaView and CallToActionView are not clickable.
I've copied a sample code but there is no action when I click on the image or action button.
Have I missed something or this is the bug?

Thank you!

--
Regards, Dmitry

[ammarahm-ed]

Can you test this in the example app provided in the project? The views are clickable, also mention your react-native version.

[mrousavy]

@ammarahm-ed I've also noticed that <CallToActionView> is not clickable. The MediaView and ImageView shouldn't be clickable, as per Google's Admob's recommendations, but the CallToActionView ("Install"/"Open" button) definetly should. Other Text elements such as Title (<HeadlineView>) or Description (<TaglineView>) work (most of the time)

Using React native 0.63.2, so the new Pressability API, but that shouldn't matter since clicks are handled natively through the Text component, right?

[mrousavy]

Also, sometimes the elements are clickable, sometimes not.
Here's an example:

Clickable	Not clickable

Weirdly enough, the Media View is clickable when everything else isn't, and other way around if it is.

[ammarahm-ed]

Try to use delayAdLoading prop to delay ad loading by 1000 ms

Buttons etc are not clickable only when they are not registered on the Native code. Its not related to Pressability API.

[ammarahm-ed]

This has been fixed. Try the latest release, v0.3.6 @mrousavy @deepslam try the example in the project. Now i have added full example for all use cases

[manuhook]

Hi @ammarahm-ed, thanks so much for your work.
I'm still having the issue on v0.3.6. iOS and Android (RN 62.3). CallToActionView is not firing anything when pressed.
I'm using the same code as AdView.js in Example with a delay.

[manuhook]

I've tried to build the Example and it's fine...
I really have no idea what can provoque this conflict. All the others elements are clickable, even MediaView.
I'm using :

• React Native 62.3
• React Native Navigation 6.12
• React Native Firebase 8.3 (for Admob banners)

if you have any idea ... thanks !

[manuhook]

On CallToActionView.js, replacing RawButton and GestureHandlerRootView by View made it work on iOS but not on Android.

[yaroslavnikiforov]

Hi, @ammarahm-ed thanks for the great package. Is there a way to make only the CallToActionView clickable? As according to the Google policies:

The background of the ad must be not clickable (no clickable “white space”). If you use the image element as the background of the ad, the image must be not clickable.

https://support.google.com/admob/answer/6329638?ref_topic=7384666

[sslava]

Fixed a couple of mistakes in the original implementation. Don't have enough time for proper PR at the moment, but here is what worked out for me:

import React, {useCallback, useContext, useEffect, useRef} from 'react';
import {findNodeHandle, Text} from 'react-native';

import {RawButton, GestureHandlerRootView} from 'react-native-gesture-handler';

import {NativeAdContext} from 'react-native-admob-native-ads/src/context';

export default function CallToActionView(props) {
  const {nativeAd, nativeAdView} = useContext(NativeAdContext);
  const callToActionRef = useRef();

  const _onLayout = useCallback(() => {
    if (!nativeAdView) {
      return;
    }
    nativeAdView.setNativeProps({
      callToAction: findNodeHandle(callToActionRef.current),
    });
  }, [nativeAdView]);

  useEffect(() => {
    _onLayout();
  }, [_onLayout]);

  return (
    <GestureHandlerRootView>
      <RawButton
        ref={callToActionRef}
        onLayout={_onLayout}
        style={[props.style]}>
        <Text
          allowFontScaling={
            props.allowFontScaling ? props.allowFontScaling : false
          }
          style={[props.textStyle]}>
          {nativeAd
            ? props.allCaps
              ? nativeAd.callToAction?.toUpperCase()
              : nativeAd.callToAction
            : null}
        </Text>
      </RawButton>
    </GestureHandlerRootView>
  );
}

Main things to notice:

• replaced createRef with useRef
• wrap onLayout with useCallback
• fixed useEffect deps.

[ammarahm-ed]

@sslava I have added these changes, I will test this out before next release

[pperron]

Using V0.6.6 and having multiple ads in a Flatlist (using pre-loading ads option), some ads are not clickable. Running debug using XCode, I got this error showing:
<Google> User interactions must be disabled on the asset view to enable click handling. userInteractionEnabled has been set to NO on <RCTImageView: 0x10b1c9c00; frame = (0 0; 50 50); clipsToBounds = YES; userInteractionEnabled = NO; layer = <CALayer: 0x2830f1920>> reactTag: 7899; frame = {{0, 0}, {50, 50}}; layer = <CALayer: 0x2830f1920>.
Searching that error on the web, I found this link:
https://groups.google.com/g/google-admob-ads-sdk/c/BhguhDQ1R7I
Last comment is stating this:
I solve the problem using Label instead button for callToAction
I will try doing something on my side, if that ever rings a bell to the developpers to help investigate the issue, thatnsk for responding if any solution to that problem. Thanks and great lib BTW !

[SqueezedLight]

Mmmmh, any update on this one? Facing the same problem :(