react-native-navigation 7.45.0 → 7.47.0

package/lib/Mock/Components/ComponentScreen.tsx

@@ -25,7 +25,8 @@ export const ComponentScreen = connect(
     }
 
     isVisible(): boolean {
-      return LayoutStore.isVisibleLayout(this.props.layoutNode);
+      const isVisible = LayoutStore.isVisibleLayout(this.props.layoutNode);
+      return isVisible;
     }
 
     renderTabBar() {

package/lib/Mock/Components/LayoutComponent.tsx

@@ -4,6 +4,7 @@ import { BottomTabs } from './BottomTabs';
 import { ComponentProps } from '../ComponentProps';
 import { ComponentScreen } from './ComponentScreen';
 import { Stack } from './Stack';
+import { SideMenuRoot, SideMenuCenter, SideMenuLeft, SideMenuRight } from './SideMenu';
 
 export const LayoutComponent = class extends Component<ComponentProps> {
   render() {
@@ -14,6 +15,14 @@ export const LayoutComponent = class extends Component<ComponentProps> {
         return <Stack layoutNode={this.props.layoutNode} />;
       case 'Component':
         return <ComponentScreen layoutNode={this.props.layoutNode} />;
+      case 'SideMenuRoot':
+        return <SideMenuRoot layoutNode={this.props.layoutNode} />;
+      case 'SideMenuLeft':
+        return <SideMenuLeft layoutNode={this.props.layoutNode} />;
+      case 'SideMenuCenter':
+        return <SideMenuCenter layoutNode={this.props.layoutNode} />;
+      case 'SideMenuRight':
+        return <SideMenuRight layoutNode={this.props.layoutNode} />;
     }
 
     return <View />;

package/lib/Mock/Components/SideMenu.tsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { connect } from '../connect';
+import { ComponentProps } from '../ComponentProps';
+import { LayoutComponent } from './LayoutComponent';
+import ParentNode from '../Layouts/ParentNode';
+
+export const SideMenuRoot = connect(
+  class extends Component<ComponentProps> {
+    render() {
+      const children = this.props.layoutNode.children;
+      return children.map((child: ParentNode) => {
+        return <LayoutComponent key={child.nodeId} layoutNode={child} />;
+      });
+    }
+  }
+);
+
+class SideMenuComponent extends Component<ComponentProps> {
+  render() {
+    const children = this.props.layoutNode.children;
+    const component = children[0];
+    return <LayoutComponent key={component.nodeId} layoutNode={component} />;
+  }
+}
+export const SideMenuLeft = connect(SideMenuComponent);
+export const SideMenuCenter = connect(SideMenuComponent);
+export const SideMenuRight = connect(SideMenuComponent);

package/lib/Mock/Layouts/BottomTabsNode.ts

@@ -10,8 +10,10 @@ export default class BottomTabsNode extends ParentNode {
     this.selectedIndex = layout.data?.options?.bottomTabs?.currentTabIndex || 0;
   }
 
-  mergeOptions(options: Options) {
-    super.mergeOptions(options);
+  mergeOptions(_options: Options) {
+    super.mergeOptions(_options);
+
+    const { options } = this.data;
     if (options.bottomTabs?.currentTabIndex) {
       this.selectedIndex = options.bottomTabs?.currentTabIndex;
       switchTabByIndex(this, this.selectedIndex);

package/lib/Mock/Layouts/LayoutNodeFactory.ts

@@ -2,6 +2,11 @@ import BottomTabs from './BottomTabsNode';
 import ComponentNode from './ComponentNode';
 import Stack from './StackNode';
 import ParentNode from './ParentNode';
+import SideMenuRootNode, {
+  SideMenuLeftNode,
+  SideMenuRightNode,
+  SideMenuCenterNode,
+} from './SideMenu';
 
 export default class LayoutNodeFactory {
   static create(layout: any, parentNode?: ParentNode) {
@@ -10,7 +15,15 @@ export default class LayoutNodeFactory {
         return new ComponentNode(layout, parentNode);
       case 'Stack':
         return new Stack(layout, parentNode);
-      default:
+      case 'SideMenuRoot':
+        return new SideMenuRootNode(layout, parentNode);
+      case 'SideMenuLeft':
+        return new SideMenuLeftNode(layout, parentNode);
+      case 'SideMenuCenter':
+        return new SideMenuCenterNode(layout, parentNode);
+      case 'SideMenuRight':
+        return new SideMenuRightNode(layout, parentNode);
+      default: // TODO Undo
       case 'BottomTabs':
         return new BottomTabs(layout, parentNode);
     }

package/lib/Mock/Layouts/ParentNode.ts

@@ -35,6 +35,10 @@ export default class ParentNode extends Node {
     return this;
   }
 
+  applyOptions(_options: Options) {
+    this.parentNode?.applyOptions(_options);
+  }
+
   mergeOptions(options: Options) {
     this.data.options = _.mergeWith(this.data.options, options, (objValue, srcValue, key) => {
       if (_.isArray(objValue)) {

package/lib/Mock/Layouts/SideMenu.ts

@@ -0,0 +1,87 @@
+import ParentNode from './ParentNode';
+import ComponentNode from './ComponentNode';
+import { Options } from '../../src/index';
+import * as layoutActions from '../actions/layoutActions';
+import { NodeType } from './Node';
+
+const isCenterChild = (child: ParentNode) => child.type === 'SideMenuCenter';
+const isLeftChild = (child: ParentNode) => child.type === 'SideMenuLeft';
+const isRightChild = (child: ParentNode) => child.type === 'SideMenuRight';
+
+export default class SideMenuRootNode extends ParentNode {
+  visibleChild: ParentNode;
+
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuRoot', parentNode);
+
+    this.visibleChild = this._getCenterChild();
+    if (!this.visibleChild) {
+      throw new Error('SideMenuRootNode must have a SideMenuCenter child');
+    }
+  }
+
+  applyOptions(_options: Options) {
+    super.applyOptions(_options);
+
+    this._updateVisibility(_options);
+  }
+
+  mergeOptions(options: Options) {
+    super.mergeOptions(options);
+
+    this._updateVisibility(options);
+  }
+
+  /**
+   * @override
+   */
+  getVisibleLayout(): ComponentNode {
+    return this.visibleChild.getVisibleLayout();
+  }
+
+  _updateVisibility(options: Options) {
+    if (options.sideMenu) {
+      if (options.sideMenu.left?.visible) {
+        this.visibleChild = this._getLeftChild();
+        layoutActions.openSideMenu(this.visibleChild);
+      } else if (options.sideMenu.right?.visible) {
+        this.visibleChild = this._getRightChild();
+        layoutActions.openSideMenu(this.visibleChild);
+      } else {
+        this.visibleChild = this._getCenterChild();
+        layoutActions.closeSideMenu(this.visibleChild);
+      }
+    }
+  }
+
+  _getCenterChild = () => this.children.find(isCenterChild) as ParentNode;
+  _getLeftChild = () => this.children.find(isLeftChild) as ParentNode;
+  _getRightChild = () => this.children.find(isRightChild) as ParentNode;
+}
+
+export class SideMenuNode extends ParentNode {
+  constructor(layout: any, type: NodeType, parentNode?: ParentNode) {
+    super(layout, type, parentNode);
+  }
+
+  getVisibleLayout() {
+    return this.children[0].getVisibleLayout();
+  }
+}
+
+export class SideMenuLeftNode extends SideMenuNode {
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuLeft', parentNode);
+  }
+}
+export class SideMenuRightNode extends SideMenuNode {
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuRight', parentNode);
+  }
+}
+
+export class SideMenuCenterNode extends SideMenuNode {
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuCenter', parentNode);
+  }
+}

package/lib/Mock/Stores/LayoutStore.ts

@@ -2,8 +2,9 @@ import _ from 'lodash';
 import BottomTabsNode from '../Layouts/BottomTabsNode';
 import ParentNode from '../Layouts/ParentNode';
 import LayoutNodeFactory from '../Layouts/LayoutNodeFactory';
-import { Options } from '../../src/interfaces/Options';
+import { SideMenuNode } from '../Layouts/SideMenu';
 import StackNode from '../Layouts/StackNode';
+import { Options } from '../../src/interfaces/Options';
 
 const remx = require('remx');
 
@@ -11,6 +12,7 @@ const state = remx.state({
   root: {},
   modals: [],
   overlays: [],
+  sideMenu: undefined,
 });
 
 const setters = remx.setters({
@@ -75,6 +77,23 @@ const setters = remx.setters({
   selectTabIndex(layout: BottomTabsNode, index: number) {
     getters.getLayoutById(layout.nodeId).selectedIndex = index;
   },
+  openSideMenu(layout: SideMenuNode) {
+    if (state.sideMenu) {
+      throw new Error(
+        'A side-menu is already open; Mocked-testing of multiple side-menu scenarios is not supported yet.' +
+          ' You can submit a request in https://github.com/wix/react-native-navigation/issues/new/choose.'
+      );
+    }
+    state.sideMenu = layout;
+  },
+  closeSideMenu(_layout: SideMenuNode) {
+    state.sideMenu = undefined;
+  },
+  applyOptions(componentId: string, options: Options) {
+    const layout = getters.getLayoutById(componentId);
+    if (layout) layout.applyOptions(options);
+    else console.warn(`[RNN error] Merge options failure: cannot find layout for: ${componentId}`);
+  },
   mergeOptions(componentId: string, options: Options) {
     const layout = getters.getLayoutById(componentId);
     if (layout) layout.mergeOptions(options);
@@ -87,12 +106,26 @@ const getters = remx.getters({
     return state.root;
   },
   getVisibleLayout() {
+    let layout: ParentNode | undefined;
     if (state.modals.length > 0) {
-      return _.last<ParentNode>(state.modals)!.getVisibleLayout();
-    } else if (!_.isEqual(state.root, {})) return state.root.getVisibleLayout();
+      layout = _.last<ParentNode>(state.modals)!;
+    } else if (!_.isEqual(state.root, {})) {
+      layout = state.root;
+    }
+
+    // Note: While this logic should be fair for all use cases (i.e. even multiple side-menus across tabs),
+    // there is no current test case that justifies it. Nevertheless, it's required to pass the tests,
+    // because otherwise getVisibleLayout() would not be revisited whenever side-menus are opened/closed.
+    if (layout && state.sideMenu && findNode(state.sideMenu.nodeId, layout!)) {
+      layout = state.sideMenu.parentNode;
+    }
+
+    return layout?.getVisibleLayout();
   },
   isVisibleLayout(layout: ParentNode) {
-    return getters.getVisibleLayout() && getters.getVisibleLayout().nodeId === layout.nodeId;
+    const nodeId = layout.nodeId;
+    const visibleLayout = getters.getVisibleLayout();
+    return visibleLayout?.nodeId === nodeId;
   },
   getModals() {
     return state.modals;
@@ -101,13 +134,12 @@ const getters = remx.getters({
     return state.overlays;
   },
   getLayoutById(layoutId: string) {
-    if (getters.getModalById(layoutId))
-      return findParentNode(layoutId, getters.getModalById(layoutId));
+    if (getters.getModalById(layoutId)) return findNode(layoutId, getters.getModalById(layoutId));
 
-    return findParentNode(layoutId, state.root);
+    return findNode(layoutId, state.root);
   },
   getModalById(layoutId: string) {
-    return _.find(state.modals, (layout) => findParentNode(layoutId, layout));
+    return _.find(state.modals, (layout) => findNode(layoutId, layout));
   },
   getLayoutChildren(layoutId: string) {
     return getters.getLayoutById(layoutId).children;
@@ -120,13 +152,13 @@ const getters = remx.getters({
   },
 });
 
-function findParentNode(layoutId: string, layout: ParentNode): any | ParentNode {
+function findNode(layoutId: string, layout: ParentNode): any | ParentNode {
   if (layoutId === layout.nodeId) {
     return layout;
   } else if (layout.children) {
     for (let i = 0; i < layout.children.length; i += 1) {
       const child = layout.children[i];
-      const result = findParentNode(layoutId, child);
+      const result = findNode(layoutId, child);
 
       if (result !== false) {
         return result;

package/lib/Mock/actions/layoutActions.ts

@@ -1,4 +1,5 @@
 import ParentNode from '../Layouts/ParentNode';
+import { SideMenuNode } from '../Layouts/SideMenu';
 import { LayoutStore } from '../Stores/LayoutStore';
 
 export const switchTabByIndex = (bottomTabs: ParentNode | undefined, index: number) => {
@@ -8,3 +9,13 @@ export const switchTabByIndex = (bottomTabs: ParentNode | undefined, index: numb
     LayoutStore.getVisibleLayout().componentDidAppear();
   }
 };
+
+export const openSideMenu = (sideMenu: SideMenuNode) => {
+  LayoutStore.openSideMenu(sideMenu);
+  LayoutStore.getVisibleLayout().componentDidAppear();
+};
+
+export const closeSideMenu = (layout: SideMenuNode) => {
+  LayoutStore.getVisibleLayout().componentDidDisappear();
+  LayoutStore.closeSideMenu(layout);
+};

package/lib/Mock/index.js

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

package/lib/Mock/mocks/NativeCommandsSender.tsx

@@ -39,6 +39,7 @@ export class NativeCommandsSender {
       const layoutNode = LayoutNodeFactory.create(layout, stack);
       stack.getVisibleLayout().componentDidDisappear();
       LayoutStore.push(layoutNode, stack);
+      LayoutStore.applyOptions(layoutNode.nodeId, layoutNode.data.options);
       stack.getVisibleLayout().componentDidAppear();
       resolve(stack.getVisibleLayout().nodeId);
       this.reportCommandCompletion(CommandName.Push, commandId);

package/lib/android/app/build.gradle

@@ -20,7 +20,6 @@ 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

@@ -2,20 +2,18 @@ package com.reactnativenavigation;
 
 import android.app.Application;
 
+import androidx.annotation.NonNull;
+
 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.util.Collections;
-import java.io.IOException;
 import java.util.HashMap;
 import java.util.Map;
 
-import androidx.annotation.NonNull;
-
 public abstract class NavigationApplication extends Application implements ReactApplication {
 
 	public static NavigationApplication instance;
@@ -35,11 +33,7 @@ public abstract class NavigationApplication extends Application implements React
 	@Override
 	public void onCreate() {
 		super.onCreate();
-        try {
-            SoLoader.init(this, OpenSourceMergedSoMapping.INSTANCE);
-        } catch (IOException e) {
-            throw new RuntimeException(e);
-        }
+        SoLoader.init(this, false);
         reactGateway = createReactGateway();
 	}
 

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

@@ -5,8 +5,6 @@ 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;
@@ -14,12 +12,14 @@ 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,7 +18,6 @@ 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;
@@ -97,12 +96,12 @@ public class ReactTypefaceUtils {
 
     int want = 0;
     if ((weight == Typeface.BOLD)
-        || ((oldStyle & Typeface.BOLD) != 0 && weight == ReactConstants.UNSET)) {
+        || ((oldStyle & Typeface.BOLD) != 0 && weight == ReactTextShadowNode.UNSET)) {
       want |= Typeface.BOLD;
     }
 
     if ((style == Typeface.ITALIC)
-        || ((oldStyle & Typeface.ITALIC) != 0 && style == ReactConstants.UNSET)) {
+        || ((oldStyle & Typeface.ITALIC) != 0 && style == ReactTextShadowNode.UNSET)) {
       want |= Typeface.ITALIC;
     }
 

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

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

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

@@ -5,6 +5,8 @@ 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;
 
@@ -12,9 +14,6 @@ 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) {
@@ -108,10 +107,9 @@ public class ViewUtils {
         return ((ViewGroup) parent).indexOfChild(view);
     }
 
-    @UnstableReactNativeAPI
     public static int getBackgroundColor(View view) {
-        if (view.getBackground() instanceof CSSBackgroundDrawable) {
-            return ((CSSBackgroundDrawable) view.getBackground()).getColor();
+        if (view.getBackground() instanceof ReactViewBackgroundDrawable) {
+            return ((ReactViewBackgroundDrawable) 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,19 +1,15 @@
 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 {
-    @SuppressLint("WrongConstant")
-    fun apply(root: ViewController<*>, options: Options) {
-        val currentContext = root.view?.context ?: return
-
-        if (options.layout.direction.hasValue()) {
+    fun apply(root: ViewController<*>, options: Options, instanceManager: ReactInstanceManager) {
+        if (options.layout.direction.hasValue() && instanceManager.currentReactContext != null) {
             root.activity.window.decorView.layoutDirection = options.layout.direction.get()
-            I18nUtil.instance.allowRTL(currentContext, options.layout.direction.isRtl)
-            I18nUtil.instance.forceRTL(currentContext, options.layout.direction.isRtl)
+            I18nUtil.getInstance().allowRTL(instanceManager.currentReactContext, options.layout.direction.isRtl)
+            I18nUtil.getInstance().forceRTL(instanceManager.currentReactContext, 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);
+        layoutDirectionApplier.apply(appearingRoot, defaultOptions, reactInstanceManager);
         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,23 +4,21 @@ 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 CSSBackgroundDrawable &&
-                toChild.background is CSSBackgroundDrawable && (fromChild.background as CSSBackgroundDrawable).color != (toChild.background as CSSBackgroundDrawable).color
+        return fromChild.background is ReactViewBackgroundDrawable &&
+                toChild.background is ReactViewBackgroundDrawable && (fromChild.background as ReactViewBackgroundDrawable).color != (toChild.background as ReactViewBackgroundDrawable).color
     }
 
     override fun excludedViews() = listOf(ReactTextView::class.java)
 
     override fun create(options: SharedElementTransitionOptions): Animator {
-        val backgroundColorEvaluator = BackgroundColorEvaluator(to.background as CSSBackgroundDrawable)
+        val backgroundColorEvaluator = BackgroundColorEvaluator(to.background as ReactViewBackgroundDrawable)
         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,13 +2,11 @@ package com.reactnativenavigation.views.element.animators
 
 import android.animation.TypeEvaluator
 import androidx.core.graphics.ColorUtils
-import com.facebook.react.common.annotations.UnstableReactNativeAPI
-import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
+import com.facebook.react.views.view.ReactViewBackgroundDrawable
 
-class BackgroundColorEvaluator @OptIn(UnstableReactNativeAPI::class) constructor(private val background: CSSBackgroundDrawable) : TypeEvaluator<DoubleArray> {
+class BackgroundColorEvaluator(private val background: ReactViewBackgroundDrawable) : 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,11 +4,13 @@ interface ApplicationProps {
 }
 export declare const Application: {
     new (props: ApplicationProps): {
-        render(): React.JSX.Element;
-        context: unknown;
+        render(): JSX.Element;
+        context: any;
         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 props: Readonly<ApplicationProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -26,6 +28,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> | undefined;
+    contextType?: React.Context<any>;
 };
 export {};