Recommand · January 13, 2022 0

iOS Objective C extension popup screen does not show main react native app

I have an extension which pops up on chrome when user press a button on the ios keyboard which should be expected to show our main react native app but instead it shows a blank white screen:

enter image description here

Here is the logic to it, where the button is pressed then triggering openReactNativeApp:

    - (void)openReactNativeApp:(NSDictionary *) appProps
{
    NSMutableDictionary *appPropsFinal = [appProps mutableCopy];
    [appPropsFinal setValue:@true forKey:@"extensionScreen"];

    if (autoFillBridgeDelegate == nil || bridge == nil || rootView == nil) {
        // RN Bridge to display react native App
        autoFillBridgeDelegate = [[AutoFillExtensionContextBridgeDelegate alloc]
                                  initWithExtensionContext:self.extensionContext];

        bridge = [[RCTBridge alloc] initWithDelegate:autoFillBridgeDelegate launchOptions:nil];

        rootView = [[RCTRootView alloc] initWithBridge:bridge
                                            moduleName:[AutoFillExtensionContextBridgeDelegate moduleNameForBridge]
                                     initialProperties:appPropsFinal];

    } else {
        [autoFillBridgeDelegate updateExtensionContext:self.extensionContext];
        [rootView setAppProperties:appPropsFinal];
        [bridge reload];
    }

    self.view = rootView;
}

AutoFillExtensionContextBridgeDelegate.m:

#import <Foundation/Foundation.h>

#import "AutoFillExtensionContextBridgeDelegate.h"

@interface AutoFillExtensionContextBridgeDelegate ()
@property (nonatomic, strong) NSArray *extraModules;
@end

@implementation AutoFillExtensionContextBridgeDelegate
+ (NSString *)moduleNameForBridge
{
    return @"extapp";
}

- (instancetype)initWithExtensionContext:(ASCredentialProviderExtensionContext *)extensionContext
{
    self = [super init];
    if (self)
    {
        AutoFillBridge *autoFillBridgeModule = [[AutoFillBridge alloc] initWithExtensionContext:extensionContext];
        self.extraModules = @[autoFillBridgeModule];
    }

    return self;
}

- (void) updateExtensionContext:(ASCredentialProviderExtensionContext *)extensionContext
{
    [(AutoFillBridge *)self.extraModules[0] setExtensionContext:extensionContext];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
    // return [NSURL URLWithString:@"http://192.168.145.131:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.extapp"];
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
{
    return _extraModules;
}
@end