MediaView and CallToActionView are not clickable about react-native-admob-native-ads HOT 12 CLOSED

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.

from react-native-admob-native-ads.

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

from react-native-admob-native-ads.

@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?

from react-native-admob-native-ads.

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.

from react-native-admob-native-ads.

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.

from react-native-admob-native-ads.

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

from react-native-admob-native-ads.

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.

from react-native-admob-native-ads.

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 !

from react-native-admob-native-ads.

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

from react-native-admob-native-ads.

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

from react-native-admob-native-ads.

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

from react-native-admob-native-ads.

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 !

from react-native-admob-native-ads.