React Native - send data from native to javascript/bridging

Question

I'm very new to React Native (iOS) and I have read a lot about Bridging, however I cannot seem to make this working.

I need to be able to send an object/string from AppDelegate to JavaScript. My AppDelegate returns a UserName which is retrieved by a native code in one of my methods inside AppDelegate.

I tried to use in AppDelegate.m

#import "RCTBridge.h"
#import "RCTEventDispatcher.h"

and then

@synthesize bridge = _bridge;

and inside my method

  NSString *eventName = notification.userInfo[@"name"];
  [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder"
                                               body:@{@"name": eventName}];

but none of the above works and I'm getting errors. Do I need to do anything to AppDelegate.h as well?

Can anyone please help me? What is the easiest way to sent data from native to javascript?

UPDATE:

I found a workaround, but I don't think it's effective as I'm calling RCTRootView twice. First to load the app with initialProperties nil, like this:

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


 jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];



  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"myApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];



  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  [self getUsername];

}

And for the second time when I retrieve a UserName I then update initialProperties like this:

-(void) getUsername {

    //3rd party code to retrieve the username

            NSString *username = username

      NSURL *jsCodeLocation;

      jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

      RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:nil];

      RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                       moduleName:@"myApp"
                                                initialProperties: @{@"username" : username}];



      self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
      UIViewController *rootViewController = [UIViewController new];
      rootViewController.view = rootView;
      self.window.rootViewController = rootViewController;
      [self.window makeKeyAndVisible];


}

By doing the way above I'm then able to send and receive username via this.props in JavaScript.

But like I said, I'm not sure this is an effective way as I'm calling RCTRootView twice.

Any help is appreciated please.

When is the method you are creating being called? It might be that it is getting called too early and the RN portion of the app has not been initialized? — rmevans9
– rmevans9, Commented Jul 27, 2016 at 11:55
Couldn't you make the getUsername call simply call out to the third party and export getUsername to JavaScript via the bridge and then just call getUsername? When I'm at a machine I'll link some documentation that talks about how to do this. — rmevans9
– rmevans9, Commented Jul 28, 2016 at 9:41

rmevans9 · Accepted Answer · 2016-07-28 10:53:31Z

2

You could, instead of trying to put it in the initial launch code on the iOS side, put it in a Native Module that you export a function to return the information from. See React Natives official documentation on it: https://facebook.github.io/react-native/docs/native-modules-ios.html

answered Jul 28, 2016 at 10:53

rmevans9

5,6831 gold badge23 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

angular_learner Over a year ago

Thank you for suggestion. I was actually thinking of doing that, but for what I need 'sending just one object to javascript' I find it unnecessary. Isn't there an easier way to 'bridge' it and not to call 'rootView' twice?

Collectives™ on Stack Overflow

React Native - send data from native to javascript/bridging

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related