Today I happen to be taking another stab at experimenting with External Component’s for my organization’s React Native Navigation app, and I found myself digging through my GitHub repos for the working example app I created demonstrating how to add External Component’s to a React Native Navigation app. So I thought maybe I should write up a quick blog post on the topic for my own personal reference or to possibly help someone else out there trying to figure this out.
First, I must say that I didn’t actually write this example app! For the most part, the code all comes from Wix’s “playground” app contained in the main React Native Navigation GitHub repo. However, I found that Wix’s documentation for how to add External Component’s wasn’t really all that helpful, and I couldn’t get the actual “playground” app to compile on my machine. Thus the need for this blog post and my example app.
So pretty much what I have is a fairly bare React-Native app that I created using react-native init. Then, I referenced Wix’s “playground” app’s source code and added the logic to my example app. This was how I was able to get all of this to work. So if you also are having a hard time getting External Component’s to work by referencing the docs, and also can’t get the playground app to compile, check out my example app on GitHub: RNNExternalComponentApp
UPDATE (Friday August 5th, 2022): I had to do this again today for work, but this time I needed to be able to register the external component using Swift. If you need to do this using Swift, you can create an Objective-C function and then export it back to Swift if you need to register an external component from Swift. Here is my HOW TO on doing this:
I figured out how to do this. Instead of converting the code snippet from Objective-C to Swift, you can wrap the code snippet in your own Objective-C function, then export that function back to Swift. In case anyone else runs into this issue, here is my code:
In your bridging header (yourapp-Bridging-Header):
| #import "RNNUtility.h" |
RNNUtility.h
| // | |
| // RNNUtility.h | |
| // yourapp | |
| // | |
| // Created by Christopher Pedersen on 8/5/22. | |
| // Copyright © 2022 Super Sweet Co. All rights reserved. | |
| // | |
| #ifndef RNNUtility_h | |
| #define RNNUtility_h | |
| void registerExternalComponent(NSString *componentName, UIViewController *viewController); | |
| #endif /* RNNUtility_h */ |
RNNUtility.m
| // | |
| // RNNUtility.m | |
| // yourapp | |
| // | |
| // Created by Christopher Pedersen on 8/5/22. | |
| // Copyright © 2022 Super Sweet Co. All rights reserved. | |
| // | |
| #import <Foundation/Foundation.h> | |
| #import <ReactNativeNavigation/ReactNativeNavigation.h> | |
| void registerExternalComponent(NSString *componentName, UIViewController *viewController) { | |
| [ReactNativeNavigation | |
| registerExternalComponent:componentName | |
| callback:^UIViewController *(NSDictionary *props, RCTBridge *bridge) { | |
| return viewController; | |
| }]; | |
| } |
YourCode.swift
| let externalComponentName = "YourComponentName" | |
| let viewController = YourViewController() | |
| registerExternalComponent(externalComponentName, viewController) |