[Migrating to 0.4.0] Build failed in iOS: Semantic issue

[tanwanjern]

Hi, I'm migrating 0.3.9 to 0.4.0, but I'm getting this error when I build the iOS app.

What I did

• Pod install
• Delete and rebuild the app
• Remove derived data folder

[ammarahm-ed]

update your Google Mobile Ads Library to >=8.0.0 in Podfile.

Add these to your Podfile.

pod 'Google-Mobile-Ads-SDK'
pod 'GoogleMobileAdsMediationFacebook'

run pod update Google-Mobile-Ads-SDK

and it will build

[tanwanjern]

I see, but if I upgrade my Google Mobile Ads Library to >=8.0.0 in Podfile, I will be not able to use react-native-admob or react-native-firebase/admob to display banner and interstitial ads

Error from react-native-admob Issue: https://github.com/sbugert/react-native-admob/issues/554

Error from react-native-firebase/admob

[ammarahm-ed]

Then you need to stay on 0.39 for now until they update their library to support the new version. @tanwanjern

[Hassan709]

undefined is not an object (evaluating '_utils.AdOptions.mediaAspectRatio[this.props.mediaAspectRatio]') in react-native-admob-native-ads

[Hassan709]

whats an issue please tell me i can use version 0.0.4 library

[Hassan709]

Getting this error on android =>Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[Hassan709]

there are multiple issues in 0.4.0

[ammarahm-ed]

@Hassan709 post your implementation of the library here. The code. Also check the example app since everything is working in the example.

Also make sure after upgrade you have read the migration guide and followed it. It's in the new docs

Edit: also clear your node_modules folder once and install library again.

[Hassan709]

i can use updated library but could not work for me.

[Hassan709]

i can also read migration guide and followed it.

[ammarahm-ed]

Compare your implementation with the example or post your code here. @Hassan709

[Hassan709]

ok

[Hassan709]

