A Working Example of React Native Navigation External Components

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
// 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 */
view raw RNNUtility.h hosted with ❤ by GitHub


// 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) {
callback:^UIViewController *(NSDictionary *props, RCTBridge *bridge) {
return viewController;
view raw RNNUtility.m hosted with ❤ by GitHub


let externalComponentName = "YourComponentName"
let viewController = YourViewController()
registerExternalComponent(externalComponentName, viewController)
view raw YourCode.swift hosted with ❤ by GitHub