(RN - 0.80.0) - RNN - 8.1.0 - Fixes (Android + iOS)

[manojmehra-spraxa]

What happened?

(RN - 0.80.0) - RNN - 8.1.0 - Fixes (Android + iOS)

What was the expected behaviour?

(RN - 0.80.0) - RNN - 8.1.0 - Fixes (Android + iOS)

Was it tested on latest react-native-navigation?

• I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

(RN - 0.80.0) - RNN - 8.1.0 - Fixes (Android + iOS)

In what environment did this happen?

React Native Navigation version: : "^8.1.0"
React Native version: "0.80.0"
Has Fabric (React Native's new rendering system) enabled: (yes/no) y
Node version: 20

[manojmehra-spraxa]

options/params/ColorParser.kt

package com.reactnativenavigation.options.parsers
import android.content.Context
import com.facebook.react.bridge.ColorPropConverter
import com.reactnativenavigation.options.params.Colour
import com.reactnativenavigation.options.params.DontApplyColour
import com.reactnativenavigation.options.params.NullColor
import com.reactnativenavigation.options.params.ReactPlatformColor
import org.json.JSONObject

object ColorParser {
    private const val KEY_RESOURCE_PATHS = "resource_paths"
    private const val VAL_NO_COLOR = "NoColor"

    @JvmStatic
    fun parse(context: Context?, json: JSONObject, colorName: String?): Colour {
        if (json.has(KEY_RESOURCE_PATHS)) {
            return ReactPlatformColor(JSONParser.convert(json))
        }
        return when (val color = json.opt(colorName)) {
            null, VAL_NO_COLOR -> DontApplyColour()
            is Int -> Colour(json.optInt(colorName))
            is JSONObject -> {
                ColorPropConverter.getColor(color, context ?: throw IllegalArgumentException("Context must not be null"))?.let {
                    Colour(it)
                } ?: NullColor()
            }
            else -> NullColor()
        }
    }
}

[manojmehra-spraxa]

options/params/ReactPlatformColor.kt

package com.reactnativenavigation.options.params

import com.facebook.react.bridge.ColorPropConverter
import com.facebook.react.bridge.ReadableMap
import com.reactnativenavigation.NavigationApplication

private fun parsePlatformColor(paths: ReadableMap): Int {
    return ColorPropConverter.getColor(paths, NavigationApplication.instance) ?: 0 // fallback to black
}

class ReactPlatformColor(private val paths: ReadableMap) :
    Colour(parsePlatformColor(paths)) {

    override fun get(): Int {
        return parsePlatformColor(paths)
    }

    override fun get(defaultValue: Int?): Int {
        return try {
            ColorPropConverter.getColor(paths, NavigationApplication.instance) ?: defaultValue ?: 0
        } catch (e: Exception) {
            defaultValue ?: 0
        }
    }
}

[manojmehra-spraxa]

options/params/ModalContentLayout.kt

package com.reactnativenavigation.react.modal

import android.content.Context
import android.view.MotionEvent
import android.view.View
import com.facebook.react.bridge.ReactContext
import com.facebook.react.uimanager.JSTouchDispatcher
import com.facebook.react.uimanager.RootView
import com.facebook.react.uimanager.UIManagerHelper
import com.facebook.react.uimanager.common.UIManagerType
import com.facebook.react.uimanager.events.EventDispatcher
import com.facebook.react.views.view.ReactViewGroup


class ModalContentLayout(context: Context) : ReactViewGroup(context), RootView {

    private val mJSTouchDispatcher = JSTouchDispatcher(this)

    override fun onChildStartedNativeGesture(childView: View?, ev: MotionEvent) {
        mJSTouchDispatcher.onChildStartedNativeGesture(ev, getEventDispatcher())
    }

    override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
        mJSTouchDispatcher.onChildEndedNativeGesture(ev, getEventDispatcher())
    }

    override fun handleException(t: Throwable) {
    getReactContext().handleException(
        if (t is Exception) t else RuntimeException(t)
    )
}

    override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {}

    private fun getEventDispatcher(): EventDispatcher {
        val reactContext: ReactContext = getReactContext()
        return UIManagerHelper.getEventDispatcher(reactContext, UIManagerType.FABRIC)
            ?: throw IllegalStateException("EventDispatcher for Fabric UI Manager is not found")
    }

    private fun getReactContext(): ReactContext {
        return this.context as ReactContext
    }

    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
        mJSTouchDispatcher.handleTouchEvent(event, getEventDispatcher())
        return super.onInterceptTouchEvent(event)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        mJSTouchDispatcher.handleTouchEvent(event, getEventDispatcher())
        super.onTouchEvent(event)
        return true
    }
}

[manojmehra-spraxa]

iOS Fixes also available if you need comment here

[kamiranoff]

@manojmehra-spraxa would love to see the ios fix if you have one!

[apponthebeach]

