Create advanced example using the moduleProvider block

[dsibiski]

The example can be the same as "Native Modal With RN Navigation", however, instead of using a "Coordinator" delegate, let's create a new bridge and pass in the instance of the container view controller via the moduleProvider block.

For example:

RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation 
                                          moduleProvider:^ NSArray *{
                                            return @[self];
                                          }
                                           launchOptions:nil];

RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName: @"MyModule"];

[dsibiski]

@bnookala This is another way to possibly solve the issues you were having in here: facebook/react-native#2453

Also you can see a refined example of what I suggested to you previously. The 1st example in the "Advanced" section of this repo. However, I have a feeling there is still a better implementation out there.

Were you able to come up with anything else?

[bnookala]

@dsibiski After playing around with your pull request from a few weeks ago and some independent work, I came up with this solution:https://github.com/bnookala/ReactNativeExportMethod/tree/react-bridge-experiment

I wanted to be explicit about the bridge binding, so I added a constructor that would take the viewController and the bridgeModule's name:

_reactView = [[MyReactView alloc]
                      initWithFrame:CGRectMake(0, 10, 320, 480)
                      viewController:self
                      bridgeModule:[ViewControllerBridge bridgeName]];

Since importing the bridge module header into the view controller creates an instance of the bridge module itself, it was fairly straightforward to just assign the view controller of the specific bridge module to be the controller I was looking for:

- (instancetype)initWithFrame:(CGRect)frame
               viewController:(UIViewController *)controller
                 bridgeModule:(NSString *)bridgeModule {

    if (self = [self initWithFrame:frame]) {
        ((ReactBridge *)self.rootView.bridge.modules[bridgeModule]).viewController = controller;
    }

    return self;
}

The only "problem" is that every view controller that wants to interact with a react view will need its own bridge module (ie; MyViewControllerBridge, OtherViewControllerBridge, FriendsViewControllerBridge, etc.), and import it explicitly. Not a huge issue yet given how few views react native views we've got in our app (two so far) - but something to consider.

I'll keep playing around with it though!

[dsibiski]

@bnookala Wow, great work! This is very interesting indeed. I like how your getting the moduleName from the class of the module itself.

Would you mind if I perhaps used some of this in my examples? (with attribution of course)

[bnookala]

@dsibiski yeah, absolutely! Would be more than happy to help continue working on this too :)

[idibidiart]

@dsibiski so your ModalWithNavigatorExample works great, and I'm wondering what are the issues with it that would prompt further work or different approaches...? Curious!! :) Thanks!

[dsibiski]

@idibidiart Haha, well, just to see what I can do to make it cleaner and less likely for developers to get stuck and make mistakes. Also, perhaps putting out other examples of what smart people like @bnookala have done, will get other smart people (like yourself) thinking and contributing. :)

[idibidiart]

Oh, yeah makes sense @dsibiski @bnookala :)

In fact, the best way I could help beyond my view on the architecture of an "Objective-C Managed" hybrid app, which I had discussed with you previously, is by asking a lot of noob and potentially dumb questions! :) So let's start with that!

Here is what I did yesterday:

In order for me to have two separate entry points from the Objective-C view into my contrived "Single RN Flow" and "Multiple RN Flows" examples, which for the sake of the demo I'm showing as list items on the starting screen but could be in completely different parts of the Objective-C app in the actual integration scenario, I created copies of ModalWithNavigatorViewController .h and .m with suffixes 1 and 2 (later on will give them meaningful names like SingleFlowModal and MultipleFlowsModal) and changed the names of the interface/implementation within them the same way, then I added these modals as selectable menu items in MenueViewController.m and forked ModalWithNavigator.js into two versions implementing the two scenarios (Single RN Flow and Multiple RN Flows) and now I have the ability to launch into two different types of RN flows, the first one starting with a screen that let's you select between Flow A and Flow B and the other one putting you straight into its single flow. They both use the same Coordinator to close their modal.

That works for me, but I'm wondering if I did it right?

Demo: http://i.imgur.com/wxF9A5t.gif

[dsibiski]

@idibidiart Yeah, that works. In fact, I had considered naming that Coordinator to be something like ModalDismissalCoordinator since really it could be used for any ViewController that wanted to use it, they can be generic, not needing to only mirror the functionality of a single ViewController.

Very nice. 👍

[dustturtle]

I am so glad to see this! Are you still working around the topic? Will this github repo be updated further?
(The latest update is 10 months ago). Thank you! @dsibiski

[dsibiski]

@dustturtle Thanks for the kind words! I do have plans to update this repo to the latest version of RN (and maybe include Android) but just haven't found the time. Most of the techniques here are still relevant though.