when i can install this lib [Error: undefined Unable to resolve module ./src/MediaView from node_modules\react-native-admob-native-ads\index.js:

[ammarahm-ed]

@Hassan709 If you read the Migration Guide. It says MediaView has been renamed to NativeMediaView

[Hassan709]

@ammarahm-ed Thanks for Replying .... I can implements 0.4.0 library but issues is that when i can switch to next screen native ads is reload. I want ads is load before rendering screen. And when screen navigate immediately shown an ads not coming delay.

[ammarahm-ed]

@ammarahm-ed Thanks for Replying .... I can implements 0.4.0 library but issues is that when i can switch to next screen native ads is reload. I want ads is load before rendering screen. And when screen navigate immediately shown an ads not coming delay.

Not possible. The ad loads from server so it will take time. No preloading

[Hassan709]

so you ca handle this from loader

[Hassan709]

My boss requirement is ads pre load i can try from 5 days but fails. please help me thanks

[Hassan709]

can i apply shimmer on container ?

[Hassan709]

place of loading

[Hassan709]

@ammarahm-ed where we can apply shimmer place of loading tell me please import React, { useEffect, useRef, useState } from 'react'; import { ActivityIndicator, DeviceEventEmitter, Text, View } from 'react-native'; import NativeAdView, { AdvertiserView, CallToActionView, HeadlineView, IconView, StarRatingView, StoreView, TaglineView, } from 'react-native-admob-native-ads'; import Shimmer from 'react-native-shimmer'; import { Events } from '../utils'; const NativeAds = React.memo(({ index, loadOnMount = true }) => { const [aspectRatio, setAspectRatio] = useState(1.5); const [loading, setLoading] = useState(false); const [loaded, setLoaded] = useState(false); const [error, setError] = useState(false); const nativeAdRef = useRef();

const onAdFailedToLoad = (event) => {
    setError(true);
    setLoading(false);
    console.log('AD', 'FAILED', event.error.message);
};

const onAdLoaded = () => {
    console.log('AD', 'LOADED', 'Ad has loaded successfully');
};

const onAdClicked = () => {
    console.log('AD', 'CLICK', 'User has clicked the Ad');
};

const onAdImpression = () => {
    console.log('AD', 'IMPRESSION', 'Ad impression recorded');
};

const onUnifiedNativeAdLoaded = (event) => {
    console.log('AD', 'RECIEVED', 'Unified ad  Recieved', event);
    setLoading(false);
    setLoaded(true);
    setError(false);
    setAspectRatio(event.aspectRatio);
};

const onAdLeftApplication = () => {
    console.log('AD', 'LEFT', 'Ad left application');
};

const onViewableItemsChanged = (event) => {
    let viewableAds = event.viewableItems.filter(
        (i) => i.key.indexOf('ad') !== -1,
    );

    viewableAds.forEach((adView) => {
        if (adView.index === index && !loaded) {
            setLoading(true);
            setLoaded(false);
            setError(false);
            console.log('AD', 'IN VIEW', 'Loading ' + index);
            nativeAdRef.current?.loadAd();
        } else {
            if (loaded) {
                console.log('AD', 'IN VIEW', 'Loaded ' + index);
            } else {
                console.log('AD', 'NOT IN VIEW', index);
            }
        }
    });
};

useEffect(() => {
    if (!loadOnMount) {
        DeviceEventEmitter.addListener(
            Events.onViewableItemsChanged,
            onViewableItemsChanged,
        );
    }

    return () => {
        if (!loadOnMount) {
            DeviceEventEmitter.removeListener(
                Events.onViewableItemsChanged,
                onViewableItemsChanged,
            );
        }
    };
}, [loaded]);

useEffect(() => {
    if (loadOnMount) {
        setLoading(true);
        setLoaded(false);
        setError(false)
        nativeAdRef.current?.loadAd();
    }
    return () => {
        setLoaded(false);
    };
}, []);

return (
    <View
        style={{
            backgroundColor: 'green',
            width: '100%',
            alignItems: 'center',
        }}>
        <NativeAdView
            ref={nativeAdRef}
            onAdLoaded={onAdLoaded}
            onAdFailedToLoad={onAdFailedToLoad}
            onAdLeftApplication={onAdLeftApplication}
            onAdClicked={onAdClicked}
            onAdImpression={onAdImpression}
            onUnifiedNativeAdLoaded={onUnifiedNativeAdLoaded}
            style={{
                width: '98%',
                alignSelf: 'center',
            }}
            adUnitID=""
        >
            <View
                style={{
                    width: '100%',
                    alignItems: 'center',
                }}>
                {loading && <Shimmer>

                <View
                    style={{
                        width: '100%',
                        height: "100%",
                        backgroundColor: '#fff',
                        position: 'absolute',
                        justifyContent: 'center',
                        alignItems: 'center',
                        opacity: !loading && !error && loaded ? 0 : 1,
                        zIndex: !loading && !error && loaded ? 0 : 10
                    }}>
                    {/* {loading && <Shimmer />} */}
                    {error && <Text style={{ color: '#a9a9a9' }}>:-(</Text>}
                </View>
                </Shimmer>}
                <View
                    style={{
                        height: 100,
                        width: '100%',
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        paddingHorizontal: 10,
                        opacity: loading || error || !loaded ? 0 : 1,
                    }}>
                    <IconView
                        style={{
                            width: 60,
                            height: 60,
                        }}
                    />
                    <View
                        style={{
                            width: '60%',
                            maxWidth: '60%',
                            paddingHorizontal: 6,
                        }}>
                        <HeadlineView
                            hello="abc"
                            style={{
                                fontWeight: 'bold',
                                fontSize: 13,
                            }}
                        />
                        <TaglineView
                            numberOfLines={2}
                            style={{
                                fontSize: 11,
                            }}
                        />
                        <AdvertiserView
                            style={{
                                fontSize: 10,
                                color: 'gray',
                            }}
                        />

                        <View
                            style={{
                                flexDirection: 'row',
                                alignItems: 'center',
                            }}>
                            <StoreView
                                style={{
                                    fontSize: 12,
                                }}
                            />
                            <StarRatingView
                                starSize={12}
                                fullStarColor="orange"
                                emptyStarColor="gray"
                                containerStyle={{
                                    width: 65,
                                    marginLeft: 10,
                                }}
                            />
                        </View>
                    </View>

                    <CallToActionView
                        style={{
                            minHeight: 45,
                            paddingHorizontal: 12,
                            justifyContent: 'center',
                            alignItems: 'center',
                            elevation: 10,
                            maxWidth: 100,
                            width: 80
                        }}
                        buttonAndroidStyle={{
                            backgroundColor: '#00ff00',
                            borderRadius: 5,
                        }}
                        allCaps
                        textStyle={{
                            fontSize: 13,
                            flexWrap: 'wrap',
                            textAlign: 'center',
                        }}
                    />
                </View>
            </View>
        </NativeAdView>
    </View>
);

}); export default NativeAds;

[Hassan709]

here is my code

[ammarahm-ed]

Ads cannot be preloaded using this library at the moment

[Hassan709]

ok but my android developer friends implements this in android

[ammarahm-ed]

Its possible but not implemented in this library as of yet.

[Hassan709]

Ok

On Mon, 8 Mar 2021, 10:00 PM Ammar Ahmed, notifications@github.com wrote:

Its possible but not implemented in this library as of yet.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ammarahm-ed/react-native-admob-native-ads/issues/130#issuecomment-792901818, or unsubscribe https://github.com/notifications/unsubscribe-auth/AO4HFZXR6W3SNNTTP6YNIJ3TCT7D7ANCNFSM4YSYK3IQ .

[devGuerra]

Any solution to use firebase adbmob and native-ads ?

[tanwanjern]

Any solution to use firebase adbmob and native-ads ?

I think the only way is to downgrade the version of the native ad to 0.3.9 "react-native-admob-native-ads": "^0.3.9",

https://github.com/ammarahm-ed/react-native-admob-native-ads/tree/v0.3.9

[huyhai]

same, i am using 0.4.0 no migration and using firebase adbmob together with this lib

[haresh4d]

@ammarahm-ed I am using 0.3.9 version of this library because I have to use react-native-admob for Interstitial ads. Problem is in iOS 14.2 native ads are not shown. Interstitial and banners works just fine. Please help me.

[OooCleMooO]

Update Podfile with pod 'Google-Mobile-Ads-SDK', '~> 8.4.0' then pod install fixed this issue for me.

[Berezhnov]

Hey guys, I installed Google-Mobile-Ads-SDK 8.4.0 and 0.4.0 library version. I have such errors. Did anyone get the same?

[ammarahm-ed]

A month ago i updated the lib with the new api in v8.0.0 with a sh*t ton of breaking changes. And then again, they changed the api. I mean who does that honestly.....

Maybe we should go back go 7.69 until google is done playing around.

[Berezhnov]

A month ago i updated the lib with the new api in v8.0.0 with a sh*t ton of breaking changes. And then again, they changed the api. I mean who does that honestly.....

Maybe we should go back go 7.69 until google is done playing around.

switched to 0.3.8. and 7.69. it is working both on android and ios

[ammarahm-ed]

A month ago i updated the lib with the new api in v8.0.0 with a sh*t ton of breaking changes. And then again, they changed the api. I mean who does that honestly.....

Maybe we should go back go 7.69 until google is done playing around.

switched to 0.3.8. and 7.69. it is working both on android and ios

I will release a new version that downgrades the google mobile ads sdk to 7.69

[Berezhnov]

A month ago i updated the lib with the new api in v8.0.0 with a sh*t ton of breaking changes. And then again, they changed the api. I mean who does that honestly..... Maybe we should go back go 7.69 until google is done playing around.

switched to 0.3.8. and 7.69. it is working both on android and ios

I will release a new version that downgrades the google mobile ads sdk to 7.69

btw, you did amazing work!

[ammarahm-ed]

A month ago i updated the lib with the new api in v8.0.0 with a sh*t ton of breaking changes. And then again, they changed the api. I mean who does that honestly.....

Maybe we should go back go 7.69 until google is done playing around.

switched to 0.3.8. and 7.69. it is working both on android and ios

It's working but lacks a lot of optimizations and issues that were fixed in 0.4.0

[haresh4d]

A month ago i updated the lib with the new api in v8.0.0 with a sh*t ton of breaking changes. And then again, they changed the api. I mean who does that honestly..... Maybe we should go back go 7.69 until google is done playing around.

switched to 0.3.8. and 7.69. it is working both on android and ios

I will release a new version that downgrades the google mobile ads sdk to 7.69

Please do it. We really need it.

[ammarahm-ed]

@haresh4d & @Berezhnov I have downgraded the lib version on master branch. try the master branch in your project. Make sure you follow the guidelines to load ad in v0.4.0

yarn add https://github.com/ammarahm-ed/react-native-admob-native-ads#master

Update your podfile:

  pod 'Google-Mobile-Ads-SDK', '7.69.0' #can be any version you require below 8.0.0
  pod 'GoogleMobileAdsMediationFacebook', '6.2.1.0'

then run pod install

cd ios && pod install

[haresh4d]

@haresh4d & @Berezhnov I have downgraded the lib version on master branch. try the master branch in your project. Make sure you follow the guidelines to load ad in v0.4.0

yarn add https://github.com/ammarahm-ed/react-native-admob-native-ads#master

Update your podfile:

  pod 'Google-Mobile-Ads-SDK', '7.69.0' #can be any version you require below 8.0.0
  pod 'GoogleMobileAdsMediationFacebook', '6.2.1.0'

then run pod install

cd ios && pod install

Working like a charm. Thank you @ammarahm-ed

[hari-react]

ios
pod 'Google-Mobile-Ads-SDK', pod 'GoogleMobileAdsMediationFacebook', package is added in podfile. and I tried Both pod install and pod install --repo -update. but package is not installed. error install GoogleMobileAdsMediationFacebook'

please help

[hari-react]

ios pod 'Google-Mobile-Ads-SDK', pod 'GoogleMobileAdsMediationFacebook', package is added in podfile. and I tried Both pod install and pod install --repo -update. but package is not installed. error install GoogleMobileAdsMediationFacebook'

please help