braze-inc / braze-react-native-sdk

Public repo for the Braze React Native SDK
https://www.braze.com
Other
64 stars 84 forks source link

[Bug]: Calling `subscribeToInAppMessage` is still needed to display IAMs on iOS default UI #212

Closed svenlombaert closed 1 year ago

svenlombaert commented 1 year ago

What problem are you facing?

I'm unable to follow the Braze iOS integration guide (upgrading from 1.x appboy-sdk), specifically this part:

  // Setup Braze bridge
  NSURL *jsCodeLocation =
      [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"<YOUR_PROJECT_NAME>"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

  // Configure views in the application
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

react-native-navigation doesn't have the concept of 'one' Rootview. I have a feeling I have a half working integration now. I can see my user data in the braze dashboard and I do receive push notifications when trying out IAM. Once I open the IAM there's nothing displayed, I suspect this is coming because I don't have the above part?

Workarounds

I have no idea of a workaround for now except skipping that part of the installation instructions

Ideal Solution

Make it work with react-native-navigation

Other Information

Currently, my set-up looks like this:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

  self.moduleName = @"Delta";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  RCTAppSetupPrepareApp(application, false);

  #ifdef FB_SONARKIT_ENABLED
    InitializeFlipper(application);
  #endif

  NSURL *documentsDir = [[NSFileManager.defaultManager URLsForDirectory:NSDocumentDirectory inDomains:NSUserDomainMask] firstObject];
  NSLog(@"🚒 Documents path: %@", documentsDir.path);
  NSURL *containerDir = [[ContainerHelper new] containerURL];
  NSLog(@"🚒 Shared container path: %@", containerDir.path);

  NSURLCache.sharedURLCache = [[NSURLCache alloc] initWithMemoryCapacity: 8 * 1024 * 1024 diskCapacity: 60 * 1024 * 1024 diskPath: nil];

  // Needed for Braze
  UNUserNotificationCenter* center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;

  NSString *configuration = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CONFIGURATION"];
  NSString *firebaseConfig = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"GoogleService-Info-%@", configuration] ofType:@"plist"];

  FIROptions *options = [[FIROptions alloc] initWithContentsOfFile:firebaseConfig];
  [FIRApp configureWithOptions:options];

  #if DEBUG
    NSString *brazeApiKey = @"apiKey";
  #else
    NSString *brazeApiKey = @"apiKey";
  #endif

  if (!self.bridge) {
    self.bridge = [self createBridgeWithDelegate:self launchOptions:launchOptions];
  }

  // Setup Braze
  BRZConfiguration *brazeConfig = [[BRZConfiguration alloc] initWithApiKey:brazeApiKey
                                                                     endpoint:@"sdk.fra-01.braze.eu"];
  // - Enable logging and customize the configuration here
  brazeConfig.logger.level = BRZLoggerLevelInfo;
  Braze *braze = [BrazeReactBridge initBraze:brazeConfig];

  AppDelegate.braze = braze;

  [ReactNativeNavigation bootstrapWithBridge:self.bridge];

  [self.window makeKeyAndVisible];

  // [REQUIRED] Register BackgroundFetch
  [[TSBackgroundFetch sharedInstance] didFinishLaunching];

  [RNSplashScreen show];

  return YES;
}
svenlombaert commented 1 year ago

Seems like I got IAM working now by adding this part on the JS side:

Braze.subscribeToInAppMessage(true, (event) => {
      console.log('braze: ', event);
    });

The docs don't mention this though, they say it should go automatically.

Screenshot 2023-05-23 at 09 31 41
hokstuff commented 1 year ago

Hi @svenlombaert,

Thanks for filing this issue with more information. It sounds like the issue you are facing is similar to the one to the end of this larger thread here. It appears that the code here is not being run as expected under certain conditions, which is not causing the default IAM UI to be attached to the Braze instance. We have not yet been able to reproduce this in our sample app but are investigating the root cause.

For now, it looks like calling subscribeToInAppMessage is the best workaround to ensure that the default UI can be used on iOS. I will reword the title of this issue to reflect your updated findings.

Thank you!

jerielng commented 1 year ago

Hi @svenlombaert, we've just released version 6.0.0 of our Braze SDK, which refines the API surface of in-app message subscriptions. This release brings our iOS layer back to the documented behavior, where you do not need to call subscribeToInAppMessage in addition to calling Braze.addListener for in-app message events (you can call either one or the other depending on your use case). Our public documentation on braze.com will be updated over the next day or two to reflect this.

We have also refined our logic to prevent overriding any custom behavior you may have defined in the native iOS layer.

You can refer to our updated sample app for an example integration.

Please let us know if you have any questions. Thank you!