React-native-firebase: Banner on iOS crash

[arinconc]

Admob Banner component fails only in iOS. Interstitial and Rewarded Video works fine!.

Trying this code:
```
import { Platform } from 'react-native';

render() {
const Banner = firebase.admob.Banner;
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();
const unitId =
  Platform.OS === 'ios'
    ? 'ca-app-pub-3940256099942544/2934735716'
    : 'ca-app-pub-3940256099942544/2934735716';
return (
    <Banner
      unitId={unitId}
      size={'SMART_BANNER'}
      request={request.build()}
      onAdLoaded={() => {
        console.log('Advert loaded');
      }}
    />
);
```

Error in Xcode:

---

Project Files

packages.json:

  "dependencies": {
    "eslint-plugin-jest": "^22.3.0",
    "i18n-js": "^3.2.1",
    "prop-types": "^15.7.2",
    "react": "16.6.3",
    "react-native": "0.58.4",
    "react-native-firebase": "^5.2.3",
    "react-native-gesture-handler": "^1.0.15",
    "react-native-localize": "^1.0.2",
    "react-native-vector-icons": "^6.3.0",
    "react-navigation": "^3.2.3",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "24.1.0",
    "eslint": "^5.13.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },

iOS

ios/Podfile:

• [ ] I'm not using Pods
• [x] I'm using Pods and my Podfile looks like:

  pod 'Firebase/Core', '5.15.0'
  pod 'Firebase/Auth', '5.15.0'
  pod 'Firebase/AdMob', '5.15.0'
  pod 'Firebase/Storage', '5.15.0'
  pod 'Firebase/Firestore', '5.15.0'

AppDelegate.m:

#import <Firebase.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];

---

Android

android/build.gradle:

// N/A

android/app/build.gradle:

// N/A

android/settings.gradle:

// N/A

MainApplication.java:

// N/A

AndroidManifest.xml:

<!-- N/A -->

---

Environment

• Platform that you're experiencing the issue on:
  
  
  
  • [x] iOS
  
  
  • [ ] Android
  
  
  • [ ] iOS but have not tested behavior on Android
  
  
  • [ ] Android but have not tested behavior on iOS
  
  
  • [ ] Both
  
  
• If known, the version of the platform are you experiencing the issue on:
  
  
  
  • ADD_SOMETHING_HERE e.g. iOS 10 or Android API 28
  
  
• Operating System:
  
  
  
  • [x] MacOS, version: N/A
  
  
  • [ ] Windows, version: N/A
  
  
  • [ ] Other, please specify: N/A
  
  
• Build Tools:
  
  
  
  • ADD_SOMETHING_HERE e.g. Xcode 10, Android Studio 3.2
  
  
• React Native version:
  
  
  
  • ADD_SOMETHING_HERE
  
  
• React Native Firebase library version:
  
  
  
  • ADD_SOMETHING_HERE
  
  
• Firebase module(s) you're using that has the issue:
  
  
  
  • [x] N/A
  
  
  • [x] AdMob
  
  
  • [x] Authentication
  
  
  • [ ] Analytics
  
  
  • [ ] Cloud Firestore
  
  
  • [ ] Cloud Messaging (FCM)
  
  
  • [ ] Crashlytics
  
  
  • [ ] Dynamic Links
  
  
  • [ ] Functions Callable
  
  
  • [ ] In App Messaging
  
  
  • [ ] Indexing
  
  
  • [ ] Invites
  
  
  • [ ] Instance ID
  
  
  • [ ] ML Kit
  
  
  • [ ] Notifications
  
  
  • [ ] Performance Monitoring
  
  
  • [ ] Realtime Database
  
  
  • [ ] Remote Config
  
  
  • [x] Storage
  
  
• Are you using TypeScript?
  
  
  
  • [ ] No
  
  
  • [ ] Yes, version: N/A
  
  
• Are you using Expo, e.g. ExpoKit?
  
  
  
  • [x] No
  
  
  • [ ] Yes, I've _not_ ejected
  
  
  • [ ] Yes, but I have ejected to ExpoKit
  
  
  • [ ] Yes, but I have ejected to vanilla React Native
  
  
  • Expo version: N/A
  
  

---

Think react-native-firebase is great? Please consider supporting the project with any of the below:

• 👉 Donate via Open Collective
• 👉 Follow React Native Firebase and Invertase on Twitter
• 👉 Star this repo on GitHub ⭐️
• 👉 Contribute; see our contributing guide

[egunsoma]

me too

[egunsoma]

@arinconc
I'm on Pod version 5.11.0 and react-native-firebase version 5.1.0, so I guess this issue may be version independent.

I just updated my simulators to iOS 12.2, when the Banners stopped working. Have you done the same?

[arinconc]

I think so. My simulators has 12.2 too. Until a few days ago everything worked fine!!. I saw all the banners on iOS and Android. Something has happened, that I can't find, but now on iOS I can't see the banners, crashes and closes the application. With other type of ads, there's no problem, video rewards.
Hopefully we find the solution!

Regards,
Antonio

[egunsoma]

Now I've tried it on an iOS version 12.1 simulator, and the problem is still present.

[egunsoma]

@arinconc any success?
@Ehesp have you seen such error lately?

[arinconc]

@egunsoma Nothing new :( I've reviewed everything several times and I can't find the problem. If I find it, I will send information. If you get it, I thank you for commenting.
Thank you very much and greetings,
Antonio

[peteroid]

I got the same error with my Xcode just updated to 10.2. So I downgraded my Xcode to 10.1 and the banner works again ¯_(ツ)_/¯

[arinconc]

Great @peteroid !! Thank you!
I don't know if I can wait for some solution or try to downgrade Xcode ... I'll think about it.
Regards,
Antonio

[egunsoma]

@arinconc downgrading worked for me, but I dont know what will happen when my iOS 12.2 users open the app. Will it crash for them? So far my app was built for 12.1 and there was no problem for users with 12.2, so I guess this willbe alright as well.

Thank you @peteroid!!!

[arinconc]

Probably the app will crash and close. :(
I wish someone found a solution for iOS 12.2.
Thanks guys!

[HelgiHe]

I'm on 12.2 on my phone and my app works just fine, on fresh install. Still get this error when I build from Xcode.

[arinconc]

Perfect!. Look this issue EXC_BAD_ACCESS (code=1, address=0x10) XCode 10.2 beta
@HelgiHe @egunsoma Do you think is the same problem??

[zek]

I have the same issue and I have Xcode 10.1. This happend after I upgrade RN to 0.59.2

~
React Native Environment Info:
System:
OS: macOS 10.14
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Memory: 284.88 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.12.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 22, 27, 28
Build Tools: 25.0.2, 27.0.3, 28.0.3
System Images: android-19 | Google APIs Intel x86 Atom, android-21 | Google APIs Intel x86 Atom_64, android-22 | Google APIs ARM EABI v7a, android-22 | Google APIs Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.1 AI-173.4697961
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.2 => 0.59.2
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native-rename: 2.2.2
~

[jpm8888]

Same issue after upgrading Xcode to 10.2

[joe-lz]

Same issue after upgrading Xcode to 10.2
same issue with xcode 10.2

[JeffGuKang]

It looks caused by cannot call onBannerEvent in XCode 10.2.

RNFirebase.xcodeproj/admob/BannerComponent.m

- (void)sendEvent:(NSString *)type payload:(NSDictionary *_Nullable)payload {
    self.onBannerEvent(@{
            @"type": type,
            @"payload": payload != nil ? payload : [NSNull null],
    });
}

[akuznetsov-md]

If it blocks your release you may open node_modules/react-native-firebase/ios/RNFirebase/admob/BannerComponent.m and wrap self.onBannerEvent like this:

- (void)sendEvent:(NSString *)type payload:(NSDictionary *_Nullable)payload {
    if (self.onBannerEvent) {
        self.onBannerEvent(@{
                @"type": type,
                @"payload": payload != nil ? payload : [NSNull null],
        });
    }
}

[lainguyen92]

I

If it blocks your release you may open node_modules/react-native-firebase/ios/RNFirebase/admob/BannerComponent.m and wrap self.onBannerEvent like this:

- (void)sendEvent:(NSString *)type payload:(NSDictionary *_Nullable)payload {
    if (self.onBannerEvent) {
        self.onBannerEvent(@{
                @"type": type,
                @"payload": payload != nil ? payload : [NSNull null],
        });
    }
}

I followed up this. then my banner is broken layout. Please help on it. I have attached the image too.
Previous version without this issue

[akuznetsov-md]

@lainguyen92 try to wrap Banner in View with same size:

<View style={{ width, height }}>
  <Banner size={`${width}x${height}`} />
</View>

[mars-lan]

@akuznetsov-md Setting size of Banner didn't work for me, but setting style did.

<View style={{ width, height }}>
  <Banner style={{ width, height }} size="SMART_BANNER" />
</View>

[JeffGuKang]

I am using this way to resolve this issue temporarily.

in node_modules/react-native-firebase/ios/RNFirebase/admob/BannerComponent.m

- (void)sendEvent:(NSString *)type payload:(NSDictionary *_Nullable)payload {
    if (self.onBannerEvent) {
        self.onBannerEvent(@{
                @"type": type,
                @"payload": payload != nil ? payload : [NSNull null],
        });
    }
}

and

    const width = Dimensions.get('window').width;
    const height = 50;
    const style = [{ width, height, top: 0, left: 0 }];

    return (
        <View style={[Platform.OS == 'ios' && {height}, { alignSelf: 'stretch' }]}>
            <Banner style={Platform.OS == 'ios' && style} ... />
        </View>
    );

[lainguyen92]

Thanks Guys.

But I just tested simpler way and worked :)
style={{top: 0, left: 0}}

[Salakar]

Hey all, please can you try the following version; 'should' be fixed:

npm install [email protected]

Let me know the result so I can publish, as this version isn't fully published yet and is only on the 'next' tag.

[rarira]

Hey all, please can you try the following version; 'should' be fixed:

npm install [email protected]

Let me know the result so I can publish, as this version isn't fully published yet and is only on the 'next' tag.

same result as @lainguyen92 's screen (broken layout)
but can be fixed with @lainguyen92 's solution

[Salakar]

@rarira thanks for testing, at least it's not crashing now, so it's some progress.

I can't actually test the layout issue as I cannot upgrade my Mac OSX version right now (I need to update it to be able to install Xcode 10.2 which has the 12.2 sim) and the layout works fine for me on Xcode 10.1 + iOS 12.1.

If someone has a Xcode 10.2 install and a 12.2 sim ready and doesn't mind me quickly debugging on their machine via TeamViewer or something please let me know on Discord DMs(Salakar#1337) or Twitter DMs (@mikediarmid).

Off topic: some big (but good) updates coming to Admob for v6, I realise it hasn't received as much attention as it should have and I'm sorry about that; now that I'm pretty much working on RNFB full time that will change 🤗

---

Alternatively, so I don't have to re-install my OS everytime OSX updates; if someone wants to sponsor me an iMac Mini to work on... 😅 please do 😆

[Salakar]

Right; the second attempt - just guessing here though because of the above, but; please try this version;

npm i [email protected]

[rarira]

Right; the second attempt - just guessing here but please try this version;

npm i [email protected]

@Salakar thanks for your effort and
as far as I can tell, there is no problem at all this time
👍👍

[Salakar]

@rarira awesome, that was a random shot in the dark - so I'm glad it worked 😅

I'll publish a full 5.2.5 release next week - but feel free to keep using the 5.2.5-rc0 version as it's what 5.2.5 will be deployed with anyway.

[jpm8888]

npm i [email protected]

After updating to 5.2.5-rc0

in iOS it is working fine.
but in android all medium rectangle is messed up.

PFA

[rarira]

npm i [email protected]

After updating to 5.2.5-rc0

in iOS it is working fine.
but in android all medium rectangle is messed up.

PFA

same as mine...
I'm sorry I'd not tested android ...

[Salakar]

Oki thanks for letting me know, should be fairly trivial to fix Android, this event: https://github.com/invertase/react-native-firebase/commit/5dad3a026193a5846392f561411ca790d7ebe641#diff-902d2698e0ada9c69df6b4d5c4324f31R75 that updates the size should be wrapped in a Platform iOS only conditional, onSizeChanged = both platforms, onAdLoaded = iOS - could you try change that and let me know. Sorry I can't give a code example, on my phone 🙄

[Salakar]

Ok please, can you try the following release version, should be ok on Android & iOS now;

npm i [email protected]

Thanks for your help testing these. Will close for now as I believe it's solved now; if not I'll re-open.

[rarira]

Ok please, can you try the following release version, should be ok on Android & iOS now;

npm i [email protected]

Thanks for your help testing these. Will close for now as I believe it's solved now; if not I'll re-open.

no problem like before, both on iOS and android

[jpm8888]

Ok please, can you try the following release version, should be ok on Android & iOS now;

npm i [email protected]

Thanks for your help testing these. Will close for now as I believe it's solved now; if not I'll re-open.

Yes, it working now in both platforms,

I was wondering, why onAdLoaded is called multiple times, although I'm using a single banner on page, onAdLoaded is called multiple times.,

I think something is wrong with the ad request, I've checked my admob account, previously I was getting 'x' requests before update (which was in native app, same amount of ads) now I'm getting '5x' requests (give or take).

[tmjordan]

@Salakar Hi man, thanks for your work.
After updating RNFirebase to version 5.2.5 , the crash occurs now on iOS below 12.2 (12.1.4 on my iPhone)
but works well on 12.2
On android, i can't build my project anymore, with that error:

[mikehardy]

failing on notification channel smells like an Android API thing - are you building with the most current API (I'd use 28 for Android) and related libraries pinned in the ext {} block where you set versions in your android/build.gradle? (and then referring to them in android/app/build.gradle? Basically - this looks unrelated to AdMob, and more related to Android versions

[tmjordan]

@mikehardy thanks for your answer, i updated the android api to 28 and now it's working.
But on iOS, now the versions below 12.2 crash, i workarounded it by setting style={{top: 0, left: 0}