Use OpenSourceMergedSoMapping in NavigationApplication

[ipinlnd]

What happened?

With the release of the new React-native version (0.76), we need to call the SoLoader.init() function with a new SO Mapping object for loading libraries.

Currently the NavigationApplication class makes a call to SoLoader.init(this, false); which overwrites any calls we make in our own application code. So our builds are failing.

This needs to update to SoLoader.init(this, OpenSourceMergedSoMapping.INSTANCE);

Was it tested on latest react-native-navigation?

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

In what environment did this happen?

React Native Navigation version: 7.40.3
React Native version: 0.76.1

[MohamedAbdElNaby]

@ipinlnd
can you share with me mainActivity and mainAplication please

[ipinlnd]

@MohamedAbdElNaby
This is my MainApplication class

class MainApplication : NavigationApplication() {
  override val reactNativeHost: ReactNativeHost =
      object : NavigationReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              // Packages that cannot be autolinked yet can be added manually here, for example:
              add(SafeAreaContextPackage())
              add(IntentsPackage())
            }
        override fun getJSMainModuleName(): String = "index"
        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      }

  override val reactHost: ReactHost
    get() = getDefaultReactHost(applicationContext, reactNativeHost)

  override fun onCreate() {
    super.onCreate()
    // SoLoader.init(this, OpenSourceMergedSoMapping)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
  }
}

There isn't much in my MainActivity class related to this.

[MohamedAbdElNaby]

@ipinlnd
If you comment out the line:
SoLoader.init(this, OpenSourceMergedSoMapping);
the app should function correctly without any issues.

[ipinlnd]

@MohamedAbdElNaby Yeah so that is currently commented out. So I don't have that in my local code at all.
However, the NavigationApplication makes a call to SoLoader.init(this, false); and for me, that caused me to see a crash on app start with the error that it couldn't find the libhermes_executor.so which leads me to believe that the reason was this. I made a patch for it and updated the call to pass OpenSourceMergedSoMapping as the second param and it worked fine.