iOS Fixes also available if you need comment here

Thanks a lot for that. Yes the iOS fixes would help a lot ! :)

[manojmehra-spraxa]

react-native-navigation/lib/ios/RNNAppDelegate.mm

#import "RNNAppDelegate.h"
#import <ReactNativeNavigation/ReactNativeNavigation.h>

#import "RCTAppSetupUtils.h"
#import <React/CoreModulesPlugins.h>
#import <React/RCTCxxBridgeDelegate.h>
#import <React/RCTLegacyViewManagerInteropComponentView.h>
#import <React/RCTSurfacePresenter.h>
#import <React/RCTSurfacePresenterStub.h>
#import <React/RCTSurfacePresenterBridgeAdapter.h>
#import <ReactCommon/RCTTurboModuleManager.h>
#import <react/renderer/runtimescheduler/RuntimeScheduler.h>
#import <react/renderer/runtimescheduler/RuntimeSchedulerCallInvoker.h>
#import <React/RCTBridge+Private.h>
#import <React/RCTImageLoader.h>
#import <React/RCTBridgeProxy.h>
#import <react/utils/ManagedObjectWrapper.h>
// NOTE: Removed the problematic import
// #import <react/config/ReactNativeConfig.h>

static NSString *const kRNConcurrentRoot = @"concurrentRoot";

@interface RNNAppDelegate () <RCTTurboModuleManagerDelegate> {}
@end

@implementation RNNAppDelegate

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

    RCTAppSetupPrepareApp(application, self.newArchEnabled);
    RCTSetNewArchEnabled(TRUE);
    RCTEnableTurboModuleInterop(YES);
    RCTEnableTurboModuleInteropBridgeProxy(YES);

    // Create RCTRootViewFactory inline
    RCTRootViewFactory *factory = [self createRCTRootViewFactory];
    

    return YES;
}

- (RCTRootViewFactory *)createRCTRootViewFactory
{
  __weak __typeof(self) weakSelf = self;
  RCTBundleURLBlock bundleUrlBlock = ^{
    RCTAppDelegate *strongSelf = weakSelf;
    return strongSelf.bundleURL;
  };

  RCTRootViewFactoryConfiguration *configuration =
      [[RCTRootViewFactoryConfiguration alloc] initWithBundleURLBlock:bundleUrlBlock
                                                       newArchEnabled:self.newArchEnabled];

  return [[RCTRootViewFactory alloc] initWithConfiguration:configuration andTurboModuleManagerDelegate:self];
}

#pragma mark RCTTurboModuleManagerDelegate

- (Class)getModuleClassFromName:(const char *)name {
    return RCTCoreModulesClassProvider(name);
}

- (std::shared_ptr<facebook::react::TurboModule>)
    getTurboModule:(const std::string &)name
         jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker {
    return nullptr;
}

- (std::shared_ptr<facebook::react::TurboModule>)
    getTurboModule:(const std::string &)name
        initParams:(const facebook::react::ObjCTurboModule::InitParams &)params {
    return nullptr;
}

- (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass {
    return RCTAppSetupDefaultModuleFromClass(moduleClass, self.dependencyProvider);
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
    [NSException raise:@"RCTBridgeDelegate::sourceURLForBridge not implemented"
                format:@"Subclasses must implement a valid sourceURLForBridge method"];
    return nil;
}

- (BOOL)concurrentRootEnabled {
    return true;
}

@end

[manojmehra-spraxa]

in podfile add this lines

RCT_NEW_ARCH_ENABLED=1

pod 'ReactNativeNavigation', :path => '../node_modules/react-native-navigation'

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!
RCT_NEW_ARCH_ENABLED=1
linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'SampleProject' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

pod 'ReactNativeNavigation', :path => '../node_modules/react-native-navigation'

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )
  end
end

[manojmehra-spraxa]

@apponthebeach , @kamiranoff iOS fixes are available now check now

[kamiranoff]

@apponthebeach , @kamiranoff iOS fixes are available now check now

Haven't tried yet, but thank you very much for taking the time!

[apponthebeach]

@manojmehra-spraxa thanks for that. I try a bit during lunch break, but still have the "No such module 'ReactNativeNavigation'" error for iOS. I will take a better look after my day of work

[manojmehra-spraxa]

can you provide some files like podfile , etc and did you change the RNNAppDelegate.mm file inside node module !

[apponthebeach]

can you provide some files like podfile , etc and did you change the RNNAppDelegate.mm file inside node module !

Hey @manojmehra-spraxa

Thanks to take some time following my reply

I create a project from scratch to test your fixes.

Here is my podfile

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!
RCT_NEW_ARCH_ENABLED=1

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'project_rnn' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )
  pod 'ReactNativeNavigation', :path => '../node_modules/react-native-navigation'
  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )
  end
end

