Brownfield using xcframework integration

[taboulot]

Objective

My client has an iOS Swift application.
We want to migrate features (1 or more screens) one by one in RN.
We also want to minimize the impact of this integration on the native side.

In order to do so, we are trying to create an xcFramework that embeds all RN dependencies.

Problem

I solved several problems, but the integration of react-native-reanimated is not that easy.

When I launch my app, I have the following error :

The documentation does not specify a clear way to achieve this goal

Note that the auto-installation setup works for the standard React Native apps, if you have problems setting it up with a custom setup (e.g. brownfield) please start a new issue where we can find a way to guide you through that process.

My setup

Dependencies:

• react-native: 0.71.2
• react-native-reanimated: 2.14.4

How I create my RCTRootView in my xcFramework

@implementation ReactNativeMyApp

- (UIViewController *)getApp {
    NSURL *url = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:url moduleName:@"AuthenticationModule" initialProperties:@{} launchOptions:@{}];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    return vc;
}
@end

How I display the RTCRootView in my app

This is done in a random ViewController.

import UIKit
import my_xcframework

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func startAuthenticationModule(_ sender: Any) {
        let MyRNApp = ReactNativeMyApp()
        let vc = MyRNApp.getApp()
        guard let vc = vc else {
            assertionFailure("No ViewController")
            return
        }
        vc.view.frame = UIScreen.main.bounds
        present(vc, animated: false)
    }
    
}

Question

I have found this issue, but it does not fix my issue as i want the bridge to be initialized inside the xcFramework.

I also tried the NSObject tricks. But I have the same error.

Do you have any tips to help me with this issue?
Do you have a procedure to make a proper installation? (with autoinstall disabled)

Thank you 🙏

[taboulot]

I come back with the solution we found.

The main problem is: how to execute the installation code that is normally called automatically?

I'm talking about this:

react-native-reanimated/ios/native/UIResponder+Reanimated.mm

Lines 20 to 30 in 1134b95

	- (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
	{
	const auto installer = reanimated::REAJSIExecutorRuntimeInstaller(bridge, NULL);
	#if REACT_NATIVE_MINOR_VERSION >= 64
	// installs globals such as console, nativePerformanceNow, etc.
	return std::make_unique<ExecutorFactory>(RCTJSIExecutorRuntimeInstaller(installer));
	#else
	return std::make_unique<ExecutorFactory>(installer);
	#endif
	}

Here is the solution we found :

##
# HEADER FILE
##

#ifndef MyBridgeManager_h
#define MyBridgeManager_h
#import <React/RCTBridgeDelegate.h>

# We create our own BridgeDelete
@interface MyBridgeManager : NSObject <RCTBridgeDelegate>

@end

#endif /* MyBridgeManager_h */

##
# IMPLEMENTATION
##

#import "MyBridgeManager.h"
#import <Foundation/Foundation.h>
#import <React/RCTBundleURLProvider.h>
#import <RNReanimated/REAInitializer.h>
#import <RNReanimated/REAUIManager.h>
#import <RNReanimated/UIResponder+Reanimated.h>
#if __has_include(<reacthermes/HermesExecutorFactory.h>)
#import <reacthermes/HermesExecutorFactory.h>
typedef HermesExecutorFactory ExecutorFactory;
#elif __has_include(<React/HermesExecutorFactory.h>)
#import <React/HermesExecutorFactory.h>
typedef HermesExecutorFactory ExecutorFactory;
#else
#import <React/JSCExecutorFactory.h>
typedef JSCExecutorFactory ExecutorFactory;
#endif
#import <React/RCTCxxBridgeDelegate.h>

@interface MyBridgeManager () <RCTCxxBridgeDelegate>
@end

@implementation MyBridgeManager

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

// Important for react-native-reanimated : installation code
- (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
{
  const auto installer = reanimated::REAJSIExecutorRuntimeInstaller(bridge, NULL);

#if REACT_NATIVE_MINOR_VERSION >= 64
  // installs globals such as console, nativePerformanceNow, etc.
  return std::make_unique<ExecutorFactory>(RCTJSIExecutorRuntimeInstaller(installer));
#else
  return std::make_unique<ExecutorFactory>(installer);
#endif
}

And this is how then we instantiate the RCTRootView :

- (UIViewController *)getApp {
    RNMeeticBridgeManager *bridgeManager = [RNMeeticBridgeManager alloc];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:[[RCTBridge alloc] initWithDelegate:bridgeManager launchOptions:@{}] moduleName:@"AuthenticationModule" initialProperties:@{}];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    return vc;
}

To be honest, I do not understand everything, especially the @interface MyBridgeManager () <RCTCxxBridgeDelegate>, but by doing this, it allows us to do "an automatic installation". Indeed the RCTCxxBridgeDelegate interface defines std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge which is called automatically.

---

I have the feeling that it should be done in:

react-native-reanimated/ios/REAModule.mm

Lines 238 to 241 in 1134b95

	RCT_EXPORT_METHOD(installTurboModule)
	{
	// TODO: Move initialization from UIResponder+Reanimated to here
	}

Is there any reason why this method is not implemented? Any challenges on which I can help?

[datns]

Hi @taboulot, I'm going to build my React native app as an SDK and your comment helps me a lot. However, I'm facing issues when archiving the framework with your implementation. Can you give me some advice? Thank you a lot

[madclouds]

Thank you @taboulot! I've been wrestling to integrate reanimated in my brownfield app, and your comment helped lead me to a solution that worked for our setup.

Our brownfield app has an unusual setup where our native code lives up a few directory levels from the react native code. Also, we're adding RCTRootView as a sub-view to our UIViewController view.

Here are the steps that worked:

• Update /node_modules/react-native-reanimated/scripts/reanimated_utils.rb to point to the correct location of React Common - result[:react_native_common_dir] = "../../relative/path/to/node_modules/react-native/ReactCommon"
• Apply the NSObject trick
• Change RCTBridge initialization method to set the delegate: let bridge = RCTBridge(delegate: self), then conform to that delegate - This is what manually triggers reanimated to initialize (Steps to manually initialize reanimated should be added to the docs)

Thanks again for sharing your knowledge!

Hope these notes help someone in the future 💟