It seems to be a new thing in react-native 0.76 (https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture#android-apps-are-38mb-smaller-thanks-to-native-library-merging)

[MohamedAbdElNaby]

@ipinlnd
can i share with you my project to detect what is the problem in my code
i invite you to my project can you help me in this please ?!

[oferRounds]

@ipinlnd did you find any solution to the issue? I’ve tried to the NavigationApplication’s line to SoLoader.init(this, OpenSourceMergedSoMapping.INSTANCE);, but it fails with this error:

> Task :react-native-navigation:compileReactNative71DebugJavaWithJavac FAILED
/Users/ofer.morag/hibob-mobile/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java:38: warning: [removal] enableFabricRenderer in ReactFeatureFlags has been deprecated and marked for removal
        setIsFabric(ReactFeatureFlags.enableFabricRenderer);
                                     ^
/Users/ofer.morag/hibob-mobile/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java:111: warning: [removal] ReactViewBackgroundDrawable in com.facebook.react.views.view has been deprecated and marked for removal
        if (view.getBackground() instanceof ReactViewBackgroundDrawable) {
                                            ^
/Users/ofer.morag/hibob-mobile/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java:112: warning: [removal] ReactViewBackgroundDrawable in com.facebook.react.views.view has been deprecated and marked for removal
            return ((ReactViewBackgroundDrawable) view.getBackground()).getColor();
                     ^
/Users/ofer.morag/hibob-mobile/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/NavigationApplication.java:27: error: unreported exception IOException; must be caught or declared to be thrown
        SoLoader.init(this, OpenSourceMergedSoMapping.INSTANCE);
                     ^
/Users/ofer.morag/hibob-mobile/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java:237: warning: [removal] onCatalystInstanceDestroy() in NativeModule has been deprecated and marked for removal
    public void onCatalystInstanceDestroy() {
                ^
/Users/ofer.morag/hibob-mobile/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java:242: warning: [removal] onCatalystInstanceDestroy() in NativeModule has been deprecated and marked for removal
        super.onCatalystInstanceDestroy();
             ^
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
1 error
5 warnings

[ipinlnd]

@oferRounds
You need to put it in a try/catch for IOException I believe.

error: unreported exception IOException; must be caught or declared to be thrown

[oferRounds]

thank you, just found it a minute before you wrote! Thank you for your fast response!

[f0wu5u]

For those who are having issues with react native 0.76.5,

I was able to get my old app from react-native 0.70.3 running again and even migrated to expo dev with newArch disabled ofc.

I created a patch file here, to get going with build time errors... LET OP! I do not know how it will hold at runtime but in my app I am able do navigate from A-B

react-native-navigation+7.40.3.patch

diff --git a/node_modules/react-native-navigation/lib/android/app/build.gradle b/node_modules/react-native-navigation/lib/android/app/build.gradle
index 3428f1a..065b0fb 100644
--- a/node_modules/react-native-navigation/lib/android/app/build.gradle
+++ b/node_modules/react-native-navigation/lib/android/app/build.gradle
@@ -202,7 +202,7 @@ dependencies {
     implementation 'com.github.clans:fab:1.6.4'
 
     //noinspection GradleDynamicVersion
-    implementation 'com.facebook.react:react-native:+'
+   implementation("com.facebook.react:react-android:+")
 
     if("Playground".toLowerCase() == rootProject.name.toLowerCase()){
         // tests only for our playground
diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/NavigationApplication.java b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/NavigationApplication.java
index 0eced0f..10837cf 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/NavigationApplication.java
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/NavigationApplication.java
@@ -4,7 +4,7 @@ import android.app.Application;
 
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
-import com.facebook.soloader.SoLoader;
+// import com.facebook.soloader.SoLoader;
 import com.reactnativenavigation.react.ReactGateway;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
 
@@ -23,7 +23,7 @@ public abstract class NavigationApplication extends Application implements React
 	public void onCreate() {
 		super.onCreate();
         instance = this;
-        SoLoader.init(this, false);
+//      SoLoader.init(this, false);
         reactGateway = createReactGateway();
 	}
 
diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
index 4cc09eb..0e948fc 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
@@ -7,7 +7,7 @@ import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.BaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
@@ -36,7 +36,7 @@ import static com.reactnativenavigation.utils.UiUtils.pxToDp;
 
 import android.app.Activity;
 
-public class NavigationModule extends ReactContextBaseJavaModule {
+public class NavigationModule extends BaseJavaModule {
     private static final String NAME = "RNNBridgeModule";
 
     private final Now now = new Now();
@@ -222,23 +222,24 @@ public class NavigationModule extends ReactContextBaseJavaModule {
     }
 
     protected void handle(Runnable task) {
+    ReactApplicationContext ctx = getReactApplicationContext();
         UiThread.post(() -> {
-            if (getCurrentActivity() != null && !activity().isFinishing()) {
+            if (ctx.getCurrentActivity() != null && !activity().isFinishing()) {
                 task.run();
             }
         });
     }
 
     protected NavigationActivity activity() {
-        return (NavigationActivity) getCurrentActivity();
+        return (NavigationActivity) getReactApplicationContext().getCurrentActivity();
     }
 
     @Override
-    public void onCatalystInstanceDestroy() {
+    public void invalidate() {
         final NavigationActivity navigationActivity = activity();
         if (navigationActivity != null) {
             navigationActivity.onCatalystInstanceDestroy();
         }
-        super.onCatalystInstanceDestroy();
+        super.invalidate();
     }
 }
diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java
index 90032df..18034ea 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java
@@ -9,6 +9,7 @@ import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactRootView;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.config.ReactFeatureFlags;
+// import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
 import com.facebook.react.uimanager.JSTouchDispatcher;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.events.EventDispatcher;
diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactTypefaceUtils.java b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactTypefaceUtils.java
index 834d734..7a208bf 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactTypefaceUtils.java
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactTypefaceUtils.java
@@ -19,7 +19,7 @@ import android.text.TextUtils;
 import androidx.annotation.Nullable;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.views.text.ReactFontManager;
-import com.facebook.react.views.text.ReactTextShadowNode;
+import com.facebook.react.common.ReactConstants;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -96,12 +96,12 @@ public class ReactTypefaceUtils {
 
     int want = 0;
     if ((weight == Typeface.BOLD)
-        || ((oldStyle & Typeface.BOLD) != 0 && weight == ReactTextShadowNode.UNSET)) {
+        || ((oldStyle & Typeface.BOLD) != 0 && weight == ReactConstants.UNSET)) {
       want |= Typeface.BOLD;
     }
 
     if ((style == Typeface.ITALIC)
-        || ((oldStyle & Typeface.ITALIC) != 0 && style == ReactTextShadowNode.UNSET)) {
+        || ((oldStyle & Typeface.ITALIC) != 0 && style == ReactConstants.UNSET)) {
       want |= Typeface.ITALIC;
     }
 
diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactViewGroup.kt b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactViewGroup.kt
index f92580c..0f84ced 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactViewGroup.kt
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactViewGroup.kt
@@ -1,7 +1,17 @@
 package com.reactnativenavigation.utils
 
-import com.facebook.react.views.view.ReactViewBackgroundDrawable
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
+import com.facebook.react.uimanager.LengthPercentage
 import com.facebook.react.views.view.ReactViewGroup
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
 
+@OptIn(UnstableReactNativeAPI::class)
 val ReactViewGroup.borderRadius: Float
-    get() = (background as? ReactViewBackgroundDrawable)?.fullBorderRadius ?: 0f
\ No newline at end of file
+     get(){
+            val uniform: LengthPercentage = (background as? CSSBackgroundDrawable)?.borderRadius?.uniform
+                ?: return 0f
+
+            return uniform.resolve(
+                width.toFloat(), height.toFloat()
+            ).horizontal
+     }
\ No newline at end of file
diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java
index cdce75b..1ffad06 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java
@@ -5,7 +5,7 @@ import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewParent;
 
-import com.facebook.react.views.view.ReactViewBackgroundDrawable;
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -108,10 +108,10 @@ public class ViewUtils {
     }
 
     public static int getBackgroundColor(View view) {
-        if (view.getBackground() instanceof ReactViewBackgroundDrawable) {
-            return ((ReactViewBackgroundDrawable) view.getBackground()).getColor();
+        if (view.getBackground() instanceof CSSBackgroundDrawable) {
+            return ((CSSBackgroundDrawable) view.getBackground()).getColor();
         }
-        throw new RuntimeException(view.getBackground().getClass().getSimpleName() + " is not ReactViewBackgroundDrawable");
+        throw new RuntimeException(view.getBackground().getClass().getSimpleName() + " is not CSSBackgroundDrawable");
     }
 
 
diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/LayoutDirectionApplier.kt b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/LayoutDirectionApplier.kt
index 89216ae..3dba3b6 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/LayoutDirectionApplier.kt
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/LayoutDirectionApplier.kt
@@ -6,10 +6,11 @@ import com.reactnativenavigation.options.Options
 
 class LayoutDirectionApplier {
     fun apply(root: ViewController<*>, options: Options, instanceManager: ReactInstanceManager) {
-        if (options.layout.direction.hasValue() && instanceManager.currentReactContext != null) {
+        val currentReactContext = instanceManager.getCurrentReactContext()
+        if (options.layout.direction.hasValue() && currentReactContext != null) {
             root.activity.window.decorView.layoutDirection = options.layout.direction.get()
-            I18nUtil.getInstance().allowRTL(instanceManager.currentReactContext, options.layout.direction.isRtl)
-            I18nUtil.getInstance().forceRTL(instanceManager.currentReactContext, options.layout.direction.isRtl)
+           I18nUtil.getInstance().allowRTL(currentReactContext, options.layout.direction.isRtl)
+           I18nUtil.getInstance().forceRTL(currentReactContext, options.layout.direction.isRtl)
         }
     }
 }
\ No newline at end of file
diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorAnimator.kt b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorAnimator.kt
index 4ecc1a2..268e2fe 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorAnimator.kt
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorAnimator.kt
@@ -5,20 +5,22 @@ import android.animation.ObjectAnimator
 import android.view.View
 import android.view.ViewGroup
 import com.facebook.react.views.text.ReactTextView
-import com.facebook.react.views.view.ReactViewBackgroundDrawable
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
 import com.reactnativenavigation.options.SharedElementTransitionOptions
 import com.reactnativenavigation.utils.*
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
 
+@OptIn(UnstableReactNativeAPI::class)
 class BackgroundColorAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(from, to) {
     override fun shouldAnimateProperty(fromChild: ViewGroup, toChild: ViewGroup): Boolean {
-        return fromChild.background is ReactViewBackgroundDrawable &&
-                toChild.background is ReactViewBackgroundDrawable && (fromChild.background as ReactViewBackgroundDrawable).color != (toChild.background as ReactViewBackgroundDrawable).color
+        return fromChild.background is CSSBackgroundDrawable &&
+                toChild.background is CSSBackgroundDrawable && (fromChild.background as CSSBackgroundDrawable).getColor() != (toChild.background as CSSBackgroundDrawable).getColor()
     }
 
     override fun excludedViews() = listOf(ReactTextView::class.java)
 
     override fun create(options: SharedElementTransitionOptions): Animator {
-        val backgroundColorEvaluator = BackgroundColorEvaluator(to.background as ReactViewBackgroundDrawable)
+        val backgroundColorEvaluator = BackgroundColorEvaluator(to.background as CSSBackgroundDrawable)
         val fromColor = ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(from))
         val toColor = ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(to))
 
diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorEvaluator.kt b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorEvaluator.kt
index 4480113..45bcebd 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorEvaluator.kt
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorEvaluator.kt
@@ -2,9 +2,11 @@ package com.reactnativenavigation.views.element.animators
 
 import android.animation.TypeEvaluator
 import androidx.core.graphics.ColorUtils
-import com.facebook.react.views.view.ReactViewBackgroundDrawable
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
 
-class BackgroundColorEvaluator(private val background: ReactViewBackgroundDrawable) : TypeEvaluator<DoubleArray> {
+@OptIn(UnstableReactNativeAPI::class)
+class BackgroundColorEvaluator(private val background: CSSBackgroundDrawable) : TypeEvaluator<DoubleArray> {
     private val color = DoubleArray(3)
 
     override fun evaluate(ratio: Float, from: DoubleArray, to: DoubleArray): DoubleArray {
diff --git a/node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt b/node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt
index ea8516f..b97c550 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt
+++ b/node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt
@@ -49,17 +49,14 @@ class ModalContentLayout(context: Context?) : ReactViewGroup(context), RootView{
             updateFirstChildView()
         }
     }
-    override fun onChildStartedNativeGesture(child: View, androidEvent: MotionEvent?) {
-        mJSTouchDispatcher.onChildStartedNativeGesture(androidEvent, this.getEventDispatcher())
+    override fun onChildStartedNativeGesture(child: View, androidEvent: MotionEvent) {
+        mJSTouchDispatcher.onChildStartedNativeGesture(androidEvent,this.getEventDispatcher())
     }
-    override fun onChildStartedNativeGesture(androidEvent: MotionEvent?) {
-        mJSTouchDispatcher.onChildStartedNativeGesture(androidEvent, this.getEventDispatcher())
-    }
-    override fun onChildEndedNativeGesture(child: View, androidEvent: MotionEvent?) {
-        mJSTouchDispatcher.onChildEndedNativeGesture(androidEvent, this.getEventDispatcher())
+    override fun onChildEndedNativeGesture(child: View, androidEvent: MotionEvent) {
+        mJSTouchDispatcher.onChildEndedNativeGesture(androidEvent,this.getEventDispatcher())
     }
     override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {}
-    private fun getEventDispatcher(): EventDispatcher? {
+    private fun getEventDispatcher(): EventDispatcher {
         val reactContext: ReactContext = this.getReactContext()
         return reactContext.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
     }
@@ -73,12 +70,12 @@ class ModalContentLayout(context: Context?) : ReactViewGroup(context), RootView{
         return this.context as ReactContext
     }
 
-    override fun onInterceptTouchEvent(event: MotionEvent?): Boolean {
+    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
         mJSTouchDispatcher.handleTouchEvent(event, getEventDispatcher())
         return super.onInterceptTouchEvent(event)
     }
 
-    override fun onTouchEvent(event: MotionEvent?): Boolean {
+    override fun onTouchEvent(event: MotionEvent): Boolean {
         mJSTouchDispatcher.handleTouchEvent(event, getEventDispatcher())
         super.onTouchEvent(event)
         return true
diff --git a/node_modules/react-native-navigation/lib/ios/BottomTabsBasePresenter.m b/node_modules/react-native-navigation/lib/ios/BottomTabsBasePresenter.m
index 75aa424..b15dfb3 100644
--- a/node_modules/react-native-navigation/lib/ios/BottomTabsBasePresenter.m
+++ b/node_modules/react-native-navigation/lib/ios/BottomTabsBasePresenter.m
@@ -29,8 +29,11 @@ - (void)applyOptions:(RNNNavigationOptions *)options {
     [self applyBackgroundColor:[withDefault.bottomTabs.backgroundColor withDefault:nil]
                    translucent:[withDefault.bottomTabs.translucent withDefault:NO]];
     [bottomTabs setTabBarHideShadow:[withDefault.bottomTabs.hideShadow withDefault:NO]];
-    [bottomTabs setTabBarStyle:[RCTConvert UIBarStyle:[withDefault.bottomTabs.barStyle
-                                                          withDefault:@"default"]]];
+    if ([[withDefault.bottomTabs.barStyle withDefault:@"default"] isEqualToString:@"black"]) {
+        [bottomTabs setTabBarStyle:UIBarStyleBlack];
+    }else{
+        [bottomTabs setTabBarStyle:UIBarStyleDefault];
+    }
     [self applyTabBarBorder:withDefault.bottomTabs];
     [self applyTabBarShadow:withDefault.bottomTabs.shadow];
 }
@@ -60,7 +63,12 @@ - (void)mergeOptions:(RNNNavigationOptions *)mergeOptions
     }
 
     if (mergeOptions.bottomTabs.barStyle.hasValue) {
-        [bottomTabs setTabBarStyle:[RCTConvert UIBarStyle:mergeOptions.bottomTabs.barStyle.get]];
+        if ([[mergeOptions.bottomTabs.barStyle withDefault:@"default"]
+                            isEqualToString:@"black"]) {
+            [bottomTabs setTabBarStyle:UIBarStyleBlack];
+        }else{
+            [bottomTabs setTabBarStyle:UIBarStyleDefault];
+        }
     }
 
     if (mergeOptions.bottomTabs.translucent.hasValue) {
diff --git a/node_modules/react-native-navigation/lib/ios/RNNStackPresenter.m b/node_modules/react-native-navigation/lib/ios/RNNStackPresenter.m
index 5f4218e..e44acc8 100644
--- a/node_modules/react-native-navigation/lib/ios/RNNStackPresenter.m
+++ b/node_modules/react-native-navigation/lib/ios/RNNStackPresenter.m
@@ -67,8 +67,13 @@ - (void)applyOptions:(RNNNavigationOptions *)options {
     [_interactivePopGestureDelegate setEnabled:[withDefault.popGesture withDefault:YES]];
     stack.interactivePopGestureRecognizer.delegate = _interactivePopGestureDelegate;
 
-    [stack
-        setBarStyle:[RCTConvert UIBarStyle:[withDefault.topBar.barStyle withDefault:@"default"]]];
+    if ([[withDefault.topBar.barStyle withDefault:@"default"]
+                isEqualToString:@"black"]) {
+        [stack setBarStyle:UIBarStyleBlack];
+    } else {
+        [stack setBarStyle:UIBarStyleDefault];
+    }
+
     [stack setRootBackgroundImage:[withDefault.rootBackgroundImage withDefault:nil]];
     [stack setNavigationBarTestId:[withDefault.topBar.testID withDefault:nil]];
     [stack setNavigationBarVisible:[withDefault.topBar.visible withDefault:YES]
@@ -126,7 +131,12 @@ - (void)mergeOptions:(RNNNavigationOptions *)mergeOptions
     }
 
     if (mergeOptions.topBar.barStyle.hasValue) {
-        [stack setBarStyle:[RCTConvert UIBarStyle:mergeOptions.topBar.barStyle.get]];
+         if ([[mergeOptions.topBar.barStyle withDefault:@"default"]
+                        isEqualToString:@"black"]) {
+            [stack setBarStyle:UIBarStyleBlack];
+         } else {
+            [stack setBarStyle:UIBarStyleDefault];
+         }
     }
 
     if (mergeOptions.topBar.background.clipToBounds.hasValue) {

MainApplication.kt

package android.example.app

import android.app.Application
import android.content.res.Configuration
import android.util.Log

import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactNativeHost
import com.reactnativenavigation.react.NavigationReactNativeHost
import com.reactnativenavigation.NavigationApplication
import com.facebook.react.ReactPackage
import com.facebook.react.ReactHost
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader

import expo.modules.ApplicationLifecycleDispatcher
import expo.modules.ReactNativeHostWrapper

class MainApplication : NavigationApplication() {

  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
        this,
        object : NavigationReactNativeHost(this) {
          override fun getPackages(): List<ReactPackage> {
            val packages = PackageList(this).packages
            // Packages that cannot be autolinked yet can be added manually here, for example:
            // packages.add(new MyReactNativePackage());
            return packages
          }

          override fun getJSMainModuleName(): String = "index"//".expo/.virtual-metro-entry"

          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
          override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      }
  )

  override val reactHost: ReactHost
    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)

  override fun onCreate() {
    SoLoader.init(this, OpenSourceMergedSoMapping)
    super.onCreate()
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {

      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
    ApplicationLifecycleDispatcher.onApplicationCreate(this)
  }

  override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
  }
}

MainActivity.kt

package android.example.app

import android.os.Build
import android.os.Bundle

// import com.facebook.react.ReactActivity
import com.reactnativenavigation.NavigationActivity
// import com.facebook.react.ReactActivityDelegate
// import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
// import com.facebook.react.defaults.DefaultReactActivityDelegate

import expo.modules.ReactActivityDelegateWrapper

class MainActivity : NavigationActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    // Set the theme to AppTheme BEFORE onCreate to support
    // coloring the background, status bar, and navigation bar.
    // This is required for expo-splash-screen.
    setTheme(R.style.AppTheme);
    super.onCreate(savedInstanceState)
  }

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  // override fun getMainComponentName(): String = ""

  /**
   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
   */
  /*fun createReactActivityDelegate(): ReactActivityDelegate {
    return ReactActivityDelegateWrapper(
          this as ReactActivity,
          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
          object : DefaultReactActivityDelegate(
              this,
              "",
              fabricEnabled
          ){})
  }*/

  /**
    * Align the back button behavior with Android S
    * where moving root activities to background instead of finishing activities.
    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
    */
  override fun invokeDefaultOnBackPressed() {
      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
          if (!moveTaskToBack(false)) {
              // For non-root activities, use the default implementation to finish them.
              super.invokeDefaultOnBackPressed()
          }
          return
      }

      // Use the default back button implementation on Android S
      // because it's doing more than [Activity.moveTaskToBack] in fact.
      super.invokeDefaultOnBackPressed()
  }
}

I will try to open an official PR along the way

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[marcshilling]

I believe this is all sorted in "react-native-navigation": "^8.0.0" 👍