here is my node_modules/react-native-navigation/lib/iOS/RNNAppDelegate.mm

#import "RNNAppDelegate.h"
#import <ReactNativeNavigation/ReactNativeNavigation.h>

#import "RCTAppSetupUtils.h"
#import <React/CoreModulesPlugins.h>
#import <React/RCTCxxBridgeDelegate.h>
#import <React/RCTLegacyViewManagerInteropComponentView.h>
#import <React/RCTSurfacePresenter.h>
#import <React/RCTSurfacePresenterStub.h>
#import <React/RCTSurfacePresenterBridgeAdapter.h>
#import <ReactCommon/RCTTurboModuleManager.h>
#import <react/renderer/runtimescheduler/RuntimeScheduler.h>
#import <react/renderer/runtimescheduler/RuntimeSchedulerCallInvoker.h>
#import <React/RCTBridge+Private.h>
#import <React/RCTImageLoader.h>
#import <React/RCTBridgeProxy.h>
#import <react/utils/ManagedObjectWrapper.h>
// NOTE: Removed the problematic import
// #import <react/config/ReactNativeConfig.h>

static NSString *const kRNConcurrentRoot = @"concurrentRoot";

@interface RNNAppDelegate () <RCTTurboModuleManagerDelegate> {}
@end

@implementation RNNAppDelegate

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

    RCTAppSetupPrepareApp(application, self.newArchEnabled);
    RCTSetNewArchEnabled(TRUE);
    RCTEnableTurboModuleInterop(YES);
    RCTEnableTurboModuleInteropBridgeProxy(YES);

    // Create RCTRootViewFactory inline
    RCTRootViewFactory *factory = [self createRCTRootViewFactory];
    

    return YES;
}

- (RCTRootViewFactory *)createRCTRootViewFactory
{
  __weak __typeof(self) weakSelf = self;
  RCTBundleURLBlock bundleUrlBlock = ^{
    RCTAppDelegate *strongSelf = weakSelf;
    return strongSelf.bundleURL;
  };

  RCTRootViewFactoryConfiguration *configuration =
      [[RCTRootViewFactoryConfiguration alloc] initWithBundleURLBlock:bundleUrlBlock
                                                       newArchEnabled:self.newArchEnabled];

  return [[RCTRootViewFactory alloc] initWithConfiguration:configuration andTurboModuleManagerDelegate:self];
}

#pragma mark RCTTurboModuleManagerDelegate

- (Class)getModuleClassFromName:(const char *)name {
    return RCTCoreModulesClassProvider(name);
}

- (std::shared_ptr<facebook::react::TurboModule>)
    getTurboModule:(const std::string &)name
         jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker {
    return nullptr;
}

- (std::shared_ptr<facebook::react::TurboModule>)
    getTurboModule:(const std::string &)name
        initParams:(const facebook::react::ObjCTurboModule::InitParams &)params {
    return nullptr;
}

- (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass {
    return RCTAppSetupDefaultModuleFromClass(moduleClass, self.dependencyProvider);
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
    [NSException raise:@"RCTBridgeDelegate::sourceURLForBridge not implemented"
                format:@"Subclasses must implement a valid sourceURLForBridge method"];
    return nil;
}

- (BOOL)concurrentRootEnabled {
    return true;
}

@end

here is my AppDelegate.swift where the error "No such module 'ReactNativeNavigation'" occurred.

import UIKit
import React
import ReactNativeNavigation
import ReactAppDependencyProvider

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  var reactNativeDelegate: ReactNativeDelegate?
  var reactNativeFactory: RCTReactNativeFactory?

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    let delegate = ReactNativeDelegate()
    let factory = RCTReactNativeFactory(delegate: delegate)
    delegate.dependencyProvider = RCTAppDependencyProvider()

    reactNativeDelegate = delegate
    reactNativeFactory = factory

    window = UIWindow(frame: UIScreen.main.bounds)

    factory.startReactNative(
      withModuleName: "project_rnn",
      in: window,
      launchOptions: launchOptions
    )

    return true
  }
}

class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
  override func sourceURL(for bridge: RCTBridge) -> URL? {
    self.bundleURL()
  }

  override func bundleURL() -> URL? {
#if DEBUG
    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else
    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
#endif
  }
}

Here is my Package.json

{
  "name": "project_rnn",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native/new-app-screen": "0.80.1",
    "react": "19.1.0",
    "react-native": "0.80.1",
    "react-native-navigation": "^8.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "19.0.0",
    "@react-native-community/cli-platform-android": "19.0.0",
    "@react-native-community/cli-platform-ios": "19.0.0",
    "@react-native/babel-preset": "0.80.1",
    "@react-native/eslint-config": "0.80.1",
    "@react-native/metro-config": "0.80.1",
    "@react-native/typescript-config": "0.80.1",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.1.0",
    "@types/react-test-renderer": "^19.1.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.1.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

``