react-native-navigation 7.41.0 → 7.42.0

package/lib/Mock/Components/ComponentScreen.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { View, Text, TouchableOpacity, Image, ImageURISource} from 'react-native';
-import { Navigation, ImageResource} from 'react-native-navigation';
+import { View, Text, TouchableOpacity, Image, ImageURISource } from 'react-native';
+import { Navigation, ImageResource } from 'react-native-navigation';
 import { ComponentProps } from '../ComponentProps';
 import { VISIBLE_SCREEN_TEST_ID } from '../constants';
 import { LayoutStore } from '../Stores/LayoutStore';
@@ -10,8 +10,7 @@ import { events } from '../Stores/EventsStore';
 import _ from 'lodash';
 import { switchTabByIndex } from '../actions/layoutActions';
 
-
-function isURISource(src: ImageResource| undefined): src is ImageURISource {
+function isURISource(src: ImageResource | undefined): src is ImageURISource {
   return !!src && typeof src === 'object' && 'uri' in src;
 }
 
@@ -36,12 +35,15 @@ export const ComponentScreen = connect(
       if (bottomTabsOptions?.visible === false) return null;
       const buttons = bottomTabs!.children!.map((child, i) => {
         const bottomTabOptions = child.resolveOptions().bottomTab;
-        const icon = (bottomTabs as any).selectedIndex === i ? bottomTabOptions?.selectedIcon : bottomTabOptions?.icon;
+        const icon =
+          (bottomTabs as any).selectedIndex === i
+            ? bottomTabOptions?.selectedIcon
+            : bottomTabOptions?.icon;
         const iconURI = isURISource(icon) ? icon.uri : undefined;
         return (
           <View key={`tab-${i}`}>
             <TouchableOpacity
-              style={{padding:10}}
+              style={{ padding: 10 }}
               testID={bottomTabOptions?.testID}
               onPress={() => {
                 events.invokeBottomTabPressed({
@@ -51,22 +53,34 @@ export const ComponentScreen = connect(
                   switchTabByIndex(this.props.layoutNode.getBottomTabs(), i);
               }}
             >
-            <View style={{justifyContent: 'center', alignItems: 'center'}}>
-              <Text>{bottomTabOptions?.badge}</Text>
-              {iconURI && <Image style={{width: 18, height: 18, marginBottom: 5}} source={{uri: iconURI}}/>}
-              <Text style={{fontSize: 12}}>{bottomTabOptions?.text || ''}</Text>
-            </View>
+              <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+                <Text>{bottomTabOptions?.badge}</Text>
+                {iconURI && (
+                  <Image
+                    style={{ width: 18, height: 18, marginBottom: 5 }}
+                    source={{ uri: iconURI }}
+                  />
+                )}
+                <Text style={{ fontSize: 12 }}>{bottomTabOptions?.text || ''}</Text>
+              </View>
             </TouchableOpacity>
           </View>
         );
       });
 
       return (
-      <View 
-        testID={bottomTabsOptions?.testID} 
-        style={{flexDirection: 'row',justifyContent: 'center', width: '100%', backgroundColor: '#F0F2F5'}}>
+        <View
+          testID={bottomTabsOptions?.testID}
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'center',
+            width: '100%',
+            backgroundColor: '#F0F2F5',
+          }}
+        >
           {buttons}
-      </View>);
+        </View>
+      );
     }
 
     render() {

package/lib/Mock/Components/LayoutComponent.tsx

@@ -19,8 +19,8 @@ export const LayoutComponent = class extends Component<ComponentProps> {
     return <View />;
   }
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    const err =  new Error(
-      `Error while trying to render layout ${this.props.layoutNode.nodeId} of type ${this.props.layoutNode.type}: ${error}\n${errorInfo?.componentStack}`,
+    const err = new Error(
+      `Error while trying to render layout ${this.props.layoutNode.nodeId} of type ${this.props.layoutNode.type}: ${error}\n${errorInfo?.componentStack}`
     );
     (err as any).cause = error;
     throw err;

package/lib/Mock/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApplicationMock = void 0;
-exports.mockNativeComponents = mockNativeComponents;
+exports.mockNativeComponents = exports.ApplicationMock = void 0;
 const tslib_1 = require("tslib");
 exports.ApplicationMock = require('./Application').Application;
 tslib_1.__exportStar(require("./constants"), exports);
@@ -12,3 +11,4 @@ function mockNativeComponents() {
     const { Navigation } = require('react-native-navigation');
     Navigation.mockNativeComponents(new NativeCommandsSender(), new NativeEventsReceiver(), new AppRegistryService());
 }
+exports.mockNativeComponents = mockNativeComponents;

package/lib/android/app/build.gradle

@@ -20,6 +20,7 @@ def DEFAULT_KOTLIN_STDLIB = 'kotlin-stdlib-jdk8'
 def kotlinVersion = safeExtGet("RNNKotlinVersion", DEFAULT_KOTLIN_VERSION)
 def kotlinStdlib = safeExtGet('RNNKotlinStdlib',DEFAULT_KOTLIN_STDLIB )
 def kotlinCoroutinesCore = safeExtGet('RNNKotlinCoroutinesCore', '1.5.2')
+
 android {
     namespace 'com.reactnativenavigation'
     compileSdkVersion safeExtGetFallbackLowerBound('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION)

package/lib/android/app/src/main/java/com/reactnativenavigation/NavigationApplication.java

@@ -4,10 +4,12 @@ import android.app.Application;
 
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
+import com.facebook.react.soloader.OpenSourceMergedSoMapping;
 import com.facebook.soloader.SoLoader;
 import com.reactnativenavigation.react.ReactGateway;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
 
+import java.io.IOException;
 import java.util.HashMap;
 import java.util.Map;
 
@@ -23,7 +25,11 @@ public abstract class NavigationApplication extends Application implements React
 	public void onCreate() {
 		super.onCreate();
         instance = this;
-        SoLoader.init(this, false);
+        try {
+            SoLoader.init(this, OpenSourceMergedSoMapping.INSTANCE);
+        } catch (IOException e) {
+            throw new RuntimeException(e);
+        }
         reactGateway = createReactGateway();
 	}
 

package/lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java

@@ -5,6 +5,8 @@ import android.content.Context;
 import android.os.Bundle;
 import android.view.MotionEvent;
 
+import androidx.annotation.RestrictTo;
+
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactRootView;
 import com.facebook.react.bridge.ReactContext;
@@ -12,14 +14,12 @@ import com.facebook.react.config.ReactFeatureFlags;
 import com.facebook.react.uimanager.JSTouchDispatcher;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.events.EventDispatcher;
-import com.reactnativenavigation.viewcontrollers.viewcontroller.ScrollEventListener;
 import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.viewcontrollers.viewcontroller.IReactView;
+import com.reactnativenavigation.viewcontrollers.viewcontroller.ScrollEventListener;
 import com.reactnativenavigation.views.component.Renderable;
 
-import androidx.annotation.RestrictTo;
-
 @SuppressLint("ViewConstructor")
 public class ReactView extends ReactRootView implements IReactView, Renderable {
 

package/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalHostLayout.kt

@@ -34,7 +34,7 @@ open class ModalHostLayout(reactContext: ThemedReactContext) : ViewGroup(reactCo
     }
 
     @TargetApi(23)
-    override fun dispatchProvideStructure(structure: ViewStructure?) {
+    override fun dispatchProvideStructure(structure: ViewStructure) {
         mHostView.dispatchProvideStructure(structure)
     }
 

package/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactTypefaceUtils.java

@@ -18,6 +18,7 @@ import android.graphics.Typeface;
 import android.text.TextUtils;
 import androidx.annotation.Nullable;
 import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.common.ReactConstants;
 import com.facebook.react.views.text.ReactFontManager;
 import com.facebook.react.views.text.ReactTextShadowNode;
 import java.util.ArrayList;
@@ -96,12 +97,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;
     }
 

package/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactViewGroup.kt

@@ -1,7 +1,9 @@
 package com.reactnativenavigation.utils
 
-import com.facebook.react.views.view.ReactViewBackgroundDrawable
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
 import com.facebook.react.views.view.ReactViewGroup
 
+@OptIn(UnstableReactNativeAPI::class)
 val ReactViewGroup.borderRadius: Float
-    get() = (background as? ReactViewBackgroundDrawable)?.fullBorderRadius ?: 0f
+    get() = (background as? CSSBackgroundDrawable)?.fullBorderWidth ?: 0f

package/lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java

@@ -5,8 +5,6 @@ import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewParent;
 
-import com.facebook.react.views.view.ReactViewBackgroundDrawable;
-
 import java.util.ArrayList;
 import java.util.List;
 
@@ -14,6 +12,9 @@ import androidx.annotation.Nullable;
 
 import static com.reactnativenavigation.utils.ObjectUtils.perform;
 
+import com.facebook.react.common.annotations.UnstableReactNativeAPI;
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable;
+
 public class ViewUtils {
     @Nullable
     public static <T extends View> T findChildByClass(ViewGroup root, Class<T> clazz) {
@@ -107,9 +108,10 @@ public class ViewUtils {
         return ((ViewGroup) parent).indexOfChild(view);
     }
 
+    @UnstableReactNativeAPI
     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");
     }

package/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/LayoutDirectionApplier.kt

@@ -1,15 +1,19 @@
 package com.reactnativenavigation.viewcontrollers.viewcontroller
 
+import android.annotation.SuppressLint
 import com.facebook.react.ReactInstanceManager
 import com.facebook.react.modules.i18nmanager.I18nUtil
 import com.reactnativenavigation.options.Options
 
 class LayoutDirectionApplier {
-    fun apply(root: ViewController<*>, options: Options, instanceManager: ReactInstanceManager) {
-        if (options.layout.direction.hasValue() && instanceManager.currentReactContext != null) {
+    @SuppressLint("WrongConstant")
+    fun apply(root: ViewController<*>, options: Options) {
+        val currentContext = root.view?.context ?: return
+
+        if (options.layout.direction.hasValue()) {
             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.instance.allowRTL(currentContext, options.layout.direction.isRtl)
+            I18nUtil.instance.forceRTL(currentContext, options.layout.direction.isRtl)
         }
     }
 }

package/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/RootPresenter.java

@@ -35,7 +35,7 @@ public class RootPresenter {
     }
 
     public void setRoot(ViewController appearingRoot, ViewController<?> disappearingRoot, Options defaultOptions, CommandListener listener, ReactInstanceManager reactInstanceManager) {
-        layoutDirectionApplier.apply(appearingRoot, defaultOptions, reactInstanceManager);
+        layoutDirectionApplier.apply(appearingRoot, defaultOptions);
         rootLayout.addView(appearingRoot.getView(), matchParentWithBehaviour(new BehaviourDelegate(appearingRoot)));
         Options options = appearingRoot.resolveCurrentOptions(defaultOptions);
         AnimationOptions enter = options.animations.setRoot.getEnter();

package/lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorAnimator.kt

@@ -4,21 +4,23 @@ import android.animation.Animator
 import android.animation.ObjectAnimator
 import android.view.View
 import android.view.ViewGroup
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
 import com.facebook.react.views.text.ReactTextView
-import com.facebook.react.views.view.ReactViewBackgroundDrawable
 import com.reactnativenavigation.options.SharedElementTransitionOptions
 import com.reactnativenavigation.utils.*
 
+@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).color != (toChild.background as CSSBackgroundDrawable).color
     }
 
     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))
 

package/lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorEvaluator.kt

@@ -2,11 +2,13 @@ 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.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
 
-class BackgroundColorEvaluator(private val background: ReactViewBackgroundDrawable) : TypeEvaluator<DoubleArray> {
+class BackgroundColorEvaluator @OptIn(UnstableReactNativeAPI::class) constructor(private val background: CSSBackgroundDrawable) : TypeEvaluator<DoubleArray> {
     private val color = DoubleArray(3)
 
+    @OptIn(UnstableReactNativeAPI::class)
     override fun evaluate(ratio: Float, from: DoubleArray, to: DoubleArray): DoubleArray {
         ColorUtils.blendLAB(from, to, ratio.toDouble(), color)
         background.color = com.reactnativenavigation.utils.ColorUtils.labToColor(color)

package/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt

@@ -49,17 +49,17 @@ class ModalContentLayout(context: Context?) : ReactViewGroup(context), RootView{
             updateFirstChildView()
         }
     }
-    override fun onChildStartedNativeGesture(child: View, androidEvent: MotionEvent?) {
+    override fun onChildStartedNativeGesture(child: View, androidEvent: MotionEvent) {
         mJSTouchDispatcher.onChildStartedNativeGesture(androidEvent, this.getEventDispatcher())
     }
-    override fun onChildStartedNativeGesture(androidEvent: MotionEvent?) {
+    override fun onChildStartedNativeGesture(androidEvent: MotionEvent) {
         mJSTouchDispatcher.onChildStartedNativeGesture(androidEvent, this.getEventDispatcher())
     }
-    override fun onChildEndedNativeGesture(child: View, androidEvent: MotionEvent?) {
+    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 +73,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

package/lib/dist/Mock/Application.d.ts

@@ -4,13 +4,11 @@ interface ApplicationProps {
 }
 export declare const Application: {
     new (props: ApplicationProps): {
-        render(): JSX.Element;
-        context: any;
+        render(): React.JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ApplicationProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ApplicationProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ApplicationProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -28,6 +26,6 @@ export declare const Application: {
         componentWillUpdate?(nextProps: Readonly<ApplicationProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ApplicationProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any>;
+    contextType?: React.Context<any> | undefined;
 };
 export {};

package/lib/dist/Mock/Components/BottomTabs.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 import { ComponentProps } from '../ComponentProps';
 export declare const BottomTabs: {
-    new (props: Readonly<ComponentProps>): {
-        render(): JSX.Element[];
-        context: any;
+    new (props: ComponentProps): {
+        render(): React.JSX.Element[];
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -26,14 +24,12 @@ export declare const BottomTabs: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: ComponentProps, context?: any): {
-        render(): JSX.Element[];
-        context: any;
+    new (props: ComponentProps, context: any): {
+        render(): React.JSX.Element[];
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -51,5 +47,5 @@ export declare const BottomTabs: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any>;
+    contextType?: React.Context<any> | undefined;
 };

package/lib/dist/Mock/Components/ComponentScreen.d.ts

@@ -4,14 +4,12 @@ export declare const ComponentScreen: {
     new (props: ComponentProps): {
         componentDidMount(): void;
         isVisible(): boolean;
-        renderTabBar(): JSX.Element | null;
-        render(): JSX.Element;
-        context: any;
+        renderTabBar(): React.JSX.Element | null;
+        render(): React.JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -28,5 +26,5 @@ export declare const ComponentScreen: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any>;
+    contextType?: React.Context<any> | undefined;
 };

package/lib/dist/Mock/Components/ComponentScreen.js

@@ -34,7 +34,9 @@ exports.ComponentScreen = (0, connect_1.connect)(class extends react_1.Component
             return null;
         const buttons = bottomTabs.children.map((child, i) => {
             const bottomTabOptions = child.resolveOptions().bottomTab;
-            const icon = bottomTabs.selectedIndex === i ? bottomTabOptions?.selectedIcon : bottomTabOptions?.icon;
+            const icon = bottomTabs.selectedIndex === i
+                ? bottomTabOptions?.selectedIcon
+                : bottomTabOptions?.icon;
             const iconURI = isURISource(icon) ? icon.uri : undefined;
             return (react_1.default.createElement(react_native_1.View, { key: `tab-${i}` },
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: { padding: 10 }, testID: bottomTabOptions?.testID, onPress: () => {
@@ -46,10 +48,15 @@ exports.ComponentScreen = (0, connect_1.connect)(class extends react_1.Component
                     } },
                     react_1.default.createElement(react_native_1.View, { style: { justifyContent: 'center', alignItems: 'center' } },
                         react_1.default.createElement(react_native_1.Text, null, bottomTabOptions?.badge),
-                        iconURI && react_1.default.createElement(react_native_1.Image, { style: { width: 18, height: 18, marginBottom: 5 }, source: { uri: iconURI } }),
+                        iconURI && (react_1.default.createElement(react_native_1.Image, { style: { width: 18, height: 18, marginBottom: 5 }, source: { uri: iconURI } })),
                         react_1.default.createElement(react_native_1.Text, { style: { fontSize: 12 } }, bottomTabOptions?.text || '')))));
         });
-        return (react_1.default.createElement(react_native_1.View, { testID: bottomTabsOptions?.testID, style: { flexDirection: 'row', justifyContent: 'center', width: '100%', backgroundColor: '#F0F2F5' } }, buttons));
+        return (react_1.default.createElement(react_native_1.View, { testID: bottomTabsOptions?.testID, style: {
+                flexDirection: 'row',
+                justifyContent: 'center',
+                width: '100%',
+                backgroundColor: '#F0F2F5',
+            } }, buttons));
     }
     render() {
         const Component = react_native_navigation_1.Navigation.mock.store.getWrappedComponent(this.props.layoutNode.data.name);

package/lib/dist/Mock/Components/LayoutComponent.d.ts

@@ -1,15 +1,13 @@
 import React from 'react';
 import { ComponentProps } from '../ComponentProps';
 export declare const LayoutComponent: {
-    new (props: Readonly<ComponentProps>): {
-        render(): JSX.Element;
+    new (props: ComponentProps): {
+        render(): React.JSX.Element;
         componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -26,15 +24,13 @@ export declare const LayoutComponent: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: ComponentProps, context?: any): {
-        render(): JSX.Element;
+    new (props: ComponentProps, context: any): {
+        render(): React.JSX.Element;
         componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -51,5 +47,5 @@ export declare const LayoutComponent: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any>;
+    contextType?: React.Context<any> | undefined;
 };

package/lib/dist/Mock/Components/Modals.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 import { ComponentProps } from '../ComponentProps';
 export declare const Modals: {
-    new (props: Readonly<ComponentProps>): {
-        render(): JSX.Element;
-        context: any;
+    new (props: ComponentProps): {
+        render(): React.JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -26,14 +24,12 @@ export declare const Modals: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: ComponentProps, context?: any): {
-        render(): JSX.Element;
-        context: any;
+    new (props: ComponentProps, context: any): {
+        render(): React.JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -51,5 +47,5 @@ export declare const Modals: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any>;
+    contextType?: React.Context<any> | undefined;
 };

package/lib/dist/Mock/Components/NavigationButton.d.ts

@@ -5,17 +5,15 @@ interface ButtonProps {
     componentId: string;
 }
 export declare const NavigationButton: {
-    new (props: Readonly<ButtonProps>): {
+    new (props: ButtonProps): {
         ref: undefined;
-        render(): JSX.Element;
-        renderButtonComponent(): JSX.Element;
+        render(): React.JSX.Element;
+        renderButtonComponent(): React.JSX.Element;
         invokeOnClick(stateNode: any): void;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ButtonProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ButtonProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ButtonProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -33,17 +31,15 @@ export declare const NavigationButton: {
         componentWillUpdate?(nextProps: Readonly<ButtonProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ButtonProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: ButtonProps, context?: any): {
+    new (props: ButtonProps, context: any): {
         ref: undefined;
-        render(): JSX.Element;
-        renderButtonComponent(): JSX.Element;
+        render(): React.JSX.Element;
+        renderButtonComponent(): React.JSX.Element;
         invokeOnClick(stateNode: any): void;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ButtonProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ButtonProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ButtonProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -61,6 +57,6 @@ export declare const NavigationButton: {
         componentWillUpdate?(nextProps: Readonly<ButtonProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ButtonProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any>;
+    contextType?: React.Context<any> | undefined;
 };
 export {};

package/lib/dist/Mock/Components/Overlays.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 import { ComponentProps } from '../ComponentProps';
 export declare const Overlays: {
-    new (props: Readonly<ComponentProps>): {
-        render(): JSX.Element;
-        context: any;
+    new (props: ComponentProps): {
+        render(): React.JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -26,14 +24,12 @@ export declare const Overlays: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: ComponentProps, context?: any): {
-        render(): JSX.Element;
-        context: any;
+    new (props: ComponentProps, context: any): {
+        render(): React.JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -51,5 +47,5 @@ export declare const Overlays: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any>;
+    contextType?: React.Context<any> | undefined;
 };

package/lib/dist/Mock/Components/Stack.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 import { ComponentProps } from '../ComponentProps';
 export declare const Stack: {
-    new (props: Readonly<ComponentProps>): {
-        render(): JSX.Element[];
-        context: any;
+    new (props: ComponentProps): {
+        render(): React.JSX.Element[];
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -26,14 +24,12 @@ export declare const Stack: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: ComponentProps, context?: any): {
-        render(): JSX.Element[];
-        context: any;
+    new (props: ComponentProps, context: any): {
+        render(): React.JSX.Element[];
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<ComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<ComponentProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -51,5 +47,5 @@ export declare const Stack: {
         componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any>;
+    contextType?: React.Context<any> | undefined;
 };

package/lib/dist/Mock/Components/TopBar.d.ts

@@ -8,17 +8,15 @@ export interface TopBarProps {
 }
 export declare const TopBar: {
     new (props: TopBarProps): {
-        render(): JSX.Element | null;
+        render(): React.JSX.Element | null;
         shouldRenderBackButton(layoutNode: ParentNode): boolean;
-        renderButtons(buttons?: OptionsTopBarButton[]): JSX.Element[];
-        renderBackButton(): JSX.Element;
-        renderComponent(id: string, name: string, testID?: string): JSX.Element;
-        context: any;
+        renderButtons(buttons?: OptionsTopBarButton[]): React.JSX.Element[];
+        renderBackButton(): React.JSX.Element;
+        renderComponent(id: string, name: string, testID?: string): React.JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<TopBarProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<TopBarProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<TopBarProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -36,5 +34,5 @@ export declare const TopBar: {
         componentWillUpdate?(nextProps: Readonly<TopBarProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<TopBarProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any>;
+    contextType?: React.Context<any> | undefined;
 };

package/lib/dist/Mock/connect.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.connect = connect;
+exports.connect = void 0;
 const remx_1 = require("remx");
 function connect(component) {
     // @ts-ignore
     return (0, remx_1.connect)()(component);
 }
+exports.connect = connect;

package/lib/dist/Mock/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApplicationMock = void 0;
-exports.mockNativeComponents = mockNativeComponents;
+exports.mockNativeComponents = exports.ApplicationMock = void 0;
 const tslib_1 = require("tslib");
 exports.ApplicationMock = require('./Application').Application;
 tslib_1.__exportStar(require("./constants"), exports);
@@ -12,3 +11,4 @@ function mockNativeComponents() {
     const { Navigation } = require('react-native-navigation');
     Navigation.mockNativeComponents(new NativeCommandsSender(), new NativeEventsReceiver(), new AppRegistryService());
 }
+exports.mockNativeComponents = mockNativeComponents;

package/lib/dist/src/adapters/NativeEventsReceiver.js

@@ -8,7 +8,7 @@ class NativeEventsReceiver {
         try {
             this.emitter = new react_native_1.NativeEventEmitter(react_native_1.NativeModules.RNNEventEmitter);
         }
-        catch (e) {
+        catch {
             this.emitter = {
                 addListener: () => {
                     return {

package/lib/dist/src/adapters/TouchablePreview.d.ts

@@ -8,7 +8,7 @@ interface GestureResponderEventWithForce extends NativeSyntheticEvent<NativeTouc
 }
 export interface Props {
     children?: React.ReactNode;
-    touchableComponent?: TouchableHighlight | TouchableOpacity | TouchableNativeFeedback | TouchableWithoutFeedback | React.ReactNode;
+    touchableComponent?: typeof TouchableHighlight | typeof TouchableOpacity | TouchableNativeFeedback | TouchableWithoutFeedback | React.ReactNode;
     onPress?: () => void;
     onPressIn?: (payload: {
         reactTag: number | null;
@@ -38,6 +38,6 @@ export declare class TouchablePreview extends React.PureComponent<Props> {
     onTouchStart: (event: GestureResponderEvent) => void;
     onTouchMove: (event: GestureResponderEventWithForce) => void;
     onTouchEnd: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/dist/src/commands/LayoutType.js

@@ -13,4 +13,4 @@ var LayoutType;
     LayoutType["TopTabs"] = "TopTabs";
     LayoutType["ExternalComponent"] = "ExternalComponent";
     LayoutType["SplitView"] = "SplitView";
-})(LayoutType || (exports.LayoutType = LayoutType = {}));
+})(LayoutType = exports.LayoutType || (exports.LayoutType = {}));

package/lib/dist/src/components/Modal.d.ts

@@ -15,6 +15,6 @@ export declare class Modal extends React.Component<RNNModalProps> {
         animationType: string;
     };
     constructor(props: RNNModalProps);
-    render(): JSX.Element | null;
+    render(): React.JSX.Element | null;
     private proccessProps;
 }

package/lib/dist/src/interfaces/CommandName.js

@@ -19,4 +19,4 @@ var CommandName;
     CommandName["DismissOverlay"] = "dismissOverlay";
     CommandName["DismissAllOverlays"] = "dismissAllOverlays";
     CommandName["GetLaunchArgs"] = "getLaunchArgs";
-})(CommandName || (exports.CommandName = CommandName = {}));
+})(CommandName = exports.CommandName || (exports.CommandName = {}));

package/lib/dist/src/interfaces/Options.js

@@ -11,11 +11,11 @@ var OptionsModalPresentationStyle;
     OptionsModalPresentationStyle["popover"] = "popover";
     OptionsModalPresentationStyle["fullScreen"] = "fullScreen";
     OptionsModalPresentationStyle["none"] = "none";
-})(OptionsModalPresentationStyle || (exports.OptionsModalPresentationStyle = OptionsModalPresentationStyle = {}));
+})(OptionsModalPresentationStyle = exports.OptionsModalPresentationStyle || (exports.OptionsModalPresentationStyle = {}));
 var OptionsModalTransitionStyle;
 (function (OptionsModalTransitionStyle) {
     OptionsModalTransitionStyle["coverVertical"] = "coverVertical";
     OptionsModalTransitionStyle["crossDissolve"] = "crossDissolve";
     OptionsModalTransitionStyle["flipHorizontal"] = "flipHorizontal";
     OptionsModalTransitionStyle["partialCurl"] = "partialCurl";
-})(OptionsModalTransitionStyle || (exports.OptionsModalTransitionStyle = OptionsModalTransitionStyle = {}));
+})(OptionsModalTransitionStyle = exports.OptionsModalTransitionStyle || (exports.OptionsModalTransitionStyle = {}));

package/lib/dist/src/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare module 'react-lifecycles-compat' {
     import * as React from 'react';
     function polyfill(component: React.ComponentClass<any>): void;

package/lib/ios/BottomTabsBasePresenter.m

@@ -1,6 +1,7 @@
 #import "BottomTabsBasePresenter.h"
 #import "RNNBottomTabsController.h"
 #import "UIImage+utils.h"
+#import "RNNConvert.h"
 
 @implementation BottomTabsBasePresenter
 
@@ -29,7 +30,7 @@
     [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
+    [bottomTabs setTabBarStyle:[RNNConvert UIBarStyle:[withDefault.bottomTabs.barStyle
                                                           withDefault:@"default"]]];
     [self applyTabBarBorder:withDefault.bottomTabs];
     [self applyTabBarShadow:withDefault.bottomTabs.shadow];
@@ -60,7 +61,7 @@
     }
 
     if (mergeOptions.bottomTabs.barStyle.hasValue) {
-        [bottomTabs setTabBarStyle:[RCTConvert UIBarStyle:mergeOptions.bottomTabs.barStyle.get]];
+        [bottomTabs setTabBarStyle:[RNNConvert UIBarStyle:mergeOptions.bottomTabs.barStyle.get]];
     }
 
     if (mergeOptions.bottomTabs.translucent.hasValue) {

package/lib/ios/RNNAppDelegate.mm

@@ -2,8 +2,7 @@
 #import <ReactNativeNavigation/ReactNativeNavigation.h>
 
 #if RCT_NEW_ARCH_ENABLED
-#import "RCTAppSetupUtils.h"
-#import "RCTLegacyInteropComponents.h"
+
 #import <React/CoreModulesPlugins.h>
 #import <React/RCTCxxBridgeDelegate.h>
 #import <React/RCTLegacyViewManagerInteropComponentView.h>

package/lib/ios/RNNConvert.h

@@ -7,4 +7,7 @@
 
 + (UIModalTransitionStyle)UIModalTransitionStyle:(id)json;
 
++ (UIBarStyle)UIBarStyle:(id)json;
+
+
 @end

package/lib/ios/RNNConvert.m

@@ -32,4 +32,13 @@ RCT_ENUM_CONVERTER(UIModalPresentationStyle, (@{
                    }),
                    UIModalPresentationFullScreen, integerValue)
 
+RCT_ENUM_CONVERTER(
+    UIBarStyle,
+    (@{
+      @"default" : @(UIBarStyleDefault),
+      @"black" : @(UIBarStyleBlack)
+    }),
+    UIBarStyleDefault,
+    integerValue)
+
 @end

package/lib/ios/RNNStackPresenter.m

@@ -5,6 +5,7 @@
 #import "RNNStackController.h"
 #import "TopBarPresenterCreator.h"
 #import "UINavigationController+RNNOptions.h"
+#import "RNNConvert.h"
 
 @interface RNNStackPresenter () {
     RNNReactComponentRegistry *_componentRegistry;
@@ -68,7 +69,7 @@
     stack.interactivePopGestureRecognizer.delegate = _interactivePopGestureDelegate;
 
     [stack
-        setBarStyle:[RCTConvert UIBarStyle:[withDefault.topBar.barStyle withDefault:@"default"]]];
+        setBarStyle:[RNNConvert UIBarStyle:[withDefault.topBar.barStyle withDefault:@"default"]]];
     [stack setRootBackgroundImage:[withDefault.rootBackgroundImage withDefault:nil]];
     [stack setNavigationBarTestId:[withDefault.topBar.testID withDefault:nil]];
     [stack setNavigationBarVisible:[withDefault.topBar.visible withDefault:YES]
@@ -126,7 +127,7 @@
     }
 
     if (mergeOptions.topBar.barStyle.hasValue) {
-        [stack setBarStyle:[RCTConvert UIBarStyle:mergeOptions.topBar.barStyle.get]];
+        [stack setBarStyle:[RNNConvert UIBarStyle:mergeOptions.topBar.barStyle.get]];
     }
 
     if (mergeOptions.topBar.background.clipToBounds.hasValue) {

package/lib/src/adapters/NativeEventsReceiver.ts

@@ -23,14 +23,14 @@ export class NativeEventsReceiver {
   constructor() {
     try {
       this.emitter = new NativeEventEmitter(NativeModules.RNNEventEmitter);
-    } catch (e) {
-      this.emitter = ({
+    } catch {
+      this.emitter = {
         addListener: () => {
           return {
             remove: () => undefined,
           };
         },
-      } as any) as NativeEventEmitter;
+      } as any as NativeEventEmitter;
     }
   }
 

package/lib/src/adapters/TouchablePreview.tsx

@@ -22,8 +22,8 @@ interface GestureResponderEventWithForce extends NativeSyntheticEvent<NativeTouc
 export interface Props {
   children?: React.ReactNode;
   touchableComponent?:
-    | TouchableHighlight
-    | TouchableOpacity
+    | typeof TouchableHighlight
+    | typeof TouchableOpacity
     | TouchableNativeFeedback
     | TouchableWithoutFeedback
     | React.ReactNode;
@@ -121,7 +121,7 @@ export class TouchablePreview extends React.PureComponent<Props> {
     const Touchable =
       Platform.OS === 'ios' && touchableComponent instanceof TouchableNativeFeedback
         ? TouchableWithoutFeedback
-        : (touchableComponent as typeof React.Component);
+        : (touchableComponent as React.Component);
 
     // Wrap component with Touchable for handling platform touches
     // and a single react View for detecting force and timing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "7.41.0",
+  "version": "7.42.0",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,
@@ -64,40 +64,43 @@
     "hoist-non-react-statics": "3.x.x",
     "lodash": "4.17.x",
     "prop-types": "15.x.x",
-    "react-lifecycles-compat": "2.0.0",
+    "react-lifecycles-compat": "^3.0.4",
     "tslib": "1.9.3"
   },
   "devDependencies": {
-    "@babel/core": "7.22.9",
+    "@babel/core": "^7.25.2",
     "@babel/plugin-proposal-export-default-from": "7.10.1",
     "@babel/plugin-proposal-export-namespace-from": "7.10.1",
-    "@babel/runtime": "7.22.6",
-    "@babel/types": "7.22.5",
-    "@babel/preset-env": "^7.22.9",
-    "@react-native/metro-config": "^0.73.2",
-    "@react-native/babel-preset": "^0.73.18",
-    "@react-native/typescript-config": "^0.73.1",
-    "@react-native-community/blur": "^4.4.1",
-    "@react-native-community/datetimepicker": "^3.4.7",
-    "@react-native-community/eslint-config": "2.0.0",
-    "@react-native-community/netinfo": "^5.9.4",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@babel/types": "7.25.0",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
+    "@react-native-community/datetimepicker": "^8.2.0",
+    "@react-native-community/eslint-config": "3.2.0",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-native/babel-preset": "0.76.6",
+    "@react-native/eslint-config": "0.76.6",
+    "@react-native/metro-config": "0.76.6",
+    "@react-native/typescript-config": "0.76.6",
     "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^12.0.1",
-    "@types/hoist-non-react-statics": "^3.0.1",
+    "@testing-library/react-native": "^13.0.1",
+    "@types/hoist-non-react-statics": "^3.3.6",
     "@types/jasmine": "3.5.10",
     "@types/jest": "27.0.2",
     "@types/lodash": "^4.14.149",
-    "@types/react": "16.9.41",
-    "@types/react-native": "0.63.1",
-    "@types/react-test-renderer": "16.9.2",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "8.21.0",
+    "@typescript-eslint/parser": "8.21.0",
     "babel-jest": "^27.0.0",
     "clang-format": "^1.4.0",
-    "detox": "20.19.5",
+    "detox": "20.32.0",
     "detox-testing-library-rnn-adapter": "^2.0.3",
-    "eslint": "7.32.0",
+    "eslint": "^8.19.0",
     "eslint-config-prettier": "6.11.0",
+    "eslint-formatter-codeframe": "^7.32.1",
     "eslint-plugin-prettier": "3.1.4",
     "github-release-notes": "https://github.com/yogevbd/github-release-notes/tarball/e601b3dba72dcd6cba323c1286ea6dd0c0110b58",
     "husky": "4.2.5",
@@ -107,22 +110,22 @@
     "metro-react-native-babel-preset": "^0.76.2",
     "pixelmatch": "^5.2.1",
     "pngjs": "^6.0.0",
-    "prettier": "2.1.2",
-    "react": "18.2.0",
-    "react-native": "0.73.3",
+    "prettier": "2.8.8",
+    "react": "18.3.1",
+    "react-native": "0.76.6",
     "react-native-fast-image": "^8.6.3",
-    "react-native-gesture-handler": "2.14.1",
-    "react-native-reanimated": "3.16.1",
+    "react-native-gesture-handler": "^2.22.1",
+    "react-native-reanimated": "3.16.7",
     "react-native-ui-lib": "7.3.6",
     "react-redux": "5.x.x",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "redux": "3.x.x",
     "remx": "3.x.x",
     "semver": "5.x.x",
     "shell-utils": "1.x.x",
     "ts-mockito": "^2.3.1",
     "typedoc": "0.x.x",
-    "typescript": "5.5.4"
+    "typescript": "5.0.4"
   },
   "husky": {
     "hooks": {
@@ -168,7 +171,7 @@
       "emulator": {
         "type": "android.emulator",
         "device": {
-          "avdName": "Pixel_API_28"
+          "avdName": "Pixel_3a_API_34"
         }
       }
     },
@@ -188,7 +191,10 @@
         "type": "android.apk",
         "binaryPath": "playground/android/app/build/outputs/apk/debug/app-debug.apk",
         "start": "npm start -- --e2e",
-        "build": "cd playground/android && ./gradlew app:assembleDebug app:assembleAndroidTest -DtestBuildType=debug"
+        "build": "cd playground/android && ./gradlew app:assembleDebug app:assembleAndroidTest -DtestBuildType=debug",
+        "reversePorts": [
+          8081
+        ]
       },
       "android.release": {
         "type": "android.apk",