React-native-firebase: 🔥 [🐛] inAppMessaging - campaign banner is not rendered properly sometimes

[Mkolakoglu]

Issue

I am trying to use inAppMessage with an in-app-messaging banner campaign. However, it's not rendering the content sometimes. When this happen, it also becomes unclickable. I couldn't find a reliable method to reproduce this, just occurring randomly.

Here is how it looks when not rendered properly:

Here is how it supposed to look:

Thanks in advance for your help!

Project Files

Javascript

Click To Expand

#### `package.json`:

        "@react-native-firebase/analytics": "^7.4.1",
        "@react-native-firebase/app": "^8.3.0",
        "@react-native-firebase/auth": "^8.3.1",
        "@react-native-firebase/crashlytics": "^8.3.0",
        "@react-native-firebase/database": "^7.4.1",
        "@react-native-firebase/dynamic-links": "^7.4.1",
        "@react-native-firebase/in-app-messaging": "^7.3.1",
        "@react-native-firebase/messaging": "^7.6.1",
        "@react-native-firebase/remote-config": "^8.1.1",

#### `firebase.json` for react-native-firebase v6:

# N/A

### iOS

Click To Expand

#### `ios/Podfile`: - [ ] I'm not using Pods - [x] I'm using Pods and my Podfile looks like:

pod 'Fabric', '~> 1.10.1'
pod 'Bolts'
pod 'AppsFlyerFramework'

# Uncomment the next line to define a global platform for your project
platform :ios, '10.0'
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
permissions_path = '../node_modules/react-native-permissions/ios'

target projectName do
  # Pods for projectName
  config = use_native_modules!
  use_react_native!(:path => config["reactNativePath"])

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
  pod 'RNAppleAuthentication', :path => '../node_modules/@invertase/react-native-apple-authentication'

  # Not autolinked on purpose
  # https://github.com/react-native-community/react-native-permissions
  pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications.podspec"

  use_native_modules!
  use_flipper!
end

post_install do |installer|
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable flipper pods and the below line.
use_flipper!
flipper_post_install(installer)

installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
    end
  end
 end

#### `AppDelegate.m`:

#import <Firebase.h>
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[FIRApp configure];
...
}

---

Android

Click To Expand

#### Have you converted to AndroidX? - [ ] my application is an AndroidX application? - [ ] I am using `android/gradle.settings` `jetifier=true` for Android compatibility? - [ ] I am using the NPM package `jetifier` for react-native compatibility? #### `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

Click To Expand

**`react-native info` output:**

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 123.58 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.2/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /Users/mustafakolakoglu/.rvm/rubies/ruby-2.7.0-preview1/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 12.0/12A7209 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.4 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

- **Platform that you're experiencing the issue on**: - [ ] iOS - [ ] Android - [X] **iOS** but have not tested behavior on Android - [ ] **Android** but have not tested behavior on iOS - [ ] Both - **`react-native-firebase` version you're using that has this issue:** - `6.28.1` - **`Firebase` module(s) you're using that has the issue:** - `in-app-messaging` - **Are you using `TypeScript`?** - `N`

---

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[mikehardy]

Hi there! I need you to update to the current version of all @react-native-firebase modules, and (assuming this is iOS only? You don't mention what platform it is happening on) make sure you use firebase-ios-sdk 6.34.0 with a fresh pod install then re-attempt to reproduce. We'll need a regular reproduction if possible. You may also try looking in the firebase-ios-sdk issues list (they are on github as well) as this will likely be an upstream problem

[Mkolakoglu]

Hi, thanks for quick response!

I ticked this option iOS but have not tested behavior on Android, sorry for not mentioning to platform. Yes, it's occurring on iOS but I haven't test it on Android yet. We are using firebase-ios-sdk 6.28.1 currently. I will try to update all modules and firebase-ios-sdk as you said and will write the results here.

Unfortunately, I couldn't find any way to reproduce it regularly. It's just happening on random trials.

I also checked firebase-ios-sdk issues but couldn't find anything so far.

[Mkolakoglu]

Hi again,

I updated all the modules and firebase-ios-sdk (to 6.34.0) but I am still facing this issue 😞
Here are the versions of the modules that I am using:

```
"@react-native-firebase/analytics": "^7.6.8",
"@react-native-firebase/app": "^8.4.6",
"@react-native-firebase/auth": "^9.3.1",
"@react-native-firebase/crashlytics": "^8.4.11",
"@react-native-firebase/database": "^7.5.12",
"@react-native-firebase/dynamic-links": "^7.5.10",
"@react-native-firebase/iid": "^7.4.9",
"@react-native-firebase/in-app-messaging": "^7.5.7",
"@react-native-firebase/messaging": "^7.9.1",
"@react-native-firebase/remote-config": "^9.0.11",

[Mkolakoglu]

The issue is also producible for other campaign variants. I tried to Modal campaign and the view is moved to top corner of the screen and like the other one, the texts weren't shown:

[mikehardy]

Most strange, I'm sorry I don't have more to tell you but without a clean reproduction it's hard to say. The best I can recommend is to remove react-native-firebase as a possible source of error and do the minimal possible reproduction with the firebase-ios-sdk quickstart to see if it shows up there, if it does then you can obtain google support. If not then doing everything possible to get a reliable reproduction here is important. Perhaps reaching directly into node_modules and adding console logs in the javascript before calling native, then in iOS doing similar where you can add a console output before calling the firebase-ios-sdk APIs just to see what parameters are there going in and what return values come out, and when

https://github.com/firebase/quickstart-ios/tree/master/inappmessaging

and patch-package could be used if you go the instrumentation route - to make your logging changes easy to manage

[fdelavra]

I have the same problem on iOS only. But i work with firebase cloud messaging too. Is there an incompatibility between cloud messaging and in app messaging?
Does the problem could be from the ask notification authorization from cloud messaging?

[stale[bot]]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.