From 02e2146ee6a3effad6c9fc65049ecbaa69d7641a Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Thu, 22 Jul 2021 13:52:09 +0300
Subject: [PATCH 01/43] run modals and test overlays temp

---
 e2e/Modals.test.js                     |  7 +++++++
 playground/src/screens/ModalScreen.tsx | 12 ++++++++++--
 scripts/test-e2e.js                    |  2 +-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/e2e/Modals.test.js b/e2e/Modals.test.js
index 5b5b37685fa..07663823d42 100644
--- a/e2e/Modals.test.js
+++ b/e2e/Modals.test.js
@@ -161,4 +161,11 @@ describe('modal', () => {
     await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
     await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
   });
+
+  it.only('overlay should be clickable when using react-native modal', async () => {
+    await elementById(TestIDs.TOGGLE_REACT_NATIVE_MODAL).tap();
+    await elementById(TestIDs.SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL).tap();
+    await elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON).tap();
+    await expect(elementByLabel('ReactNative modal in action!')).toBeVisible();
+  });
 });
diff --git a/playground/src/screens/ModalScreen.tsx b/playground/src/screens/ModalScreen.tsx
index bba3c40595e..093f1a0660b 100644
--- a/playground/src/screens/ModalScreen.tsx
+++ b/playground/src/screens/ModalScreen.tsx
@@ -131,18 +131,19 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
         />
 
         <Modal visible={this.state.reactNativeModalVisible} animationType={'slide'}>
-          <Root>
+          <Root componentId={this.props.componentId} footer={`ReactNative modal in action!`}>
             <Button label="Toggle react-native modal" onPress={this.toggleModal} />
+            <Button label="Show overlay" onPress={this.showOverlay} />
             <Button
               label="Present another modal and dismiss current modal"
               testID={SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL}
               onPress={async () => {
+                this.toggleModal();
                 await Navigation.showModal({
                   component: {
                     name: Screens.Modal,
                   },
                 });
-                this.toggleModal();
               }}
             />
           </Root>
@@ -151,6 +152,13 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
     );
   }
 
+  showOverlay = async () => {
+    await Navigation.showOverlay({
+      component: {
+        name: Screens.OverlayAlert,
+      },
+    });
+  };
   toggleModal = () =>
     this.setState({ reactNativeModalVisible: !this.state.reactNativeModalVisible });
 
diff --git a/scripts/test-e2e.js b/scripts/test-e2e.js
index 2591595bfd6..4ec858cb49d 100644
--- a/scripts/test-e2e.js
+++ b/scripts/test-e2e.js
@@ -27,7 +27,7 @@ function run() {
     exec.execSync(`detox build --configuration ${configuration}`);
   }
   exec.execSync(
-    `detox test --configuration ${configuration} ${headless$} -w ${workers} ${loglevel}`
+    `detox test --configuration ${configuration} -w 1 ${loglevel} e2e/Modals.test.js`
     // "Buttons.test.js" --loglevel trace`
   );
 }

From 9c22fc7e90a4d0469dd2353d674c4a6418e42fb5 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Mon, 2 Aug 2021 13:47:55 +0300
Subject: [PATCH 02/43] tmp

---
 .../NavigationActivity.java                   |   2 +-
 .../react/DeclaredLayout.kt                   | 111 +++++++++++++++
 .../react/DeclaredLayoutController.kt         |  37 +++++
 .../react/DeclaredLayoutHost.kt               | 123 +++++++++++++++++
 .../react/NavigationModule.java               |   5 +
 .../react/NavigationPackage.java              |  41 ------
 .../react/NavigationPackage.kt                |  25 ++++
 .../react/NavigationReactInitializer.java     | 129 +++++++++++-------
 .../react/RNNModalViewManager.kt              |  83 +++++++++++
 .../utils/CoordinatorLayoutUtils.java         |   1 +
 .../component/ComponentPresenterBase.java     |   4 +
 .../viewcontrollers/modal/ModalStack.java     |   6 +
 .../viewcontrollers/navigator/Navigator.java  |  56 +++++++-
 .../overlay/OverlayManager.java               |   9 +-
 .../react/ReactGateway.java                   |   2 +-
 lib/src/components/RNNModal.tsx               |  10 ++
 lib/src/index.ts                              |   2 +-
 playground/android/app/build.gradle           |   1 +
 playground/src/screens/LayoutsScreen.tsx      |  10 ++
 playground/src/screens/ModalScreen.tsx        |  23 ++--
 scripts/start.js                              |   2 +-
 21 files changed, 572 insertions(+), 110 deletions(-)
 create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt
 create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
 create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
 delete mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.java
 create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
 create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
 create mode 100644 lib/src/components/RNNModal.tsx

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java b/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java
index ff5cbe313cb..787a7914d35 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java
@@ -29,7 +29,7 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
     @Nullable
     private PermissionListener mPermissionListener;
     
-    protected Navigator navigator;
+    private Navigator navigator;
 
     @Override
     protected void onCreate(@Nullable Bundle savedInstanceState) {
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt
new file mode 100644
index 00000000000..adc49bb341d
--- /dev/null
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt
@@ -0,0 +1,111 @@
+package com.reactnativenavigation.react
+
+import android.content.Context
+import android.view.MotionEvent
+import android.view.View
+import androidx.annotation.UiThread
+import com.facebook.react.bridge.*
+import com.facebook.react.uimanager.*
+import com.facebook.react.uimanager.FabricViewStateManager.HasFabricViewStateManager
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.views.view.ReactViewGroup
+
+class DeclaredLayout(context: Context?) : ReactViewGroup(context), RootView,
+    HasFabricViewStateManager{
+    private var hasAdjustedSize = false
+    private var viewWidth = 0
+    private var viewHeight = 0
+    private val mFabricViewStateManager = FabricViewStateManager()
+    private val mJSTouchDispatcher = JSTouchDispatcher(this)
+    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+        super.onSizeChanged(w, h, oldw, oldh)
+        viewWidth = w
+        viewHeight = h
+        this.updateFirstChildView()
+    }
+    private fun updateFirstChildView() {
+        if (this.childCount > 0) {
+            hasAdjustedSize = false
+            val viewTag = getChildAt(0).id
+            if (mFabricViewStateManager.hasStateWrapper()) {
+                updateState(viewWidth, viewHeight)
+            } else {
+                val reactContext: ReactContext = this.getReactContext()
+                reactContext.runOnNativeModulesQueueThread(object : GuardedRunnable(reactContext) {
+                    override fun runGuarded() {
+                        val uiManager = this@DeclaredLayout.getReactContext().getNativeModule<UIManagerModule>(
+                            UIManagerModule::class.java
+                        ) as UIManagerModule
+                        uiManager.updateNodeSize(
+                            viewTag,
+                            this@DeclaredLayout.viewWidth,
+                            this@DeclaredLayout.viewHeight
+                        )
+                    }
+                })
+            }
+        } else {
+            hasAdjustedSize = true
+        }
+    }
+
+    @UiThread
+    fun updateState(width: Int, height: Int) {
+        val realWidth = PixelUtil.toDIPFromPixel(width.toFloat())
+        val realHeight = PixelUtil.toDIPFromPixel(height.toFloat())
+        val currentState = this.fabricViewStateManager.state
+        if (currentState != null) {
+            val delta = 0.9f
+            val stateScreenHeight = if (currentState.hasKey("screenHeight")) currentState.getDouble("screenHeight")
+                .toFloat() else 0.0f
+            val stateScreenWidth = if (currentState.hasKey("screenWidth")) currentState.getDouble("screenWidth")
+                .toFloat() else 0.0f
+            if (Math.abs(stateScreenWidth - realWidth) < delta && Math.abs(stateScreenHeight - realHeight) < delta) {
+                return
+            }
+        }
+        mFabricViewStateManager.setState {
+            val map: WritableMap = WritableNativeMap()
+            map.putDouble("screenWidth", realWidth.toDouble())
+            map.putDouble("screenHeight", realHeight.toDouble())
+            map
+        }
+    }
+    override fun addView(child: View?, index: Int, params: LayoutParams?) {
+        super.addView(child, index, params)
+        if (hasAdjustedSize) {
+            updateFirstChildView()
+        }
+    }
+    override fun onChildStartedNativeGesture(androidEvent: MotionEvent?) {
+        mJSTouchDispatcher.onChildStartedNativeGesture(androidEvent, this.getEventDispatcher())
+    }
+    override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {}
+    private fun getEventDispatcher(): EventDispatcher? {
+        val reactContext: ReactContext = this.getReactContext()
+        return reactContext.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
+    }
+
+    override fun getFabricViewStateManager(): FabricViewStateManager {
+        return mFabricViewStateManager
+    }
+    override fun handleException(t: Throwable?) {
+        getReactContext().handleException(RuntimeException(t))
+    }
+
+    private fun getReactContext(): ReactContext {
+        return this.context as ReactContext
+    }
+
+    override fun onInterceptTouchEvent(event: MotionEvent?): Boolean {
+        mJSTouchDispatcher.handleTouchEvent(event, getEventDispatcher())
+        return super.onInterceptTouchEvent(event)
+    }
+
+    override fun onTouchEvent(event: MotionEvent?): Boolean {
+        mJSTouchDispatcher.handleTouchEvent(event, getEventDispatcher())
+        super.onTouchEvent(event)
+        return true
+    }
+
+}
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
new file mode 100644
index 00000000000..0422abdc334
--- /dev/null
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
@@ -0,0 +1,37 @@
+package com.reactnativenavigation.react
+
+import android.app.Activity
+import com.reactnativenavigation.options.Options
+import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController
+import com.reactnativenavigation.viewcontrollers.viewcontroller.YellowBoxDelegate
+import com.reactnativenavigation.viewcontrollers.viewcontroller.overlay.ViewControllerOverlay
+
+class DeclaredLayoutController(
+    activity: Activity?,
+    id: String?,
+    yellowBoxDelegate: YellowBoxDelegate?,
+    initialOptions: Options?,
+    overlay: ViewControllerOverlay?
+) : ViewController<DeclaredLayout>(activity, id, yellowBoxDelegate, initialOptions, overlay) {
+    override fun isViewShown(): Boolean {
+        return !isDestroyed && view != null && view!!.isShown
+    }
+
+    override fun isRendered(): Boolean {
+        return isViewCreated
+    }
+
+    override fun getCurrentComponentName(): String = "GenericDeclaredLayoutController"
+
+    override fun getView(): DeclaredLayout {
+        return createView()
+    }
+    override fun createView(): DeclaredLayout {
+        return DeclaredLayout(activity)
+    }
+
+    override fun sendOnNavigationButtonPressed(buttonId: String?) {
+        TODO("Not yet implemented")
+    }
+
+}
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
new file mode 100644
index 00000000000..56c85e0fedf
--- /dev/null
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
@@ -0,0 +1,123 @@
+package com.reactnativenavigation.react
+
+import android.annotation.TargetApi
+import android.app.Activity
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewStructure
+import android.view.accessibility.AccessibilityEvent
+import android.widget.FrameLayout
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.uimanager.FabricViewStateManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.reactnativenavigation.options.Options
+import com.reactnativenavigation.utils.CompatUtils
+import com.reactnativenavigation.viewcontrollers.viewcontroller.YellowBoxDelegate
+import com.reactnativenavigation.viewcontrollers.viewcontroller.overlay.ViewControllerOverlay
+import java.util.*
+
+open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reactContext), LifecycleEventListener,
+    FabricViewStateManager.HasFabricViewStateManager {
+    val viewController = DeclaredLayoutController(
+        reactContext.currentActivity, CompatUtils.generateViewId().toString(),
+        YellowBoxDelegate(reactContext), Options.EMPTY, ViewControllerOverlay(reactContext)
+    )
+    private val mHostView = viewController.view
+
+    init {
+        (context as ReactContext).addLifecycleEventListener(this)
+    }
+
+    @TargetApi(23)
+    override fun dispatchProvideStructure(structure: ViewStructure?) {
+        mHostView.dispatchProvideStructure(structure)
+    }
+
+    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {}
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        this.dismiss()
+    }
+
+    override fun addView(child: View?, index: Int) {
+        UiThreadUtil.assertOnUiThread()
+        mHostView.addView(child, index)
+    }
+
+    override fun getChildCount(): Int {
+        return mHostView.childCount
+    }
+
+    override fun getChildAt(index: Int): View? {
+        return mHostView.getChildAt(index)
+    }
+
+    override fun removeView(child: View?) {
+        UiThreadUtil.assertOnUiThread()
+        mHostView.removeView(child)
+    }
+
+    override fun removeViewAt(index: Int) {
+        UiThreadUtil.assertOnUiThread()
+        val child = getChildAt(index)
+        mHostView.removeView(child)
+    }
+
+    override fun addChildrenForAccessibility(outChildren: ArrayList<View?>?) {}
+
+    override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent?): Boolean {
+        return false
+    }
+
+    open fun onDropInstance() {
+        (this.context as ReactContext).removeLifecycleEventListener(this)
+        this.dismiss()
+    }
+
+     open fun dismiss() {
+        UiThreadUtil.assertOnUiThread()
+            val parent = mHostView.parent as ViewGroup
+            parent.removeViewAt(0)
+        }
+    override fun onHostResume() {
+        this.showOrUpdate()
+    }
+
+    override fun onHostPause() {}
+
+    override fun onHostDestroy() {
+        onDropInstance()
+    }
+    private fun getCurrentActivity(): Activity? {
+        return (this.context as ReactContext).currentActivity
+    }
+
+     open fun showOrUpdate() {
+        UiThreadUtil.assertOnUiThread()
+        val currentActivity = getCurrentActivity()
+        val context = currentActivity ?: this.context
+
+    }
+
+     open fun getContentView(): View? {
+        val frameLayout = FrameLayout(this.context)
+        frameLayout.addView(mHostView)
+//        if (this.mStatusBarTranslucent) {
+//            frameLayout.systemUiVisibility = 1024
+//        } else {
+//            frameLayout.fitsSystemWindows = true
+//        }
+        return frameLayout
+    }
+
+    override fun getFabricViewStateManager(): FabricViewStateManager? {
+        return mHostView.fabricViewStateManager
+    }
+    open fun updateState(width: Int, height: Int) {
+        mHostView.updateState(width, height)
+    }
+
+}
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
index 2b30edf37c9..5cf7e0666d2 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
@@ -4,11 +4,14 @@
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.ViewManager;
+import com.facebook.react.views.modal.ReactModalHostManager;
 import com.reactnativenavigation.NavigationActivity;
 import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.options.LayoutFactory;
@@ -27,6 +30,8 @@
 import com.reactnativenavigation.viewcontrollers.navigator.Navigator;
 
 import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.java b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.java
deleted file mode 100644
index eaf79c8df9b..00000000000
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.java
+++ /dev/null
@@ -1,41 +0,0 @@
-package com.reactnativenavigation.react;
-
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-import com.reactnativenavigation.options.LayoutFactory;
-
-import java.util.Collections;
-import java.util.List;
-
-import androidx.annotation.NonNull;
-
-import static java.util.Collections.singletonList;
-
-public class NavigationPackage implements ReactPackage {
-
-    private ReactNativeHost reactNativeHost;
-
-    public NavigationPackage(final ReactNativeHost reactNativeHost) {
-        this.reactNativeHost = reactNativeHost;
-    }
-
-    @NonNull
-    @Override
-    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
-        return singletonList(new NavigationModule(
-                        reactContext,
-                        reactNativeHost.getReactInstanceManager(),
-                        new LayoutFactory(reactNativeHost.getReactInstanceManager())
-                )
-        );
-    }
-
-    @NonNull
-    @Override
-    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
-        return Collections.emptyList();
-    }
-}
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
new file mode 100644
index 00000000000..64e9e824208
--- /dev/null
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
@@ -0,0 +1,25 @@
+package com.reactnativenavigation.react
+
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+import com.reactnativenavigation.NavigationActivity
+import com.reactnativenavigation.options.LayoutFactory
+
+class NavigationPackage(private val reactNativeHost: ReactNativeHost) : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return listOf(
+            NavigationModule(
+                reactContext,
+                reactNativeHost.reactInstanceManager,
+                LayoutFactory(reactNativeHost.reactInstanceManager)
+            )
+        )
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return listOf(RNNModalViewManager((reactContext.currentActivity as NavigationActivity).navigator))
+    }
+}
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
index c289d6f6eb9..939933df132 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
@@ -1,75 +1,106 @@
 package com.reactnativenavigation.react;
 
+import android.view.View;
+
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.uimanager.NativeViewHierarchyManager;
+import com.facebook.react.uimanager.ReactShadowNode;
+import com.facebook.react.uimanager.UIBlock;
+import com.facebook.react.uimanager.UIImplementation;
+import com.facebook.react.uimanager.UIManagerModule;
+import com.facebook.react.uimanager.UIManagerModuleListener;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.EventDispatcherListener;
+import com.facebook.react.views.modal.ReactModalHostManager;
+import com.facebook.react.views.modal.ReactModalHostView;
 import com.reactnativenavigation.NavigationActivity;
 import com.reactnativenavigation.react.events.EventEmitter;
+import com.reactnativenavigation.utils.LogKt;
 
 import androidx.annotation.NonNull;
 
 public class NavigationReactInitializer implements ReactInstanceManager.ReactInstanceEventListener {
 
-	private final ReactInstanceManager reactInstanceManager;
-	private final DevPermissionRequest devPermissionRequest;
-	private boolean waitingForAppLaunchEvent = true;
-	private boolean isActivityReadyForUi = false;
+    private final ReactInstanceManager reactInstanceManager;
+    private final DevPermissionRequest devPermissionRequest;
+    private boolean waitingForAppLaunchEvent = true;
+    private boolean isActivityReadyForUi = false;
+    NavigationActivity _activity;
 
-	NavigationReactInitializer(ReactInstanceManager reactInstanceManager, boolean isDebug) {
-		this.reactInstanceManager = reactInstanceManager;
-		this.devPermissionRequest = new DevPermissionRequest(isDebug);
-	}
+    NavigationReactInitializer(ReactInstanceManager reactInstanceManager, boolean isDebug) {
+        this.reactInstanceManager = reactInstanceManager;
+        this.devPermissionRequest = new DevPermissionRequest(isDebug);
+    }
 
-	void onActivityCreated() {
-		reactInstanceManager.addReactInstanceEventListener(this);
-		waitingForAppLaunchEvent = true;
-	}
+    void onActivityCreated(NavigationActivity activity) {
+        _activity = activity;
+        reactInstanceManager.addReactInstanceEventListener(this);
+        waitingForAppLaunchEvent = true;
+    }
 
-	void onActivityResumed(NavigationActivity activity) {
-		if (devPermissionRequest.shouldAskPermission(activity)) {
-			devPermissionRequest.askPermission(activity);
-		} else {
-			reactInstanceManager.onHostResume(activity, activity);
+    void onActivityResumed(NavigationActivity activity) {
+        if (devPermissionRequest.shouldAskPermission(activity)) {
+            devPermissionRequest.askPermission(activity);
+        } else {
+            reactInstanceManager.onHostResume(activity, activity);
             isActivityReadyForUi = true;
-			prepareReactApp();
-		}
-	}
+            prepareReactApp();
+        }
+    }
 
-	void onActivityPaused(NavigationActivity activity) {
+    void onActivityPaused(NavigationActivity activity) {
         isActivityReadyForUi = false;
-		if (reactInstanceManager.hasStartedCreatingInitialContext()) {
-			reactInstanceManager.onHostPause(activity);
-		}
-	}
+        if (reactInstanceManager.hasStartedCreatingInitialContext()) {
+            reactInstanceManager.onHostPause(activity);
+        }
+    }
 
-	void onActivityDestroyed(NavigationActivity activity) {
-		reactInstanceManager.removeReactInstanceEventListener(this);
-		if (reactInstanceManager.hasStartedCreatingInitialContext()) {
-			reactInstanceManager.onHostDestroy(activity);
-		}
-	}
+    void onActivityDestroyed(NavigationActivity activity) {
+        reactInstanceManager.removeReactInstanceEventListener(this);
+        if (reactInstanceManager.hasStartedCreatingInitialContext()) {
+            reactInstanceManager.onHostDestroy(activity);
+        }
+    }
 
-	private void prepareReactApp() {
-		if (shouldCreateContext()) {
-			reactInstanceManager.createReactContextInBackground();
-		} else if (waitingForAppLaunchEvent) {
+    private void prepareReactApp() {
+        if (shouldCreateContext()) {
+            reactInstanceManager.createReactContextInBackground();
+        } else if (waitingForAppLaunchEvent) {
             if (reactInstanceManager.getCurrentReactContext() != null) {
-			    emitAppLaunched(reactInstanceManager.getCurrentReactContext());
+                emitAppLaunched(reactInstanceManager.getCurrentReactContext());
             }
-		}
-	}
+        }
+    }
+
+    private void emitAppLaunched(@NonNull ReactContext context) {
+        if (!isActivityReadyForUi) return;
+        waitingForAppLaunchEvent = false;
+        new EventEmitter(context).appLaunched();
+    }
 
-	private void emitAppLaunched(@NonNull ReactContext context) {
-	    if (!isActivityReadyForUi) return;
-		waitingForAppLaunchEvent = false;
-		new EventEmitter(context).appLaunched();
-	}
+    private boolean shouldCreateContext() {
+        return !reactInstanceManager.hasStartedCreatingInitialContext();
+    }
 
-	private boolean shouldCreateContext() {
-		return !reactInstanceManager.hasStartedCreatingInitialContext();
-	}
+    @Override
+    public void onReactContextInitialized(final ReactContext context) {
+        final UIManagerModule nativeModule = context.getNativeModule(UIManagerModule.class);
+        nativeModule.getUIImplementation().setLayoutUpdateListener(root -> {
+            final View view = nativeModule.resolveView(root.getReactTag());
+            if (view != null && view instanceof ReactModalHostView) {
+                LogKt.logd("view layout updated for view " + view.getClass().getSimpleName(), "XEXE");
+            }
+            LogKt.logd("onLayoutUpdated: " + root.getViewClass() + ",reactTag "
+                    + root.getReactTag(), "onLayoutUpdated");
+        });
 
-	@Override
-	public void onReactContextInitialized(final ReactContext context) {
+        nativeModule.getEventDispatcher().addListener(event -> {
+            final String eventName = event.getEventName();
+            if ("topRequestClose".equals(eventName) || "topShow".equals(eventName)) {
+                LogKt.logd("Modal view tag is " + event.getViewTag(), "ModalXX");
+            }
+        });
         emitAppLaunched(context);
-	}
+    }
 }
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
new file mode 100644
index 00000000000..45c73eea748
--- /dev/null
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
@@ -0,0 +1,83 @@
+package com.reactnativenavigation.react
+
+import android.graphics.Point
+import android.view.View
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.*
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.views.modal.ReactModalHostView
+import com.reactnativenavigation.viewcontrollers.navigator.Navigator
+
+private const val MODAL_MANAGER_NAME = "RNNModalViewManager"
+
+class DeclaredLayoutShadowNode : LayoutShadowNode() {
+    override fun addChildAt(child: ReactShadowNodeImpl, i: Int) {
+        super.addChildAt(child, i)
+        val modalSize = Point(0,0)
+        child.setStyleWidth(modalSize.x.toFloat())
+        child.setStyleHeight(modalSize.y.toFloat())
+    }
+
+}
+
+
+@ReactModule(name = MODAL_MANAGER_NAME)
+class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<DeclaredLayoutHost>() {
+
+    override fun getName(): String = MODAL_MANAGER_NAME
+
+    override fun createViewInstance(reactContext: ThemedReactContext): DeclaredLayoutHost {
+        val declaredLayoutHost = DeclaredLayoutHost(reactContext)
+        return declaredLayoutHost
+    }
+
+    override fun createShadowNodeInstance(): LayoutShadowNode {
+        return DeclaredLayoutShadowNode()
+    }
+
+    override fun getShadowNodeClass(): Class<out LayoutShadowNode> {
+        return DeclaredLayoutShadowNode::class.java
+    }
+    override fun onDropViewInstance(view: DeclaredLayoutHost) {
+        super.onDropViewInstance(view)
+        view.onDropInstance()
+    }
+
+     override fun onAfterUpdateTransaction(view: DeclaredLayoutHost) {
+        super.onAfterUpdateTransaction(view)
+        view.showOrUpdate()
+    }
+    override fun addView(parent: DeclaredLayoutHost?, child: View?, index: Int) {
+        super.addView(parent, child, index)
+    }
+    fun updateState(view: ReactModalHostView, props: ReactStylesDiffMap?, stateWrapper: StateWrapper?): Any? {
+        view.fabricViewStateManager.setStateWrapper(stateWrapper)
+        val modalSize = Point(0,0)
+        view.updateState(modalSize.x, modalSize.y)
+        return null
+    }
+
+
+    @ReactProp(name = "visible")
+    fun setVisible(modal: DeclaredLayoutHost, visible: Boolean) {
+//        if (visible) {
+//            modal.viewController.view.visibility = View.VISIBLE
+//            modal.visibility = View.VISIBLE
+//            navigator.showModal(modal.viewController, CommandListenerAdapter())
+//        } else {
+//            if(modal.viewController.isViewShown){
+//                navigator.dismissModal(modal.viewController.id,object : CommandListener {
+//                    override fun onSuccess(childId: String?) {
+//                        modal.viewController.view.visibility = View.GONE
+//                    }
+//
+//                    override fun onError(message: String?) {
+//                        modal.viewController.view.visibility = View.GONE
+//                    }
+//                })
+//            }
+//            modal.visibility = View.GONE
+//        }
+    }
+
+}
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/utils/CoordinatorLayoutUtils.java b/lib/android/app/src/main/java/com/reactnativenavigation/utils/CoordinatorLayoutUtils.java
index 07fc90e968a..d21ae947546 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/utils/CoordinatorLayoutUtils.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/utils/CoordinatorLayoutUtils.java
@@ -7,6 +7,7 @@
 import androidx.coordinatorlayout.widget.CoordinatorLayout;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
 
 public class CoordinatorLayoutUtils {
     public static CoordinatorLayout.LayoutParams matchParentLP() {
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/component/ComponentPresenterBase.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/component/ComponentPresenterBase.java
index 0fd354bdae0..47828725f28 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/component/ComponentPresenterBase.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/component/ComponentPresenterBase.java
@@ -2,11 +2,13 @@
 
 import android.view.View;
 import android.view.ViewGroup.MarginLayoutParams;
+import android.view.WindowManager;
 
 import androidx.annotation.NonNull;
 
 public class ComponentPresenterBase {
     public void applyTopInsets(@NonNull View view, int topInsets) {
+        if(!(view.getLayoutParams() instanceof MarginLayoutParams)) return;
         MarginLayoutParams lp = (MarginLayoutParams) view.getLayoutParams();
         if (lp != null && lp.topMargin != topInsets) {
             lp.topMargin = topInsets;
@@ -15,6 +17,8 @@ public void applyTopInsets(@NonNull View view, int topInsets) {
     }
 
     public void applyBottomInset(@NonNull View view, int bottomInset) {
+        if(!(view.getLayoutParams() instanceof MarginLayoutParams)) return;
+
         MarginLayoutParams lp = (MarginLayoutParams) view.getLayoutParams();
         if (lp != null && lp.bottomMargin!= bottomInset) {
             lp.bottomMargin = bottomInset;
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
index 625b5351a5b..005577bc80a 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
@@ -1,6 +1,7 @@
 package com.reactnativenavigation.viewcontrollers.modal;
 
 import android.content.Context;
+import android.util.ArrayMap;
 import android.view.ViewGroup;
 
 import com.reactnativenavigation.options.Options;
@@ -13,6 +14,7 @@
 import java.util.ArrayList;
 import java.util.EmptyStackException;
 import java.util.List;
+import java.util.Map;
 
 import androidx.annotation.Nullable;
 import androidx.annotation.RestrictTo;
@@ -23,6 +25,7 @@
 
 public class ModalStack {
     private final List<ViewController> modals = new ArrayList<>();
+    private final Map<String, ViewController> declaredModals = new ArrayMap<>();
     private final ModalPresenter presenter;
     private final ModalOverlay overlay;
     private EventEmitter eventEmitter;
@@ -55,6 +58,9 @@ public void setDefaultOptions(Options defaultOptions) {
         presenter.setDefaultOptions(defaultOptions);
     }
 
+    public void declareModal(ViewController viewController){
+        declaredModals.put(viewController.getId(),viewController);
+    }
     public void showModal(ViewController viewController, ViewController root, CommandListener listener) {
         ViewController toRemove = isEmpty() ? root : peek();
         modals.add(viewController);
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
index 6f81f753a27..f9f183b2626 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
@@ -1,8 +1,13 @@
 package com.reactnativenavigation.viewcontrollers.navigator;
 
 import android.app.Activity;
+import android.content.Context;
+import android.graphics.PixelFormat;
+import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.Window;
+import android.view.WindowManager;
 
 import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.options.Options;
@@ -30,8 +35,33 @@
 import androidx.annotation.RestrictTo;
 import androidx.coordinatorlayout.widget.CoordinatorLayout;
 
+import org.jetbrains.annotations.NotNull;
+
 public class Navigator extends ParentController {
+    static class OverlaysLayout extends CoordinatorLayout{
+
+        public OverlaysLayout(@NonNull @NotNull Context context) {
+            super(context);
+        }
+
+        @Override
+        public void onViewAdded(View child) {
+            super.onViewAdded(child);
+            child.setOnTouchListener(new OnTouchListener() {
+                @Override
+                public boolean onTouch(View v, MotionEvent event) {
+                    v.onTouchEvent(event);
+                    return true;
+                }
+            });
+        }
 
+        @Override
+        public boolean onTouchEvent(MotionEvent ev) {
+             super.onTouchEvent(ev);
+             return true;
+        }
+    }
     private final ModalStack modalStack;
     private final OverlayManager overlayManager;
     private final RootPresenter rootPresenter;
@@ -39,10 +69,17 @@ public class Navigator extends ParentController {
     private ViewController previousRoot;
     private final CoordinatorLayout rootLayout;
     private final CoordinatorLayout modalsLayout;
-    private final CoordinatorLayout overlaysLayout;
+    public final OverlaysLayout overlaysLayout;
+
     private ViewGroup contentLayout;
     private Options defaultOptions = new Options();
-
+    WindowManager.LayoutParams overlaysLP = new WindowManager.LayoutParams(
+            WindowManager.LayoutParams.MATCH_PARENT,
+            WindowManager.LayoutParams.MATCH_PARENT,
+            WindowManager.LayoutParams.TYPE_APPLICATION,
+            WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE| WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
+                    | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
+            PixelFormat.TRANSPARENT);
     @Override
     public void setDefaultOptions(Options defaultOptions) {
         super.setDefaultOptions(defaultOptions);
@@ -65,10 +102,11 @@ public void setEventEmitter(EventEmitter eventEmitter) {
     public void setContentLayout(ViewGroup contentLayout) {
         this.contentLayout = contentLayout;
         contentLayout.addView(rootLayout);
+        final Window window = getActivity().getWindow();
         modalsLayout.setVisibility(View.GONE);
         contentLayout.addView(modalsLayout);
         overlaysLayout.setVisibility(View.GONE);
-        contentLayout.addView(overlaysLayout);
+        getActivity().getWindowManager().addView(overlaysLayout, overlaysLP);
     }
 
     public Navigator(final Activity activity, ChildControllersRegistry childRegistry, ModalStack modalStack, OverlayManager overlayManager, RootPresenter rootPresenter) {
@@ -78,7 +116,7 @@ public Navigator(final Activity activity, ChildControllersRegistry childRegistry
         this.rootPresenter = rootPresenter;
         rootLayout = new CoordinatorLayout(getActivity());
         modalsLayout = new CoordinatorLayout(getActivity());
-        overlaysLayout = new CoordinatorLayout(getActivity());
+        overlaysLayout = new OverlaysLayout(getActivity());
     }
 
     public void bindViews() {
@@ -189,6 +227,9 @@ public void popTo(final String id, Options mergeOptions, CommandListener listene
         }
     }
 
+    public void declareModal(final ViewController viewController){
+        modalStack.declareModal(viewController);
+    }
     public void showModal(final ViewController viewController, CommandListener listener) {
         modalStack.showModal(viewController, root, listener);
     }
@@ -206,11 +247,14 @@ public void dismissAllModals(Options mergeOptions, CommandListener listener) {
     }
 
     public void showOverlay(ViewController overlay, CommandListener listener) {
-        overlayManager.show(overlaysLayout, overlay, listener);
+        final WindowManager windowManager = getActivity().getWindowManager();
+        windowManager.removeViewImmediate(overlaysLayout);
+        windowManager.addView(overlaysLayout, overlaysLP);
+        overlayManager.show(overlaysLayout, overlay, listener,getActivity());
     }
 
     public void dismissOverlay(final String componentId, CommandListener listener) {
-        overlayManager.dismiss(overlaysLayout, componentId, listener);
+        overlayManager.dismiss(overlaysLayout, componentId, listener,getActivity());
     }
 
     public void dismissAllOverlays(CommandListener listener) {
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.java
index f2578d18c23..66f2b0bb836 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.java
@@ -1,7 +1,11 @@
 package com.reactnativenavigation.viewcontrollers.overlay;
 
+import android.app.Activity;
+import android.graphics.Color;
+import android.graphics.PixelFormat;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.WindowManager;
 
 import com.reactnativenavigation.react.CommandListener;
 import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController;
@@ -15,17 +19,18 @@
 public class OverlayManager {
     private final HashMap<String, ViewController> overlayRegistry = new HashMap<>();
 
-    public void show(ViewGroup overlaysContainer, ViewController overlay, CommandListener listener) {
+    public void show(ViewGroup overlaysContainer, ViewController overlay, CommandListener listener, Activity activity) {
         overlaysContainer.setVisibility(View.VISIBLE);
         overlayRegistry.put(overlay.getId(), overlay);
         overlay.addOnAppearedListener(() -> {
             overlay.onViewDidAppear();
             listener.onSuccess(overlay.getId());
         });
+//        activity.addContentView(overlay.getView(),matchParentWithBehaviour(new BehaviourDelegate(overlay)));
         overlaysContainer.addView(overlay.getView(), matchParentWithBehaviour(new BehaviourDelegate(overlay)));
     }
 
-    public void dismiss(ViewGroup overlaysContainer, String componentId, CommandListener listener) {
+    public void dismiss(ViewGroup overlaysContainer, String componentId, CommandListener listener,Activity activity) {
         ViewController overlay = overlayRegistry.get(componentId);
         if (overlay == null) {
             listener.onError("Could not dismiss Overlay. Overlay with id " + componentId + " was not found.");
diff --git a/lib/android/app/src/reactNative63/java/com/reactnativenavigation/react/ReactGateway.java b/lib/android/app/src/reactNative63/java/com/reactnativenavigation/react/ReactGateway.java
index 035ec31b2c5..d12671cb3bf 100644
--- a/lib/android/app/src/reactNative63/java/com/reactnativenavigation/react/ReactGateway.java
+++ b/lib/android/app/src/reactNative63/java/com/reactnativenavigation/react/ReactGateway.java
@@ -25,7 +25,7 @@ public ReactGateway(ReactNativeHost host) {
     }
 
 	public void onActivityCreated(NavigationActivity activity) {
-		initializer.onActivityCreated();
+		initializer.onActivityCreated(activity);
         jsDevReloadHandler.setReloadListener(activity);
 	}
 
diff --git a/lib/src/components/RNNModal.tsx b/lib/src/components/RNNModal.tsx
new file mode 100644
index 00000000000..bcb4d1537a9
--- /dev/null
+++ b/lib/src/components/RNNModal.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { requireNativeComponent } from 'react-native';
+
+const RNNModalViewManager = requireNativeComponent('RNNModalViewManager');
+
+export class RNNModal extends React.Component {
+  render() {
+    return <RNNModalViewManager {...this.props} />;
+  }
+}
diff --git a/lib/src/index.ts b/lib/src/index.ts
index 006cee09dbb..5140ca43436 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -1,7 +1,7 @@
 import { NavigationDelegate } from './NavigationDelegate';
 const navigationDelegate = new NavigationDelegate();
-
 export const Navigation = navigationDelegate;
+export * from './components/RNNModal';
 export * from './events/EventsRegistry';
 export * from './adapters/Constants';
 export * from './interfaces/ComponentEvents';
diff --git a/playground/android/app/build.gradle b/playground/android/app/build.gradle
index 7581e6895af..a881bb5c8df 100644
--- a/playground/android/app/build.gradle
+++ b/playground/android/app/build.gradle
@@ -8,6 +8,7 @@ project.ext.react = [
         bundleInAlpha: true,
         bundleInBeta: true,
         enableHermes: enableHermes,
+        nodeExecutableAndArgs:['/usr/local/bin/node'],
         hermesFlagsDebug:['-Xes6-proxy','-output-source-map'],
         hermesFlagsRelease:['-output-source-map'],
         hermesCommand: "../../../node_modules/hermes-engine/%OS-BIN%/hermesc",
diff --git a/playground/src/screens/LayoutsScreen.tsx b/playground/src/screens/LayoutsScreen.tsx
index 711a7e4e961..b83a13a253e 100644
--- a/playground/src/screens/LayoutsScreen.tsx
+++ b/playground/src/screens/LayoutsScreen.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  RNNModal,
   Options,
   OptionsModalPresentationStyle,
   NavigationComponent,
@@ -23,8 +24,10 @@ const {
   SPLIT_VIEW_BUTTON,
 } = testIDs;
 
+console.log(`xxxxxxxx,${RNNModal}`);
 interface State {
   componentDidAppear: boolean;
+  modalVisible: boolean;
 }
 
 export default class LayoutsScreen extends NavigationComponent<NavigationComponentProps, State> {
@@ -33,6 +36,7 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     Navigation.events().bindComponent(this);
     this.state = {
       componentDidAppear: false,
+      modalVisible: false,
     };
   }
 
@@ -57,6 +61,11 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
   render() {
     return (
       <Root componentId={this.props.componentId}>
+        <RNNModal>
+          <Button label="Button" onPress={this.toggleModal} />
+          <Button label="Button2" onPress={this.toggleModal} />
+          <Button label="Button3" onPress={this.toggleModal} />
+        </RNNModal>
         <Button label="Stack" testID={STACK_BTN} onPress={this.stack} />
         <Button label="BottomTabs" testID={BOTTOM_TABS_BTN} onPress={this.bottomTabs} />
         <Button label="SideMenu" testID={SIDE_MENU_BTN} onPress={this.sideMenu} />
@@ -71,6 +80,7 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     );
   }
 
+  toggleModal = () => this.setState({ modalVisible: !this.state.modalVisible });
   stack = () => Navigation.showModal(stack(Screens.Stack, 'StackId'));
 
   bottomTabs = () =>
diff --git a/playground/src/screens/ModalScreen.tsx b/playground/src/screens/ModalScreen.tsx
index 093f1a0660b..c6bb0a2ca2c 100644
--- a/playground/src/screens/ModalScreen.tsx
+++ b/playground/src/screens/ModalScreen.tsx
@@ -12,10 +12,9 @@ import { stack } from '../commons/Layouts';
 import Screens from './Screens';
 import flags from '../flags';
 import testIDs from '../testIDs';
-import { Dimensions, Modal } from 'react-native';
+import { Dimensions } from 'react-native';
 const height = Math.round(Dimensions.get('window').height);
 const MODAL_ANIMATION_DURATION = 350;
-
 const {
   PUSH_BTN,
   MODAL_SCREEN_HEADER,
@@ -31,7 +30,7 @@ const {
   DISMISS_FIRST_MODAL_BTN,
   SET_ROOT,
   TOGGLE_REACT_NATIVE_MODAL,
-  SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL,
+  // SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL,
 } = testIDs;
 
 interface Props {
@@ -130,10 +129,12 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
           onPress={this.toggleModal}
         />
 
-        <Modal visible={this.state.reactNativeModalVisible} animationType={'slide'}>
+        {/* <Modal visible={this.state.reactNativeModalVisible} animationType={'slide'}>
           <Root componentId={this.props.componentId} footer={`ReactNative modal in action!`}>
             <Button label="Toggle react-native modal" onPress={this.toggleModal} />
             <Button label="Show overlay" onPress={this.showOverlay} />
+            <Button label="Show RN modal" onPress={this.showRNModal} />
+
             <Button
               label="Present another modal and dismiss current modal"
               testID={SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL}
@@ -147,18 +148,24 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
               }}
             />
           </Root>
-        </Modal>
+        </Modal> */}
       </Root>
     );
   }
 
-  showOverlay = async () => {
-    await Navigation.showOverlay({
+  showRNModal = async () => {
+    await Navigation.showModal({
       component: {
-        name: Screens.OverlayAlert,
+        name: Screens.Stack,
       },
     });
   };
+
+  showOverlay = async () => {
+    await Navigation.showOverlay(Screens.OverlayAlert, {
+      layout: { componentBackgroundColor: 'transparent' },
+    });
+  };
   toggleModal = () =>
     this.setState({ reactNativeModalVisible: !this.state.reactNativeModalVisible });
 
diff --git a/scripts/start.js b/scripts/start.js
index abe6404b7cf..701b765358c 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -9,7 +9,7 @@ function run() {
   exec.killPort(8081);
   exec.execSync(`watchman watch-del-all || true`);
   exec.execSync(`adb reverse tcp:8081 tcp:8081 || true`);
-  exec.execSync(`node ./node_modules/react-native/local-cli/cli.js start`);
+  exec.execSync(`node ./node_modules/react-native/local-cli/cli.js start --reset-cache`);
 }
 
 function runWin32() {

From 501a62cd4bbdbeaf6902dea502b3436e2db4bd61 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Mon, 9 Aug 2021 18:56:47 +0300
Subject: [PATCH 03/43] modal component return null when not visible

---
 lib/src/components/RNNModal.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/lib/src/components/RNNModal.tsx b/lib/src/components/RNNModal.tsx
index bcb4d1537a9..ced91ea45a0 100644
--- a/lib/src/components/RNNModal.tsx
+++ b/lib/src/components/RNNModal.tsx
@@ -1,10 +1,23 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
+import { requireNativeComponent, ViewProps } from 'react-native';
+export interface RNNModalProps extends ViewProps {
+  animationType?: 'none' | 'slide' | 'fade' | null;
+  presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen' | null;
+  transparent?: boolean;
+  statusBarTranslucent?: boolean;
+  hardwareAccelerated?: boolean;
+  visible?: boolean;
+}
 
 const RNNModalViewManager = requireNativeComponent('RNNModalViewManager');
 
-export class RNNModal extends React.Component {
+export class RNNModal extends React.Component<RNNModalProps> {
+  constructor(props: RNNModalProps) {
+    super(props);
+  }
   render() {
+    console.log(`xxxxxxx, visibility: ${this.props.visible}`);
+    if (this.props.visible !== true) return null;
     return <RNNModalViewManager {...this.props} />;
   }
 }

From 84d3770adfca5e6151041553996b037463e342a8 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Mon, 9 Aug 2021 18:57:01 +0300
Subject: [PATCH 04/43] temp

---
 .../react/DeclaredLayout.kt                   | 62 +++++--------------
 .../react/DeclaredLayoutHost.kt               | 25 +++-----
 .../react/RNNModalViewManager.kt              | 30 ++++-----
 3 files changed, 37 insertions(+), 80 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt
index adc49bb341d..0d2c28b7ef4 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt
@@ -3,19 +3,15 @@ package com.reactnativenavigation.react
 import android.content.Context
 import android.view.MotionEvent
 import android.view.View
-import androidx.annotation.UiThread
 import com.facebook.react.bridge.*
 import com.facebook.react.uimanager.*
-import com.facebook.react.uimanager.FabricViewStateManager.HasFabricViewStateManager
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.views.view.ReactViewGroup
 
-class DeclaredLayout(context: Context?) : ReactViewGroup(context), RootView,
-    HasFabricViewStateManager{
+class DeclaredLayout(context: Context?) : ReactViewGroup(context), RootView{
     private var hasAdjustedSize = false
     private var viewWidth = 0
     private var viewHeight = 0
-    private val mFabricViewStateManager = FabricViewStateManager()
     private val mJSTouchDispatcher = JSTouchDispatcher(this)
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
         super.onSizeChanged(w, h, oldw, oldh)
@@ -27,50 +23,24 @@ class DeclaredLayout(context: Context?) : ReactViewGroup(context), RootView,
         if (this.childCount > 0) {
             hasAdjustedSize = false
             val viewTag = getChildAt(0).id
-            if (mFabricViewStateManager.hasStateWrapper()) {
-                updateState(viewWidth, viewHeight)
-            } else {
-                val reactContext: ReactContext = this.getReactContext()
-                reactContext.runOnNativeModulesQueueThread(object : GuardedRunnable(reactContext) {
-                    override fun runGuarded() {
-                        val uiManager = this@DeclaredLayout.getReactContext().getNativeModule<UIManagerModule>(
-                            UIManagerModule::class.java
-                        ) as UIManagerModule
-                        uiManager.updateNodeSize(
-                            viewTag,
-                            this@DeclaredLayout.viewWidth,
-                            this@DeclaredLayout.viewHeight
-                        )
-                    }
-                })
-            }
+            val reactContext: ReactContext = this.getReactContext()
+            reactContext.runOnNativeModulesQueueThread(object : GuardedRunnable(reactContext) {
+                override fun runGuarded() {
+                    val uiManager = this@DeclaredLayout.getReactContext().getNativeModule<UIManagerModule>(
+                        UIManagerModule::class.java
+                    ) as UIManagerModule
+                    uiManager.updateNodeSize(
+                        viewTag,
+                        this@DeclaredLayout.viewWidth,
+                        this@DeclaredLayout.viewHeight
+                    )
+                }
+            })
         } else {
             hasAdjustedSize = true
         }
     }
 
-    @UiThread
-    fun updateState(width: Int, height: Int) {
-        val realWidth = PixelUtil.toDIPFromPixel(width.toFloat())
-        val realHeight = PixelUtil.toDIPFromPixel(height.toFloat())
-        val currentState = this.fabricViewStateManager.state
-        if (currentState != null) {
-            val delta = 0.9f
-            val stateScreenHeight = if (currentState.hasKey("screenHeight")) currentState.getDouble("screenHeight")
-                .toFloat() else 0.0f
-            val stateScreenWidth = if (currentState.hasKey("screenWidth")) currentState.getDouble("screenWidth")
-                .toFloat() else 0.0f
-            if (Math.abs(stateScreenWidth - realWidth) < delta && Math.abs(stateScreenHeight - realHeight) < delta) {
-                return
-            }
-        }
-        mFabricViewStateManager.setState {
-            val map: WritableMap = WritableNativeMap()
-            map.putDouble("screenWidth", realWidth.toDouble())
-            map.putDouble("screenHeight", realHeight.toDouble())
-            map
-        }
-    }
     override fun addView(child: View?, index: Int, params: LayoutParams?) {
         super.addView(child, index, params)
         if (hasAdjustedSize) {
@@ -86,9 +56,7 @@ class DeclaredLayout(context: Context?) : ReactViewGroup(context), RootView,
         return reactContext.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
     }
 
-    override fun getFabricViewStateManager(): FabricViewStateManager {
-        return mFabricViewStateManager
-    }
+
     override fun handleException(t: Throwable?) {
         getReactContext().handleException(RuntimeException(t))
     }
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
index 56c85e0fedf..de47509815d 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
@@ -10,7 +10,6 @@ import android.widget.FrameLayout
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.UiThreadUtil
-import com.facebook.react.uimanager.FabricViewStateManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.reactnativenavigation.options.Options
 import com.reactnativenavigation.utils.CompatUtils
@@ -18,8 +17,7 @@ import com.reactnativenavigation.viewcontrollers.viewcontroller.YellowBoxDelegat
 import com.reactnativenavigation.viewcontrollers.viewcontroller.overlay.ViewControllerOverlay
 import java.util.*
 
-open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reactContext), LifecycleEventListener,
-    FabricViewStateManager.HasFabricViewStateManager {
+open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reactContext), LifecycleEventListener {
     val viewController = DeclaredLayoutController(
         reactContext.currentActivity, CompatUtils.generateViewId().toString(),
         YellowBoxDelegate(reactContext), Options.EMPTY, ViewControllerOverlay(reactContext)
@@ -77,11 +75,12 @@ open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reac
         this.dismiss()
     }
 
-     open fun dismiss() {
+    open fun dismiss() {
         UiThreadUtil.assertOnUiThread()
-            val parent = mHostView.parent as ViewGroup
-            parent.removeViewAt(0)
-        }
+//        val parent = mHostView.parent as? ViewGroup
+//        parent?.removeViewAt(0)
+    }
+
     override fun onHostResume() {
         this.showOrUpdate()
     }
@@ -91,18 +90,19 @@ open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reac
     override fun onHostDestroy() {
         onDropInstance()
     }
+
     private fun getCurrentActivity(): Activity? {
         return (this.context as ReactContext).currentActivity
     }
 
-     open fun showOrUpdate() {
+    open fun showOrUpdate() {
         UiThreadUtil.assertOnUiThread()
         val currentActivity = getCurrentActivity()
         val context = currentActivity ?: this.context
 
     }
 
-     open fun getContentView(): View? {
+    open fun getContentView(): View? {
         val frameLayout = FrameLayout(this.context)
         frameLayout.addView(mHostView)
 //        if (this.mStatusBarTranslucent) {
@@ -113,11 +113,4 @@ open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reac
         return frameLayout
     }
 
-    override fun getFabricViewStateManager(): FabricViewStateManager? {
-        return mHostView.fabricViewStateManager
-    }
-    open fun updateState(width: Int, height: Int) {
-        mHostView.updateState(width, height)
-    }
-
 }
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
index 45c73eea748..a7ee22b51ab 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
@@ -3,9 +3,11 @@ package com.reactnativenavigation.react
 import android.graphics.Point
 import android.view.View
 import com.facebook.react.module.annotations.ReactModule
-import com.facebook.react.uimanager.*
+import com.facebook.react.uimanager.LayoutShadowNode
+import com.facebook.react.uimanager.ReactShadowNodeImpl
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.views.modal.ReactModalHostView
 import com.reactnativenavigation.viewcontrollers.navigator.Navigator
 
 private const val MODAL_MANAGER_NAME = "RNNModalViewManager"
@@ -13,9 +15,9 @@ private const val MODAL_MANAGER_NAME = "RNNModalViewManager"
 class DeclaredLayoutShadowNode : LayoutShadowNode() {
     override fun addChildAt(child: ReactShadowNodeImpl, i: Int) {
         super.addChildAt(child, i)
-        val modalSize = Point(0,0)
-        child.setStyleWidth(modalSize.x.toFloat())
-        child.setStyleHeight(modalSize.y.toFloat())
+        val modalSize = Point(screenWidth,screenHeight)
+        child.setStyleWidth(0f)
+        child.setStyleHeight(0f)
     }
 
 }
@@ -50,21 +52,15 @@ class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<D
     override fun addView(parent: DeclaredLayoutHost?, child: View?, index: Int) {
         super.addView(parent, child, index)
     }
-    fun updateState(view: ReactModalHostView, props: ReactStylesDiffMap?, stateWrapper: StateWrapper?): Any? {
-        view.fabricViewStateManager.setStateWrapper(stateWrapper)
-        val modalSize = Point(0,0)
-        view.updateState(modalSize.x, modalSize.y)
-        return null
-    }
-
 
     @ReactProp(name = "visible")
     fun setVisible(modal: DeclaredLayoutHost, visible: Boolean) {
-//        if (visible) {
-//            modal.viewController.view.visibility = View.VISIBLE
-//            modal.visibility = View.VISIBLE
-//            navigator.showModal(modal.viewController, CommandListenerAdapter())
-//        } else {
+        if (visible) {
+            modal.viewController.view.visibility = View.VISIBLE
+            modal.visibility = View.VISIBLE
+            navigator.showModal(modal.viewController, CommandListenerAdapter())
+        }
+//        else {
 //            if(modal.viewController.isViewShown){
 //                navigator.dismissModal(modal.viewController.id,object : CommandListener {
 //                    override fun onSuccess(childId: String?) {

From 73d2b33fa953cc693fc7936a1ed0549f526ec8a9 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Mon, 9 Aug 2021 21:58:00 +0300
Subject: [PATCH 05/43] tmp

---
 playground/src/screens/LayoutsScreen.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/playground/src/screens/LayoutsScreen.tsx b/playground/src/screens/LayoutsScreen.tsx
index b83a13a253e..052c9aa6900 100644
--- a/playground/src/screens/LayoutsScreen.tsx
+++ b/playground/src/screens/LayoutsScreen.tsx
@@ -24,7 +24,6 @@ const {
   SPLIT_VIEW_BUTTON,
 } = testIDs;
 
-console.log(`xxxxxxxx,${RNNModal}`);
 interface State {
   componentDidAppear: boolean;
   modalVisible: boolean;
@@ -61,14 +60,22 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
   render() {
     return (
       <Root componentId={this.props.componentId}>
-        <RNNModal>
+        <RNNModal visible={this.state.modalVisible}>
           <Button label="Button" onPress={this.toggleModal} />
           <Button label="Button2" onPress={this.toggleModal} />
           <Button label="Button3" onPress={this.toggleModal} />
         </RNNModal>
+
+        {/* <Modal visible={this.state.modalVisible}>
+          <Button label="Button" onPress={this.toggleModal} />
+          <Button label="Button2" onPress={this.toggleModal} />
+          <Button label="Button3" onPress={this.toggleModal} />
+        </Modal> */}
         <Button label="Stack" testID={STACK_BTN} onPress={this.stack} />
         <Button label="BottomTabs" testID={BOTTOM_TABS_BTN} onPress={this.bottomTabs} />
         <Button label="SideMenu" testID={SIDE_MENU_BTN} onPress={this.sideMenu} />
+        <Button label="Toggle modal" onPress={this.toggleModal} />
+
         <Button
           label="SplitView"
           testID={SPLIT_VIEW_BUTTON}

From ec8839f0efc83f30f0f5d46c44cdd0b28e7c1436 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Wed, 11 Aug 2021 14:31:03 +0300
Subject: [PATCH 06/43] use react context instead of activity

---
 .../react/DeclaredLayoutController.kt                     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
index 0422abdc334..d8b00649eed 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
@@ -1,12 +1,14 @@
 package com.reactnativenavigation.react
 
 import android.app.Activity
+import com.facebook.react.bridge.ReactContext
 import com.reactnativenavigation.options.Options
 import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController
 import com.reactnativenavigation.viewcontrollers.viewcontroller.YellowBoxDelegate
 import com.reactnativenavigation.viewcontrollers.viewcontroller.overlay.ViewControllerOverlay
 
 class DeclaredLayoutController(
+    val reactContext: ReactContext,
     activity: Activity?,
     id: String?,
     yellowBoxDelegate: YellowBoxDelegate?,
@@ -23,11 +25,9 @@ class DeclaredLayoutController(
 
     override fun getCurrentComponentName(): String = "GenericDeclaredLayoutController"
 
-    override fun getView(): DeclaredLayout {
-        return createView()
-    }
+
     override fun createView(): DeclaredLayout {
-        return DeclaredLayout(activity)
+        return DeclaredLayout(reactContext)
     }
 
     override fun sendOnNavigationButtonPressed(buttonId: String?) {

From b6cd2755ce5c9247581a9d4bdc28a5a1e6d3fe09 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Wed, 11 Aug 2021 14:31:53 +0300
Subject: [PATCH 07/43] Update DeclaredLayoutHost.kt

---
 .../java/com/reactnativenavigation/react/DeclaredLayoutHost.kt | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
index de47509815d..fc037813a5d 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
@@ -18,7 +18,7 @@ import com.reactnativenavigation.viewcontrollers.viewcontroller.overlay.ViewCont
 import java.util.*
 
 open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reactContext), LifecycleEventListener {
-    val viewController = DeclaredLayoutController(
+    val viewController = DeclaredLayoutController(reactContext,
         reactContext.currentActivity, CompatUtils.generateViewId().toString(),
         YellowBoxDelegate(reactContext), Options.EMPTY, ViewControllerOverlay(reactContext)
     )
@@ -99,6 +99,7 @@ open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reac
         UiThreadUtil.assertOnUiThread()
         val currentActivity = getCurrentActivity()
         val context = currentActivity ?: this.context
+//        requestLayout()
 
     }
 

From 2a9c16fe69273d83e29ffb56226818d904840ce0 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Wed, 11 Aug 2021 14:32:20 +0300
Subject: [PATCH 08/43] showing modal + dismiss changing visible

---
 .../react/RNNModalViewManager.kt              | 35 ++++++-------------
 lib/src/components/RNNModal.tsx               | 20 +++++++++--
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
index a7ee22b51ab..eab00583757 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
@@ -15,9 +15,9 @@ private const val MODAL_MANAGER_NAME = "RNNModalViewManager"
 class DeclaredLayoutShadowNode : LayoutShadowNode() {
     override fun addChildAt(child: ReactShadowNodeImpl, i: Int) {
         super.addChildAt(child, i)
-        val modalSize = Point(screenWidth,screenHeight)
-        child.setStyleWidth(0f)
-        child.setStyleHeight(0f)
+        val modalSize = Point(screenWidth, screenHeight)
+        child.setStyleWidth(100f)
+        child.setStyleHeight(100f)
     }
 
 }
@@ -29,8 +29,7 @@ class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<D
     override fun getName(): String = MODAL_MANAGER_NAME
 
     override fun createViewInstance(reactContext: ThemedReactContext): DeclaredLayoutHost {
-        val declaredLayoutHost = DeclaredLayoutHost(reactContext)
-        return declaredLayoutHost
+        return DeclaredLayoutHost(reactContext)
     }
 
     override fun createShadowNodeInstance(): LayoutShadowNode {
@@ -40,40 +39,28 @@ class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<D
     override fun getShadowNodeClass(): Class<out LayoutShadowNode> {
         return DeclaredLayoutShadowNode::class.java
     }
+
     override fun onDropViewInstance(view: DeclaredLayoutHost) {
         super.onDropViewInstance(view)
         view.onDropInstance()
+        navigator.dismissModal(view.viewController.id, CommandListenerAdapter())
     }
 
-     override fun onAfterUpdateTransaction(view: DeclaredLayoutHost) {
+    override fun onAfterUpdateTransaction(view: DeclaredLayoutHost) {
         super.onAfterUpdateTransaction(view)
         view.showOrUpdate()
+        navigator.showModal(view.viewController, CommandListenerAdapter())
     }
+
     override fun addView(parent: DeclaredLayoutHost?, child: View?, index: Int) {
         super.addView(parent, child, index)
     }
 
     @ReactProp(name = "visible")
     fun setVisible(modal: DeclaredLayoutHost, visible: Boolean) {
-        if (visible) {
-            modal.viewController.view.visibility = View.VISIBLE
-            modal.visibility = View.VISIBLE
-            navigator.showModal(modal.viewController, CommandListenerAdapter())
+        if(visible){
+
         }
-//        else {
-//            if(modal.viewController.isViewShown){
-//                navigator.dismissModal(modal.viewController.id,object : CommandListener {
-//                    override fun onSuccess(childId: String?) {
-//                        modal.viewController.view.visibility = View.GONE
-//                    }
-//
-//                    override fun onError(message: String?) {
-//                        modal.viewController.view.visibility = View.GONE
-//                    }
-//                })
-//            }
-//            modal.visibility = View.GONE
-//        }
     }
 
 }
\ No newline at end of file
diff --git a/lib/src/components/RNNModal.tsx b/lib/src/components/RNNModal.tsx
index ced91ea45a0..89a58a6f93f 100644
--- a/lib/src/components/RNNModal.tsx
+++ b/lib/src/components/RNNModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { requireNativeComponent, ViewProps } from 'react-native';
+import { requireNativeComponent, ViewProps, StyleSheet, View } from 'react-native';
 export interface RNNModalProps extends ViewProps {
   animationType?: 'none' | 'slide' | 'fade' | null;
   presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen' | null;
@@ -18,6 +18,22 @@ export class RNNModal extends React.Component<RNNModalProps> {
   render() {
     console.log(`xxxxxxx, visibility: ${this.props.visible}`);
     if (this.props.visible !== true) return null;
-    return <RNNModalViewManager {...this.props} />;
+    const p = { visible: this.props.visible, style: styles.modal };
+    return (
+      <RNNModalViewManager {...p}>
+        <View style={styles.container}>{this.props.children}</View>
+      </RNNModalViewManager>
+    );
   }
 }
+
+const styles = StyleSheet.create({
+  modal: {
+    //s: 'absolute',
+  },
+  container: {
+    backgroundColor: 'yellow',
+    top: 0,
+    flex: 1,
+  },
+});

From af8d4cb5ab67f8ac6e8ecc308c36892f136300c3 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Wed, 15 Sep 2021 07:54:19 +0300
Subject: [PATCH 09/43] tmpo

---
 .../react/DeclaredLayoutHost.kt               | 35 ----------
 .../react/NavigationPackage.kt                |  3 +-
 .../react/RNNModalViewManager.kt              | 18 ++---
 .../viewcontrollers/navigator/Navigator.java  |  2 +-
 lib/src/adapters/TouchablePreview.tsx         |  1 +
 lib/src/components/RNNModal.tsx               | 70 ++++++++++++++-----
 playground/src/screens/LayoutsScreen.tsx      | 18 ++---
 scripts/start.js                              |  4 +-
 8 files changed, 74 insertions(+), 77 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
index fc037813a5d..5cc729aed64 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
@@ -1,12 +1,10 @@
 package com.reactnativenavigation.react
 
 import android.annotation.TargetApi
-import android.app.Activity
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewStructure
 import android.view.accessibility.AccessibilityEvent
-import android.widget.FrameLayout
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.UiThreadUtil
@@ -37,7 +35,6 @@ open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reac
 
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
-        this.dismiss()
     }
 
     override fun addView(child: View?, index: Int) {
@@ -72,17 +69,9 @@ open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reac
 
     open fun onDropInstance() {
         (this.context as ReactContext).removeLifecycleEventListener(this)
-        this.dismiss()
-    }
-
-    open fun dismiss() {
-        UiThreadUtil.assertOnUiThread()
-//        val parent = mHostView.parent as? ViewGroup
-//        parent?.removeViewAt(0)
     }
 
     override fun onHostResume() {
-        this.showOrUpdate()
     }
 
     override fun onHostPause() {}
@@ -90,28 +79,4 @@ open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reac
     override fun onHostDestroy() {
         onDropInstance()
     }
-
-    private fun getCurrentActivity(): Activity? {
-        return (this.context as ReactContext).currentActivity
-    }
-
-    open fun showOrUpdate() {
-        UiThreadUtil.assertOnUiThread()
-        val currentActivity = getCurrentActivity()
-        val context = currentActivity ?: this.context
-//        requestLayout()
-
-    }
-
-    open fun getContentView(): View? {
-        val frameLayout = FrameLayout(this.context)
-        frameLayout.addView(mHostView)
-//        if (this.mStatusBarTranslucent) {
-//            frameLayout.systemUiVisibility = 1024
-//        } else {
-//            frameLayout.fitsSystemWindows = true
-//        }
-        return frameLayout
-    }
-
 }
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
index 64e9e824208..27a6f3199b5 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
@@ -20,6 +20,7 @@ class NavigationPackage(private val reactNativeHost: ReactNativeHost) : ReactPac
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+
         return listOf(RNNModalViewManager((reactContext.currentActivity as NavigationActivity).navigator))
     }
-}
\ No newline at end of file
+}
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
index eab00583757..2c5668d3d63 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
@@ -40,16 +40,15 @@ class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<D
         return DeclaredLayoutShadowNode::class.java
     }
 
-    override fun onDropViewInstance(view: DeclaredLayoutHost) {
-        super.onDropViewInstance(view)
-        view.onDropInstance()
-        navigator.dismissModal(view.viewController.id, CommandListenerAdapter())
+    override fun onDropViewInstance(modal: DeclaredLayoutHost) {
+        super.onDropViewInstance(modal)
+        modal.onDropInstance()
+        navigator.dismissModal(modal.viewController.id, CommandListenerAdapter())
     }
 
-    override fun onAfterUpdateTransaction(view: DeclaredLayoutHost) {
-        super.onAfterUpdateTransaction(view)
-        view.showOrUpdate()
-        navigator.showModal(view.viewController, CommandListenerAdapter())
+    override fun onAfterUpdateTransaction(modal: DeclaredLayoutHost) {
+        super.onAfterUpdateTransaction(modal)
+        navigator.showModal(modal.viewController, CommandListenerAdapter())
     }
 
     override fun addView(parent: DeclaredLayoutHost?, child: View?, index: Int) {
@@ -58,9 +57,6 @@ class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<D
 
     @ReactProp(name = "visible")
     fun setVisible(modal: DeclaredLayoutHost, visible: Boolean) {
-        if(visible){
-
-        }
     }
 
 }
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
index 35e7d42e90c..c515c3be65b 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
@@ -70,7 +70,7 @@ public boolean onTouchEvent(MotionEvent ev) {
              return true;
         }
     }
-    private final ModalStack modalStack;
+    public final ModalStack modalStack;
     private final OverlayManager overlayManager;
     private final RootPresenter rootPresenter;
     private ViewController root;
diff --git a/lib/src/adapters/TouchablePreview.tsx b/lib/src/adapters/TouchablePreview.tsx
index 67586395516..563e5ff6e76 100644
--- a/lib/src/adapters/TouchablePreview.tsx
+++ b/lib/src/adapters/TouchablePreview.tsx
@@ -102,6 +102,7 @@ export class TouchablePreview extends React.PureComponent<Props> {
       }
     }
 
+    //@ts-ignore
     this.timeout = setTimeout(this.onTouchEnd, PREVIEW_TIMEOUT);
   };
 
diff --git a/lib/src/components/RNNModal.tsx b/lib/src/components/RNNModal.tsx
index 89a58a6f93f..93209cf84dd 100644
--- a/lib/src/components/RNNModal.tsx
+++ b/lib/src/components/RNNModal.tsx
@@ -1,29 +1,64 @@
 import React from 'react';
-import { requireNativeComponent, ViewProps, StyleSheet, View } from 'react-native';
+import {
+  requireNativeComponent,
+  ViewProps,
+  StyleSheet,
+  BackHandler,
+  SafeAreaView,
+} from 'react-native';
+import { View } from 'react-native-ui-lib';
 export interface RNNModalProps extends ViewProps {
-  animationType?: 'none' | 'slide' | 'fade' | null;
-  presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen' | null;
-  transparent?: boolean;
-  statusBarTranslucent?: boolean;
-  hardwareAccelerated?: boolean;
-  visible?: boolean;
+  // animationType?: 'none' | 'slide' | 'fade' | null;
+  // presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen' | null;
+  // transparent?: boolean;
+  // statusBarTranslucent?: boolean;
+  // hardwareAccelerated?: boolean;
+  onDismissed(): any;
+  visible: boolean;
 }
 
 const RNNModalViewManager = requireNativeComponent('RNNModalViewManager');
-
-export class RNNModal extends React.Component<RNNModalProps> {
+type RNNModalState = {
+  displayed: boolean;
+};
+export class RNNModal extends React.Component<RNNModalProps, RNNModalState> {
+  private backHandler?: any;
+  private backPressed: boolean;
   constructor(props: RNNModalProps) {
     super(props);
+    this.backPressed = false;
+  }
+
+  componentDidMount() {
+    this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+      this.backPressed = true;
+      return false;
+    });
+  }
+  componentWillUnmount() {
+    console.log(`componentWillUnmount`);
+    this.backHandler?.remove();
+  }
+
+  componentDidUpdate() {
+    if (this.backPressed) {
+      this.backPressed = false;
+    }
   }
   render() {
-    console.log(`xxxxxxx, visibility: ${this.props.visible}`);
-    if (this.props.visible !== true) return null;
-    const p = { visible: this.props.visible, style: styles.modal };
-    return (
-      <RNNModalViewManager {...p}>
-        <View style={styles.container}>{this.props.children}</View>
-      </RNNModalViewManager>
-    );
+    console.log(`render`, this.props);
+    const p = { visible: this.props.visible };
+    if (this.props.visible && !this.backPressed) {
+      return (
+        <RNNModalViewManager {...p}>
+          <SafeAreaView style={styles.container}>
+            <View style={styles.container}>{this.props.children}</View>
+          </SafeAreaView>
+        </RNNModalViewManager>
+      );
+    } else {
+      return <></>;
+    }
   }
 }
 
@@ -32,7 +67,6 @@ const styles = StyleSheet.create({
     //s: 'absolute',
   },
   container: {
-    backgroundColor: 'yellow',
     top: 0,
     flex: 1,
   },
diff --git a/playground/src/screens/LayoutsScreen.tsx b/playground/src/screens/LayoutsScreen.tsx
index 052c9aa6900..8eb6d347381 100644
--- a/playground/src/screens/LayoutsScreen.tsx
+++ b/playground/src/screens/LayoutsScreen.tsx
@@ -13,7 +13,7 @@ import testIDs from '../testIDs';
 import Screens from './Screens';
 import Navigation from '../services/Navigation';
 import { stack } from '../commons/Layouts';
-import { Text } from 'react-native';
+import { Modal, Text } from 'react-native';
 
 const {
   WELCOME_SCREEN_HEADER,
@@ -27,6 +27,7 @@ const {
 interface State {
   componentDidAppear: boolean;
   modalVisible: boolean;
+  rnModalVisibile: boolean;
 }
 
 export default class LayoutsScreen extends NavigationComponent<NavigationComponentProps, State> {
@@ -36,6 +37,7 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     this.state = {
       componentDidAppear: false,
       modalVisible: false,
+      rnModalVisibile: false,
     };
   }
 
@@ -61,20 +63,17 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     return (
       <Root componentId={this.props.componentId}>
         <RNNModal visible={this.state.modalVisible}>
-          <Button label="Button" onPress={this.toggleModal} />
-          <Button label="Button2" onPress={this.toggleModal} />
-          <Button label="Button3" onPress={this.toggleModal} />
+          <Button label="Dismiss Modal" onPress={this.toggleModal} />
         </RNNModal>
 
-        {/* <Modal visible={this.state.modalVisible}>
-          <Button label="Button" onPress={this.toggleModal} />
-          <Button label="Button2" onPress={this.toggleModal} />
-          <Button label="Button3" onPress={this.toggleModal} />
-        </Modal> */}
+        <Modal visible={this.state.rnModalVisibile}>
+          <Button label="Dismiss RN Modal" onPress={this.toggleRNModal} />
+        </Modal>
         <Button label="Stack" testID={STACK_BTN} onPress={this.stack} />
         <Button label="BottomTabs" testID={BOTTOM_TABS_BTN} onPress={this.bottomTabs} />
         <Button label="SideMenu" testID={SIDE_MENU_BTN} onPress={this.sideMenu} />
         <Button label="Toggle modal" onPress={this.toggleModal} />
+        <Button label="Toggle RN modal" onPress={this.toggleRNModal} />
 
         <Button
           label="SplitView"
@@ -87,6 +86,7 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     );
   }
 
+  toggleRNModal = () => this.setState({ rnModalVisibile: !this.state.rnModalVisibile });
   toggleModal = () => this.setState({ modalVisible: !this.state.modalVisible });
   stack = () => Navigation.showModal(stack(Screens.Stack, 'StackId'));
 
diff --git a/scripts/start.js b/scripts/start.js
index 701b765358c..abc8db336ee 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -6,10 +6,10 @@ if (isWindows) runWin32();
 else run();
 
 function run() {
-  exec.killPort(8081);
+  // exec.killPort(8081);
   exec.execSync(`watchman watch-del-all || true`);
   exec.execSync(`adb reverse tcp:8081 tcp:8081 || true`);
-  exec.execSync(`node ./node_modules/react-native/local-cli/cli.js start --reset-cache`);
+  exec.execSync(`node ./node_modules/react-native/local-cli/cli.js start`);
 }
 
 function runWin32() {

From 910d468b2f5b02eeed06900745ff7e9360a905ea Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Thu, 16 Sep 2021 06:28:11 +0300
Subject: [PATCH 10/43] add events

---
 .../react/DeclaredLayoutController.kt         | 28 ++++++-
 .../react/DeclaredLayoutHost.kt               | 30 +++----
 .../react/RNNModalViewManager.kt              | 84 ++++++++++---------
 .../react/modal/Events.kt                     | 48 +++++++++++
 lib/src/components/RNNModal.tsx               | 51 +++--------
 playground/src/screens/LayoutsScreen.tsx      | 27 +++++-
 6 files changed, 167 insertions(+), 101 deletions(-)
 create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
index d8b00649eed..50e5e55ec35 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
@@ -2,7 +2,11 @@ package com.reactnativenavigation.react
 
 import android.app.Activity
 import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerModule
 import com.reactnativenavigation.options.Options
+import com.reactnativenavigation.react.modal.ModalDismissEvent
+import com.reactnativenavigation.react.modal.RequestDismissModalEvent
+import com.reactnativenavigation.react.modal.ShowModalEvent
 import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController
 import com.reactnativenavigation.viewcontrollers.viewcontroller.YellowBoxDelegate
 import com.reactnativenavigation.viewcontrollers.viewcontroller.overlay.ViewControllerOverlay
@@ -13,7 +17,8 @@ class DeclaredLayoutController(
     id: String?,
     yellowBoxDelegate: YellowBoxDelegate?,
     initialOptions: Options?,
-    overlay: ViewControllerOverlay?
+    overlay: ViewControllerOverlay?,
+    val getHostId:()->Int
 ) : ViewController<DeclaredLayout>(activity, id, yellowBoxDelegate, initialOptions, overlay) {
     override fun isViewShown(): Boolean {
         return !isDestroyed && view != null && view!!.isShown
@@ -31,7 +36,26 @@ class DeclaredLayoutController(
     }
 
     override fun sendOnNavigationButtonPressed(buttonId: String?) {
-        TODO("Not yet implemented")
+        if(buttonId == Constants.HARDWARE_BACK_BUTTON_ID ){
+                val dispatcher = reactContext.getNativeModule(
+                    UIManagerModule::class.java
+                ).eventDispatcher
+                dispatcher.dispatchEvent(RequestDismissModalEvent(getHostId()))
+        }
+    }
+
+    fun sendDismissEvent(){
+        val dispatcher = reactContext.getNativeModule(
+            UIManagerModule::class.java
+        ).eventDispatcher
+        dispatcher.dispatchEvent(ModalDismissEvent(getHostId()))
+    }
+
+    fun sendShowEvent(){
+        val dispatcher = reactContext.getNativeModule(
+            UIManagerModule::class.java
+        ).eventDispatcher
+        dispatcher.dispatchEvent(ShowModalEvent(getHostId()))
     }
 
 }
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
index 5cc729aed64..e569853c199 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
@@ -1,5 +1,6 @@
 package com.reactnativenavigation.react
 
+import android.annotation.SuppressLint
 import android.annotation.TargetApi
 import android.view.View
 import android.view.ViewGroup
@@ -10,15 +11,21 @@ import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.uimanager.ThemedReactContext
 import com.reactnativenavigation.options.Options
+import com.reactnativenavigation.options.params.Bool
 import com.reactnativenavigation.utils.CompatUtils
 import com.reactnativenavigation.viewcontrollers.viewcontroller.YellowBoxDelegate
 import com.reactnativenavigation.viewcontrollers.viewcontroller.overlay.ViewControllerOverlay
 import java.util.*
 
+@SuppressLint("ViewConstructor")
 open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reactContext), LifecycleEventListener {
-    val viewController = DeclaredLayoutController(reactContext,
+    val viewController = DeclaredLayoutController(
+        reactContext,
         reactContext.currentActivity, CompatUtils.generateViewId().toString(),
-        YellowBoxDelegate(reactContext), Options.EMPTY, ViewControllerOverlay(reactContext)
+        YellowBoxDelegate(reactContext), Options().apply {
+            hardwareBack.dismissModalOnPress = Bool(false)
+        }, ViewControllerOverlay(reactContext),
+        getHostId = { this.id }
     )
     private val mHostView = viewController.view
 
@@ -33,10 +40,6 @@ open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reac
 
     override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {}
 
-    override fun onDetachedFromWindow() {
-        super.onDetachedFromWindow()
-    }
-
     override fun addView(child: View?, index: Int) {
         UiThreadUtil.assertOnUiThread()
         mHostView.addView(child, index)
@@ -63,20 +66,13 @@ open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reac
 
     override fun addChildrenForAccessibility(outChildren: ArrayList<View?>?) {}
 
-    override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent?): Boolean {
-        return false
-    }
+    override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent?): Boolean { return false }
 
-    open fun onDropInstance() {
-        (this.context as ReactContext).removeLifecycleEventListener(this)
-    }
+    open fun onDropInstance() { (this.context as ReactContext).removeLifecycleEventListener(this) }
 
-    override fun onHostResume() {
-    }
+    override fun onHostResume() {}
 
     override fun onHostPause() {}
 
-    override fun onHostDestroy() {
-        onDropInstance()
-    }
+    override fun onHostDestroy() { onDropInstance() }
 }
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
index 2c5668d3d63..261f1367777 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
@@ -1,62 +1,68 @@
 package com.reactnativenavigation.react
 
-import android.graphics.Point
 import android.view.View
+import com.facebook.react.common.MapBuilder
 import com.facebook.react.module.annotations.ReactModule
-import com.facebook.react.uimanager.LayoutShadowNode
-import com.facebook.react.uimanager.ReactShadowNodeImpl
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.reactnativenavigation.react.modal.ModalDismissEvent
+import com.reactnativenavigation.react.modal.RequestDismissModalEvent
+import com.reactnativenavigation.react.modal.ShowModalEvent
 import com.reactnativenavigation.viewcontrollers.navigator.Navigator
 
 private const val MODAL_MANAGER_NAME = "RNNModalViewManager"
 
-class DeclaredLayoutShadowNode : LayoutShadowNode() {
-    override fun addChildAt(child: ReactShadowNodeImpl, i: Int) {
-        super.addChildAt(child, i)
-        val modalSize = Point(screenWidth, screenHeight)
-        child.setStyleWidth(100f)
-        child.setStyleHeight(100f)
-    }
+@ReactModule(name = MODAL_MANAGER_NAME)
+    class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<DeclaredLayoutHost>() {
 
-}
+        override fun getName(): String = MODAL_MANAGER_NAME
 
+        override fun createViewInstance(reactContext: ThemedReactContext): DeclaredLayoutHost {
+            return DeclaredLayoutHost(reactContext)
+        }
 
-@ReactModule(name = MODAL_MANAGER_NAME)
-class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<DeclaredLayoutHost>() {
+        override fun onDropViewInstance(modal: DeclaredLayoutHost) {
+            super.onDropViewInstance(modal)
+            navigator.dismissModal(modal.viewController.id, CommandListenerAdapter(object: CommandListener {
+                override fun onSuccess(childId: String?) {
+                    modal.viewController.sendDismissEvent()
+                }
 
-    override fun getName(): String = MODAL_MANAGER_NAME
+                override fun onError(message: String?) {
+                }
 
-    override fun createViewInstance(reactContext: ThemedReactContext): DeclaredLayoutHost {
-        return DeclaredLayoutHost(reactContext)
-    }
+            }))
+            modal.onDropInstance()
+        }
 
-    override fun createShadowNodeInstance(): LayoutShadowNode {
-        return DeclaredLayoutShadowNode()
-    }
+        override fun onAfterUpdateTransaction(modal: DeclaredLayoutHost) {
+            super.onAfterUpdateTransaction(modal)
+            navigator.showModal(modal.viewController, CommandListenerAdapter(object : CommandListener {
+                override fun onSuccess(childId: String?) {
+                    modal.viewController.sendShowEvent()
+                }
 
-    override fun getShadowNodeClass(): Class<out LayoutShadowNode> {
-        return DeclaredLayoutShadowNode::class.java
-    }
+                override fun onError(message: String?) {
+                }
 
-    override fun onDropViewInstance(modal: DeclaredLayoutHost) {
-        super.onDropViewInstance(modal)
-        modal.onDropInstance()
-        navigator.dismissModal(modal.viewController.id, CommandListenerAdapter())
-    }
+            }))
+        }
 
-    override fun onAfterUpdateTransaction(modal: DeclaredLayoutHost) {
-        super.onAfterUpdateTransaction(modal)
-        navigator.showModal(modal.viewController, CommandListenerAdapter())
-    }
+        override fun addView(parent: DeclaredLayoutHost?, child: View?, index: Int) {
+            super.addView(parent, child, index)
+        }
 
-    override fun addView(parent: DeclaredLayoutHost?, child: View?, index: Int) {
-        super.addView(parent, child, index)
-    }
+        override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
+            return MapBuilder.builder<String, Any>()
+                .put(RequestDismissModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onRequestDismiss"))
+                .put(ModalDismissEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDismiss"))
+                .put(ShowModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onShow"))
+                .build()
+        }
 
-    @ReactProp(name = "visible")
-    fun setVisible(modal: DeclaredLayoutHost, visible: Boolean) {
-    }
+        @ReactProp(name = "visible")
+        fun setVisible(modal: DeclaredLayoutHost, visible: Boolean) {
+        }
 
-}
\ No newline at end of file
+    }
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt
new file mode 100644
index 00000000000..910757f3cb0
--- /dev/null
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt
@@ -0,0 +1,48 @@
+package com.reactnativenavigation.react.modal
+
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+open class ModalDismissEvent(viewTag: Int) : Event<RequestDismissModalEvent>(viewTag) {
+
+    companion object{
+        const val EVENT_NAME = "topModalDismiss"
+    }
+
+    override fun getEventName(): String {
+        return EVENT_NAME
+    }
+
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+        rctEventEmitter.receiveEvent(viewTag, eventName, null)
+    }
+}
+open class RequestDismissModalEvent(viewTag: Int) : Event<RequestDismissModalEvent>(viewTag) {
+
+    companion object{
+        const val EVENT_NAME = "topRequestDismiss"
+    }
+
+    override fun getEventName(): String {
+        return EVENT_NAME
+    }
+
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+        rctEventEmitter.receiveEvent(viewTag, eventName, null)
+    }
+}
+
+open class ShowModalEvent(viewTag: Int) : Event<ShowModalEvent>(viewTag) {
+
+    companion object{
+        const val EVENT_NAME = "topShow"
+    }
+
+    override fun getEventName(): String {
+        return EVENT_NAME
+    }
+
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+        rctEventEmitter.receiveEvent(viewTag, eventName, null)
+    }
+}
\ No newline at end of file
diff --git a/lib/src/components/RNNModal.tsx b/lib/src/components/RNNModal.tsx
index 93209cf84dd..7e919cc5976 100644
--- a/lib/src/components/RNNModal.tsx
+++ b/lib/src/components/RNNModal.tsx
@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  requireNativeComponent,
-  ViewProps,
-  StyleSheet,
-  BackHandler,
-  SafeAreaView,
-} from 'react-native';
+import { requireNativeComponent, ViewProps, StyleSheet } from 'react-native';
 import { View } from 'react-native-ui-lib';
 export interface RNNModalProps extends ViewProps {
   // animationType?: 'none' | 'slide' | 'fade' | null;
@@ -13,58 +7,35 @@ export interface RNNModalProps extends ViewProps {
   // transparent?: boolean;
   // statusBarTranslucent?: boolean;
   // hardwareAccelerated?: boolean;
-  onDismissed(): any;
+  onShow?: () => any;
+  onDismiss?: () => any;
+  onRequestDismiss: () => any;
   visible: boolean;
 }
 
 const RNNModalViewManager = requireNativeComponent('RNNModalViewManager');
-type RNNModalState = {
-  displayed: boolean;
-};
-export class RNNModal extends React.Component<RNNModalProps, RNNModalState> {
-  private backHandler?: any;
-  private backPressed: boolean;
+
+export class RNNModal extends React.Component<RNNModalProps> {
   constructor(props: RNNModalProps) {
     super(props);
-    this.backPressed = false;
-  }
-
-  componentDidMount() {
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-      this.backPressed = true;
-      return false;
-    });
-  }
-  componentWillUnmount() {
-    console.log(`componentWillUnmount`);
-    this.backHandler?.remove();
-  }
-
-  componentDidUpdate() {
-    if (this.backPressed) {
-      this.backPressed = false;
-    }
   }
   render() {
-    console.log(`render`, this.props);
-    const p = { visible: this.props.visible };
-    if (this.props.visible && !this.backPressed) {
+    const p = { ...this.props, style: styles.modal };
+    if (this.props.visible) {
       return (
         <RNNModalViewManager {...p}>
-          <SafeAreaView style={styles.container}>
-            <View style={styles.container}>{this.props.children}</View>
-          </SafeAreaView>
+          <View style={styles.container}>{this.props.children}</View>
         </RNNModalViewManager>
       );
     } else {
-      return <></>;
+      return null;
     }
   }
 }
 
 const styles = StyleSheet.create({
   modal: {
-    //s: 'absolute',
+    position: 'absolute',
   },
   container: {
     top: 0,
diff --git a/playground/src/screens/LayoutsScreen.tsx b/playground/src/screens/LayoutsScreen.tsx
index 8eb6d347381..4d1eab2b31b 100644
--- a/playground/src/screens/LayoutsScreen.tsx
+++ b/playground/src/screens/LayoutsScreen.tsx
@@ -59,14 +59,35 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     };
   }
 
+  onRequestDismiss = () => {
+    console.log('OnRequestDismiss called');
+    this.setState({ modalVisible: false });
+  };
+
+  onModalDismiss = () => {
+    console.log('Modal Dismissed');
+  };
+
+  onModalShow = () => {
+    console.log('Modal Shown');
+  };
+
   render() {
     return (
       <Root componentId={this.props.componentId}>
-        <RNNModal visible={this.state.modalVisible}>
-          <Button label="Dismiss Modal" onPress={this.toggleModal} />
+        <RNNModal
+          visible={this.state.modalVisible}
+          onRequestDismiss={this.onRequestDismiss}
+          onDismiss={this.onModalDismiss}
+          onShow={this.onModalShow}
+        >
+          <Button label="Dismiss Modal eee" onPress={this.toggleModal} />
         </RNNModal>
 
-        <Modal visible={this.state.rnModalVisibile}>
+        <Modal
+          visible={this.state.rnModalVisibile}
+          onRequestClose={() => this.setState({ rnModalVisibile: false })}
+        >
           <Button label="Dismiss RN Modal" onPress={this.toggleRNModal} />
         </Modal>
         <Button label="Stack" testID={STACK_BTN} onPress={this.stack} />

From e1555a5f36b34c3f62f5d201479de740f40911c9 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Thu, 16 Sep 2021 07:03:32 +0300
Subject: [PATCH 11/43] make children collapsable (native managed)

---
 lib/src/components/RNNModal.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/lib/src/components/RNNModal.tsx b/lib/src/components/RNNModal.tsx
index 7e919cc5976..782defa5ef1 100644
--- a/lib/src/components/RNNModal.tsx
+++ b/lib/src/components/RNNModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { requireNativeComponent, ViewProps, StyleSheet } from 'react-native';
+import { requireNativeComponent, ViewProps, StyleSheet, ScrollView } from 'react-native';
 import { View } from 'react-native-ui-lib';
 export interface RNNModalProps extends ViewProps {
   // animationType?: 'none' | 'slide' | 'fade' | null;
@@ -24,7 +24,11 @@ export class RNNModal extends React.Component<RNNModalProps> {
     if (this.props.visible) {
       return (
         <RNNModalViewManager {...p}>
-          <View style={styles.container}>{this.props.children}</View>
+          <ScrollView>
+            <View style={styles.container} collapsable={false}>
+              {this.props.children}
+            </View>
+          </ScrollView>
         </RNNModalViewManager>
       );
     } else {
@@ -35,9 +39,11 @@ export class RNNModal extends React.Component<RNNModalProps> {
 
 const styles = StyleSheet.create({
   modal: {
+    backgroundColor: 'yellow',
     position: 'absolute',
   },
   container: {
+    backgroundColor: 'red',
     top: 0,
     flex: 1,
   },

From b07e79016333c150c5717c34b54f9df6cb9d6ce2 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Thu, 16 Sep 2021 07:04:04 +0300
Subject: [PATCH 12/43] Squashed commit of the following:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

commit 9a975b4c55776ba3512e50caae1d7861a8feb1a4
Author: wixmobile <mobile1@wix.com>
Date:   Tue Sep 14 05:26:23 2021 -0400

    Update package.json version to 7.21.0 [ci skip]

commit 0f61d3ffcd0231785d212f7e4c1202c5bec98f96
Author: Sergei Butko <svbutko@hotmail.com>
Date:   Tue Sep 14 06:18:01 2021 +0300

    Fix left and right top bar buttons with component crash on Android (#7253)

    * Replace incorrect title bar react button view height measure spec

    * Fix right button with component incorrect ID while measuring its size

    * Add missing View import

    * Update TitleBarReactButtonView.java

    Co-authored-by: Ward Abbass <warda@wix.com>
    Co-authored-by: Ward Abbass <swabbass@gmail.com>

commit 7351d0dd32170a81c5e5c06a2d253b4985e602f6
Author: Sergei Butko <svbutko@hotmail.com>
Date:   Mon Sep 13 23:08:31 2021 +0300

    Apply back button icon changes to scroll edge appearance (#7257)

commit 396879a655672cc0484e5a2a42c3483ac0a0642b
Author: wixmobile <mobile1@wix.com>
Date:   Sun Sep 5 07:14:47 2021 -0400

    Update package.json version to 7.20.0 [ci skip]

commit be858f8db9b49dd8a1761fc5c8453610d9db7c8e
Author: Yogev Ben David <yogev132@gmail.com>
Date:   Sun Sep 5 13:09:30 2021 +0300

    Fix [RNNEnterExitAnimation elementTransitions] crash (#7249)

    Fix a crash caused by #7194 on `[RNNEnterExitAnimation elementTransitions]`.
    This is happening when trying to customize the modal animations.

    ```
    EXCEPTION
    NSInvalidArgumentException
    MESSAGE
    -[RNNEnterExitAnimation elementTransitions]: unrecognized selector sent to instance 0x29d8f8720
    ```

commit 1cd25e6f694ba0c8bd6bfe2c44ad507dabfff3fb
Author: Yogev Ben David <yogev132@gmail.com>
Date:   Sun Sep 5 12:45:26 2021 +0300

    Fix color processing on iOS (#7250)

commit 8b4d03322ecda05b68d1ac04a43d3aed07e19a93
Author: CursedWizard <67508707+CursedWizard@users.noreply.github.com>
Date:   Sun Sep 5 10:55:51 2021 +0200

    docs: updated community libraries. (#7245)

    Couldn't find a ready-to-use solution for a bottom sheet component that would work seamlessly with react-native-navigation, so decided to write my own - [React Native Navigation Bottom Sheet Extension](https://github.com/CursedWizard/react-native-navigation-bottom-sheet). Added it to community libraries in docs.

    Also made the list of packages a little bit more organized.

    Co-authored-by: Yogev Ben David <yogev132@gmail.com>

commit ba722f8c36fb7675f7916c7d8be97e194645ff66
Author: Yogev Ben David <yogev132@gmail.com>
Date:   Sun Sep 5 09:47:14 2021 +0300

    Support DynamicColorIOS (#7248)

    * Support DynamicColorIOS

    * Update OptionsProcessor.ts

commit 67b5798aa795235576f56c63ef7053247ba0a377
Author: Sergei Butko <svbutko@hotmail.com>
Date:   Fri Sep 3 14:14:17 2021 +0300

    Add popToRoot option to bottomTab on Android (#7244)

commit e19ff8ce7790dbb450e3e2928ff407f8cad24ccc
Author: Yogev Ben David <yogev132@gmail.com>
Date:   Thu Sep 2 15:38:03 2021 +0300

    Fix remx optional dependency (#7241)

    Currently, remx is an optional peer dependency that is required for our mock consumers only. But it is actually being imported from our main `index.ts` which break users who don't import it even though they are not using mocks.
    The solution is to change the way users import our mocks and make it explicit.

    Mocks now should be imported from `react-native-navigation/Mock`.

    Co-authored-by: Carl-Gerhard Lindesvärd <c.lindesvard@klarna.com>

commit bb2b09eed05280d83abf1d850a856041c43a6afa
Author: Sergei Butko <svbutko@hotmail.com>
Date:   Thu Sep 2 14:46:34 2021 +0300

    Pop to root when tapping on active bottom tab on Android (#7239)

    * Pop to root when tapping on active bottom tab

    * Add missing imports

    * Add stack type checking before popping to root

commit 74c09f4f8ea0eb4a234a35dd8e0dc95c5ab98d8b
Author: Sergei Butko <svbutko@hotmail.com>
Date:   Thu Sep 2 14:30:02 2021 +0300

    Add support to change the search bar's cancel button text on iOS (#7240)

    * Add support to change the search bar's cancel button text on iOS

    * Replace incorrectly used test option

commit 8831ccf1fd7d6b95fed269f88e9a9613b01e0b28
Author: Sergei Butko <svbutko@hotmail.com>
Date:   Thu Sep 2 13:53:18 2021 +0300

    Change bottom tabs height constants value calculation to the dimen-based one (#7238)

    Co-authored-by: Ward Abbass <warda@wix.com>

commit d48e3d5bfeaa1ef45e837ccee99d6f28e58dc7d1
Author: Ward Abbass <warda@wix.com>
Date:   Wed Sep 1 21:36:45 2021 +0300

    Changing StatusBar when unrelated mergeOptions Fix (#7237)

    # Issue:

    Each time `mergeOptions` is called, even with non `StatusBar` related options, the status bar state will change without taking defaults or static options into consideration.

    # Fix

    Check if options for `StatusBar` are present and then apply them on merge options.

    https://user-images.githubusercontent.com/7227793/131662099-09a91198-2033-4f50-a6f0-a29b70b5c5e5.mov

    Closing: #7232.

commit 537eb08c8e2111afeac4c179cd20033fe7cb951e
Author: Ward Abbass <warda@wix.com>
Date:   Wed Sep 1 14:34:56 2021 +0300

    Component Lifecycle events fix onPause/onResume (#7235)

    * Add test cases for new issues

    * handle pause/resume in modal stack

    * Delete OverlayManager.java

    * pass pause/resume to modals/overlayes

    - overlays should always get the events since they are on top
    - modals basically covers the whole view behind
    - all other layers can handle events in this order

    * Update OverlayManager.kt

    * Update Navigator.java

    * add tests for overCurrentContext mode

    * add peekDisplayedOverCurrentContext

    * call root when top modal is overCurrentContext

    Co-authored-by: Guy Carmeli <guyca@users.noreply.github.com>

commit 97dd091cbf9922f060b3764c1dadad1a4ad0f01f
Author: Ward Abbass <swabbass@gmail.com>
Date:   Wed Sep 1 12:38:13 2021 +0300

    add studio npm shortcut

commit 3d10758d0c6315fddac4317aa1ef646a9c4e6a55
Author: Ward Abbass <warda@wix.com>
Date:   Tue Aug 31 11:34:53 2021 +0300

    Status bar updates causes ui freeze on some devices (#7231)

    Modify flags for DecorView in the global main thread handler caused ui to freeze when calling `mergeOptions` inside useEffect.
    This happens on Samsung devices with Android 9, that seems it has issues internally since it is not reproduce on emulator and other devices including Samsungs with new android versions.

    The workaround was to set the flags in a task to run in the DecorView MessageQueue in order to ensure flags are set when the DecorView is ready internally to accept changes.

    Co-authored-by: Yogev Ben David <yogev132@gmail.com>

commit ec34501fb99a6bac070d692e9a36be618874f06c
Author: Yogev Ben David <yogev132@gmail.com>
Date:   Tue Aug 31 10:09:34 2021 +0300

    Avoid calling AppRegistry.registerComponent in mocked mode (#7234)

commit dfdb451a7d6621d1af24149b02161b44226dd908
Author: VNDRN <60874935+VNDRN@users.noreply.github.com>
Date:   Sun Aug 29 15:55:21 2021 +0200

    Update api-events.mdx (#7224)

    When testing the `registerModalAttemptedToDismissListener` event, I noticed that I had to set the `swipeToDismiss` flag to false. The docs currently falsely indicate it should be `true`

commit 1db86ce376f677255196aa774c6d6cf4ae58c98b
Author: Ward Abbass <warda@wix.com>
Date:   Sun Aug 29 16:01:27 2021 +0300

    PlatformColor Support (#7216)

    Following the discussion here: #6618.

    ## Android
    - Colours are parsed natively.
    - Creating custom colour when a PlatformColor is passed to native.
    - Both light/dark values have the same res attribute resolved when `get` is called.

    ## IOS
    - Added a custom colour.
    - Changed storyboard splash screen.
    - Using `labelColor` as a test.

    CC: @yogevbd
    closes: #6618

    Co-authored-by: Yogev Ben David <yogev132@gmail.com>

commit 00936844c8a21cb9a89272203c29cda5c565c0d3
Author: Yogev Ben David <yogev132@gmail.com>
Date:   Sun Aug 29 13:27:12 2021 +0300

    Move remx to optional peer dependencies (#7230)

commit e3e7812b3169a460aa2f928a07d69a01c4a79ae0
Author: wixmobile <mobile1@wix.com>
Date:   Mon Aug 23 05:38:37 2021 -0400

    Update package.json version to 7.19.0 [ci skip]
---
 Mock.ts                                       |   1 +
 jest-setup.js                                 |   4 +-
 .../options/BottomTabOptions.java             |   4 +
 .../options/params/ReactPlatformColor.kt      |  23 +++
 .../options/params/ThemeColour.kt             |  15 +-
 .../options/parsers/JSONParser.java           |   5 +-
 .../react/Constants.java                      |   1 -
 .../react/NavigationModule.java               |   2 +-
 .../reactnativenavigation/utils/UiUtils.java  |  14 ++
 .../bottomtabs/BottomTabsController.java      |  15 +-
 .../viewcontrollers/modal/ModalPresenter.java |   3 +
 .../viewcontrollers/modal/ModalStack.java     |  21 ++-
 .../viewcontrollers/navigator/Navigator.java  |  20 ++-
 .../overlay/OverlayManager.java               |  75 ---------
 .../viewcontrollers/overlay/OverlayManager.kt |  71 +++++++++
 .../viewcontrollers/stack/StackPresenter.java |  14 +-
 .../viewcontroller/Presenter.java             |  19 ++-
 .../titlebar/TitleBarReactButtonView.java     |  10 +-
 .../options/parsers/ColorParser.java          |  32 ----
 .../options/parsers/ColorParser.kt            |  38 +++++
 .../com/reactnativenavigation/BaseTest.java   |   4 +
 .../options/parsers/ColorParseTest.java       |  33 ++++
 .../navigator/NavigatorTest.java              | 145 +++++++++++++++++-
 lib/ios/RNNAnimationsOptions.h                |   1 -
 lib/ios/RNNComponentPresenter.m               |   4 +
 lib/ios/RNNEnterExitAnimation.h               |   4 +
 lib/ios/RNNEnterExitAnimation.m               |  27 +++-
 lib/ios/RNNModalManager.m                     |  23 ++-
 lib/ios/RNNSearchBarOptions.h                 |   1 +
 lib/ios/RNNSearchBarOptions.m                 |   3 +
 .../project.pbxproj                           |   8 -
 lib/ios/TopBarAppearancePresenter.m           |   1 +
 lib/ios/UIViewController+RNNOptions.h         |   3 +-
 lib/ios/UIViewController+RNNOptions.m         |   6 +-
 lib/ios/ViewAnimationOptions.h                |  16 --
 lib/ios/ViewAnimationOptions.m                |  56 -------
 lib/src/Mock/index.ts                         |  13 ++
 lib/src/Mock/mocks/AppRegistryService.ts      |   5 +
 lib/src/Navigation.ts                         |   7 +-
 lib/src/NavigationDelegate.ts                 |  22 ++-
 lib/src/commands/OptionsProcessor.test.ts     |  59 +++++--
 lib/src/commands/OptionsProcessor.ts          |  45 ++++--
 lib/src/index.ts                              |   1 -
 lib/src/interfaces/Options.ts                 |  10 +-
 package.json                                  |  20 ++-
 .../app/src/main/res/values-night/colors.xml  |   5 +
 .../src/main/res/values-notnight/colors.xml   |   5 +
 .../app/src/main/res/values/colors.xml        |   5 +
 .../app/src/main/res/values/styles.xml        |   6 -
 .../NavigationTests/RNNSearchBarOptionsTest.m |  11 +-
 .../rnnTextColor.colorset/Contents.json       |  51 ++++++
 .../ios/playground/LaunchScreen.storyboard    |  22 ++-
 playground/src/commons/Colors.ts              |   7 +-
 website/docs/api/options-bottomTab.mdx        |   8 +
 website/docs/api/topBar-searchBar.mdx         |   6 +
 website/docs/docs/community-libraries.mdx     |  11 +-
 .../version-7.16.0/api/api-events.mdx         |   2 +-
 .../docs/community-libraries.mdx              |  11 +-
 58 files changed, 759 insertions(+), 295 deletions(-)
 create mode 100644 Mock.ts
 create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/options/params/ReactPlatformColor.kt
 delete mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.java
 create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.kt
 delete mode 100644 lib/android/app/src/reactNative63/java/com/reactnativenavigation/options/parsers/ColorParser.java
 create mode 100644 lib/android/app/src/reactNative63/java/com/reactnativenavigation/options/parsers/ColorParser.kt
 delete mode 100644 lib/ios/ViewAnimationOptions.h
 delete mode 100644 lib/ios/ViewAnimationOptions.m
 create mode 100644 lib/src/Mock/mocks/AppRegistryService.ts
 create mode 100644 playground/android/app/src/main/res/values-night/colors.xml
 create mode 100644 playground/android/app/src/main/res/values-notnight/colors.xml
 create mode 100644 playground/android/app/src/main/res/values/colors.xml
 create mode 100644 playground/ios/playground/Images.xcassets/rnnTextColor.colorset/Contents.json

diff --git a/Mock.ts b/Mock.ts
new file mode 100644
index 00000000000..c4cbf00d1c0
--- /dev/null
+++ b/Mock.ts
@@ -0,0 +1 @@
+export * from './lib/dist/Mock';
diff --git a/jest-setup.js b/jest-setup.js
index 23a79cc85d0..1cd3444f44d 100644
--- a/jest-setup.js
+++ b/jest-setup.js
@@ -3,11 +3,11 @@ const { mockDetox } = require('detox-testing-library-rnn-adapter');
 mockDetox(() => require('./playground/index'));
 
 beforeEach(() => {
-  const { Navigation } = require('react-native-navigation');
+  const { mockNativeComponents } = require('react-native-navigation/Mock');
   setTimeout = (func) => {
     func();
   };
-  Navigation.mockNativeComponents();
+  mockNativeComponents();
   mockUILib();
 });
 
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/options/BottomTabOptions.java b/lib/android/app/src/main/java/com/reactnativenavigation/options/BottomTabOptions.java
index e36301d9e13..24e22b0a994 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/options/BottomTabOptions.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/options/BottomTabOptions.java
@@ -43,6 +43,7 @@ public static BottomTabOptions parse(Context context, TypefaceLoader typefaceMan
         options.selectedFontSize = NumberParser.parse(json, "selectedFontSize");
         options.dotIndicator = DotIndicatorOptions.parse(context, json.optJSONObject("dotIndicator"));
         options.selectTabOnPress = BoolParser.parse(json, "selectTabOnPress");
+        options.popToRoot = BoolParser.parse(json, "popToRoot");
 
         return options;
     }
@@ -64,6 +65,7 @@ public static BottomTabOptions parse(Context context, TypefaceLoader typefaceMan
     public Number fontSize = new NullNumber();
     public Number selectedFontSize = new NullNumber();
     public Bool selectTabOnPress = new NullBool();
+    public Bool popToRoot = new NullBool();
     public FontOptions font = new FontOptions();
 
 
@@ -87,6 +89,7 @@ void mergeWith(final BottomTabOptions other) {
         font.mergeWith(other.font);
         if (other.dotIndicator.hasValue()) dotIndicator = other.dotIndicator;
         if (other.selectTabOnPress.hasValue()) selectTabOnPress = other.selectTabOnPress;
+        if (other.popToRoot.hasValue()) popToRoot = other.popToRoot;
     }
 
     void mergeWithDefault(final BottomTabOptions defaultOptions) {
@@ -109,6 +112,7 @@ void mergeWithDefault(final BottomTabOptions defaultOptions) {
         if (!testId.hasValue()) testId = defaultOptions.testId;
         if (!dotIndicator.hasValue()) dotIndicator = defaultOptions.dotIndicator;
         if (!selectTabOnPress.hasValue()) selectTabOnPress = defaultOptions.selectTabOnPress;
+        if (!popToRoot.hasValue()) popToRoot = defaultOptions.popToRoot;
 
     }
 
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/options/params/ReactPlatformColor.kt b/lib/android/app/src/main/java/com/reactnativenavigation/options/params/ReactPlatformColor.kt
new file mode 100644
index 00000000000..5850dc0ca21
--- /dev/null
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/options/params/ReactPlatformColor.kt
@@ -0,0 +1,23 @@
+package com.reactnativenavigation.options.params
+
+import com.facebook.react.bridge.ColorPropConverter
+import com.facebook.react.bridge.ReadableMap
+import com.reactnativenavigation.NavigationApplication
+
+private fun parsePlatformColor(paths: ReadableMap) =
+    ColorPropConverter.getColor(paths, NavigationApplication.instance)
+
+class ReactPlatformColor(private val paths: ReadableMap) :
+    Colour(parsePlatformColor(paths)) {
+    override fun get(): Int {
+        return parsePlatformColor(paths)
+    }
+
+    override fun get(defaultValue: Int?): Int? {
+        return try {
+            parsePlatformColor(paths)
+        }catch (e:Exception){
+            defaultValue
+        }
+    }
+}
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/options/params/ThemeColour.kt b/lib/android/app/src/main/java/com/reactnativenavigation/options/params/ThemeColour.kt
index 5784199b150..0096cc87a20 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/options/params/ThemeColour.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/options/params/ThemeColour.kt
@@ -18,7 +18,7 @@ class NullThemeColour() : ThemeColour(NullColor(), NullColor()) {
 
 open class ThemeColour(private var lightColor: Colour, private var darkColor: Colour) {
 
-    constructor(color:Colour):this(color,color)
+    constructor(color: Colour) : this(color, color)
 
     private fun selectedColor() = if (isDarkMode()) darkColor else lightColor
 
@@ -30,18 +30,23 @@ open class ThemeColour(private var lightColor: Colour, private var darkColor: Co
     fun hasTransparency() = selectedColor().hasTransparency()
     fun canApplyValue() = selectedColor().canApplyValue()
 
-    companion object{
+    companion object {
         @JvmStatic
-        fun of(color:Int) = ThemeColour(Colour(color), Colour(color))
+        fun of(color: Int) = ThemeColour(Colour(color), Colour(color))
+
         @JvmStatic
-        fun of(light:Int,dark:Int) = ThemeColour(Colour(light),Colour(dark))
+        fun of(light: Int, dark: Int) = ThemeColour(Colour(light), Colour(dark))
 
         @JvmStatic
         fun parse(context: Context, json: JSONObject?): ThemeColour {
             return json?.let {
-                ThemeColour(ColorParser.parse(context, json, LIGHT_COLOR_KEY), ColorParser.parse(context, json, DARK_COLOR_KEY))
+                ThemeColour(
+                    ColorParser.parse(context, json, LIGHT_COLOR_KEY),
+                    ColorParser.parse(context, json, DARK_COLOR_KEY)
+                )
             } ?: NullThemeColour()
         }
+
         @JvmStatic
         fun transparent() = of(Color.TRANSPARENT)
 
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/options/parsers/JSONParser.java b/lib/android/app/src/main/java/com/reactnativenavigation/options/parsers/JSONParser.java
index 09b91606ed5..68f0195cb52 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/options/parsers/JSONParser.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/options/parsers/JSONParser.java
@@ -1,5 +1,6 @@
 package com.reactnativenavigation.options.parsers;
 
+import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableMapKeySetIterator;
@@ -98,7 +99,7 @@ private static Object parseNumber(ReadableArray arr, int index) {
     }
 
     public static WritableMap convert(JSONObject jsonObject) {
-        WritableMap map = new WritableNativeMap();
+        WritableMap map = Arguments.createMap();
 
         Iterator<String> iterator = jsonObject.keys();
         while (iterator.hasNext()) {
@@ -125,7 +126,7 @@ public static WritableMap convert(JSONObject jsonObject) {
     }
 
     public static WritableArray convert(JSONArray jsonArray) {
-        WritableArray array = new WritableNativeArray();
+        WritableArray array = Arguments.createArray();
 
         for (int i = 0; i < jsonArray.length(); i++) {
             Object value = jsonArray.opt(i);
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/Constants.java b/lib/android/app/src/main/java/com/reactnativenavigation/react/Constants.java
index d46deac0406..8af0e081b42 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/Constants.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/Constants.java
@@ -7,5 +7,4 @@ public class Constants {
     public static final String STATUS_BAR_HEIGHT_KEY = "statusBarHeight";
     public static final String TOP_BAR_HEIGHT_KEY = "topBarHeight";
     public static final String BOTTOM_TABS_HEIGHT_KEY = "bottomTabsHeight";
-    public static final int BOTTOM_TABS_HEIGHT = 56;
 }
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
index 637ec38291f..6ead119fe4f 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
@@ -94,7 +94,7 @@ private WritableMap createNavigationConstantsMap() {
         ReactApplicationContext ctx = getReactApplicationContext();
         WritableMap constants = Arguments.createMap();
         constants.putString(Constants.BACK_BUTTON_JS_KEY, Constants.BACK_BUTTON_ID);
-        constants.putDouble(Constants.BOTTOM_TABS_HEIGHT_KEY, Constants.BOTTOM_TABS_HEIGHT);
+        constants.putDouble(Constants.BOTTOM_TABS_HEIGHT_KEY, pxToDp(ctx, UiUtils.getBottomTabsHeight(ctx)));
         constants.putDouble(Constants.STATUS_BAR_HEIGHT_KEY, pxToDp(ctx, StatusBarUtils.getStatusBarHeight(ctx)));
         constants.putDouble(Constants.TOP_BAR_HEIGHT_KEY, pxToDp(ctx, UiUtils.getTopBarHeight(ctx)));
         return constants;
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java b/lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java
index 5ea423dbbe1..b7c6c9edd44 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java
@@ -15,8 +15,10 @@
 
 public class UiUtils {
     private static final int DEFAULT_TOOLBAR_HEIGHT = 56;
+    private static final int DEFAULT_BOTTOM_TABS_HEIGHT = 56;
 
     private static int topBarHeight = -1;
+    private static int bottomTabsHeight = -1;
 
     public static <T extends View> void runOnPreDrawOnce(@Nullable final T view, final Functions.Func1<T> task) {
         if (view == null) return;
@@ -117,6 +119,18 @@ public static int getTopBarHeight(Context context) {
         return topBarHeight;
     }
 
+    public static int getBottomTabsHeight(Context context) {
+        if (bottomTabsHeight > 0) {
+            return bottomTabsHeight;
+        }
+        final Resources resources = context.getResources();
+        final int resourceId = resources.getIdentifier("bottom_navigation_height", "dimen", context.getPackageName());
+        bottomTabsHeight = resourceId > 0 ?
+                resources.getDimensionPixelSize(resourceId) :
+                dpToPx(context, DEFAULT_BOTTOM_TABS_HEIGHT);
+        return bottomTabsHeight;
+    }
+
     public static float dpToPx(Context context, float dp) {
         Resources resources = context.getResources();
         return dpToPx(resources.getDisplayMetrics(), dp);
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsController.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsController.java
index 3bfc944a77f..1842b53b88c 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsController.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsController.java
@@ -15,11 +15,13 @@
 import com.reactnativenavigation.options.BottomTabOptions;
 import com.reactnativenavigation.options.Options;
 import com.reactnativenavigation.react.CommandListener;
+import com.reactnativenavigation.react.CommandListenerAdapter;
 import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.viewcontrollers.bottomtabs.attacher.BottomTabsAttacher;
 import com.reactnativenavigation.viewcontrollers.child.ChildControllersRegistry;
 import com.reactnativenavigation.viewcontrollers.parent.ParentController;
+import com.reactnativenavigation.viewcontrollers.stack.StackController;
 import com.reactnativenavigation.viewcontrollers.viewcontroller.Presenter;
 import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController;
 import com.reactnativenavigation.views.bottomtabs.BottomTabs;
@@ -169,15 +171,22 @@ public ViewController<?> getCurrentChild() {
 
     @Override
     public boolean onTabSelected(int index, boolean wasSelected) {
-        BottomTabOptions options = tabs.get(index).resolveCurrentOptions().bottomTabOptions;
+        ViewController<?> stack = tabs.get(index);
+        BottomTabOptions options = stack.resolveCurrentOptions().bottomTabOptions;
 
         eventEmitter.emitBottomTabPressed(index);
 
         if (options.selectTabOnPress.get(true)) {
             eventEmitter.emitBottomTabSelected(bottomTabs.getCurrentItem(), index);
-            if (wasSelected) return false;
-            selectTab(index);
+            if (!wasSelected) {
+                selectTab(index);
+            }
         }
+
+        if (options.popToRoot.get(false) && wasSelected && stack instanceof StackController) {
+            ((StackController) stack).popToRoot(Options.EMPTY, new CommandListenerAdapter());
+        }
+
         return false;
     }
 
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalPresenter.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalPresenter.java
index e4c4a8765a0..8e465ed9b19 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalPresenter.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalPresenter.java
@@ -123,6 +123,9 @@ boolean shouldDismissModal(ViewController toDismiss) {
         return toDismiss.resolveCurrentOptions(defaultOptions).hardwareBack.dismissModalOnPress.get(true);
     }
 
+    public Options resolveOptions(ViewController modalController){
+        return modalController.resolveCurrentOptions(defaultOptions);
+    }
     private void onDismissEnd(ViewController toDismiss, CommandListener listener) {
         listener.onSuccess(toDismiss.getId());
         toDismiss.destroy();
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
index 3d8db7f525f..5dc24a1aec6 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
@@ -5,6 +5,7 @@
 import android.content.res.Configuration;
 import android.view.ViewGroup;
 
+import com.reactnativenavigation.options.ModalPresentationStyle;
 import com.reactnativenavigation.options.Options;
 import com.reactnativenavigation.react.CommandListener;
 import com.reactnativenavigation.react.CommandListenerAdapter;
@@ -186,9 +187,25 @@ public void destroy() {
         modals.clear();
     }
 
-    public void onConfigurationChanged(Configuration newConfig){
-        for(ViewController controller: modals){
+    public void onConfigurationChanged(Configuration newConfig) {
+        for (ViewController controller : modals) {
             controller.onConfigurationChanged(newConfig);
         }
     }
+
+    public void onHostPause() {
+        if (!isEmpty()) {
+            peek().onViewDisappear();
+        }
+    }
+
+    public void onHostResume() {
+        if (!isEmpty()) {
+            peek().onViewDidAppear();
+        }
+    }
+
+    public boolean peekDisplayedOverCurrentContext() {
+        return !isEmpty() && presenter.resolveOptions(peek()).modal.presentationStyle == ModalPresentationStyle.OverCurrentContext;
+    }
 }
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
index c515c3be65b..6575aa9221f 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
@@ -317,10 +317,26 @@ CoordinatorLayout getOverlaysLayout() {
     }
 
     public void onHostPause() {
-        super.onViewDisappear();
+        overlayManager.onHostPause();
+        if (!modalStack.isEmpty()) {
+            modalStack.onHostPause();
+            if(modalStack.peekDisplayedOverCurrentContext()){
+                onViewDisappear();
+            }
+        } else {
+            onViewDisappear();
+        }
     }
 
     public void onHostResume() {
-        super.onViewDidAppear();
+        overlayManager.onHostResume();
+        if (!modalStack.isEmpty()) {
+            modalStack.onHostResume();
+            if(modalStack.peekDisplayedOverCurrentContext()){
+                onViewDidAppear();
+            }
+        } else {
+            onViewDidAppear();
+        }
     }
 }
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.java
deleted file mode 100644
index 1c23347546a..00000000000
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.java
+++ /dev/null
@@ -1,75 +0,0 @@
-package com.reactnativenavigation.viewcontrollers.overlay;
-
-
-import android.content.res.Configuration;
-import android.view.View;
-import android.view.ViewGroup;
-import android.view.WindowManager;
-
-import com.reactnativenavigation.react.CommandListener;
-import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController;
-import com.reactnativenavigation.views.BehaviourDelegate;
-
-import java.util.Collection;
-import java.util.HashMap;
-
-import static com.reactnativenavigation.utils.CollectionUtils.*;
-import static com.reactnativenavigation.utils.CoordinatorLayoutUtils.matchParentWithBehaviour;
-
-public class OverlayManager {
-    private final HashMap<String, ViewController> overlayRegistry = new HashMap<>();
-
-    public void show(ViewGroup overlaysContainer, ViewController overlay, CommandListener listener) {
-        overlaysContainer.setVisibility(View.VISIBLE);
-        overlayRegistry.put(overlay.getId(), overlay);
-        overlay.addOnAppearedListener(() -> {
-            overlay.onViewDidAppear();
-            listener.onSuccess(overlay.getId());
-        });
-//        activity.addContentView(overlay.getView(),matchParentWithBehaviour(new BehaviourDelegate(overlay)));
-        overlaysContainer.addView(overlay.getView(), matchParentWithBehaviour(new BehaviourDelegate(overlay)));
-    }
-    public void onConfigurationChanged(Configuration configuration){
-        final Collection<ViewController> values = overlayRegistry.values();
-        for(ViewController controller : values){
-            controller.onConfigurationChanged(configuration);
-        }
-    }
-
-    public void dismiss(ViewGroup overlaysContainer, String componentId, CommandListener listener) {
-        ViewController overlay = overlayRegistry.get(componentId);
-        if (overlay == null) {
-            listener.onError("Could not dismiss Overlay. Overlay with id " + componentId + " was not found.");
-        } else {
-            destroyOverlay(overlaysContainer, overlay);
-            listener.onSuccess(componentId);
-        }
-    }
-
-    public void dismissAll(ViewGroup overlaysContainer, CommandListener listener) {
-        destroy(overlaysContainer);
-        listener.onSuccess("");
-    }
-
-    public void destroy(ViewGroup overlaysContainer) {
-        forEach(overlayRegistry.values(), overlay -> destroyOverlay(overlaysContainer, overlay));
-    }
-
-    public int size() {
-        return overlayRegistry.size();
-    }
-
-    public ViewController findControllerById(String id) {
-        return overlayRegistry.get(id);
-    }
-
-    private void destroyOverlay(ViewGroup overlaysContainer, ViewController overlay) {
-        overlay.destroy();
-        overlayRegistry.remove(overlay.getId());
-        if (isEmpty()) overlaysContainer.setVisibility(View.GONE);
-    }
-
-    private boolean isEmpty() {
-        return size() == 0;
-    }
-}
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.kt
new file mode 100644
index 00000000000..7ed36cb51a8
--- /dev/null
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayManager.kt
@@ -0,0 +1,71 @@
+package com.reactnativenavigation.viewcontrollers.overlay
+
+import android.content.res.Configuration
+import android.view.View
+import android.view.ViewGroup
+import com.reactnativenavigation.react.CommandListener
+import com.reactnativenavigation.utils.CoordinatorLayoutUtils
+import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController
+import com.reactnativenavigation.views.BehaviourDelegate
+
+class OverlayManager {
+    private val overlayRegistry = mutableMapOf<String, ViewController<*>>()
+    fun show(overlaysContainer: ViewGroup, overlay: ViewController<*>, listener: CommandListener) {
+        overlaysContainer.visibility = View.VISIBLE
+        overlayRegistry[overlay.id] = overlay
+        overlay.addOnAppearedListener {
+            overlay.onViewDidAppear()
+            listener.onSuccess(overlay.id)
+        }
+        overlaysContainer.addView(
+            overlay.view,
+            CoordinatorLayoutUtils.matchParentWithBehaviour(BehaviourDelegate(overlay))
+        )
+    }
+
+    fun onConfigurationChanged(configuration: Configuration?) {
+        overlayRegistry.values.forEach { controller -> controller.onConfigurationChanged(configuration) }
+    }
+
+    fun dismiss(overlaysContainer: ViewGroup, componentId: String, listener: CommandListener) {
+        val overlay = overlayRegistry[componentId]
+        if (overlay == null) {
+            listener.onError("Could not dismiss Overlay. Overlay with id $componentId was not found.")
+        } else {
+            destroyOverlay(overlaysContainer, overlay)
+            listener.onSuccess(componentId)
+        }
+    }
+
+    fun dismissAll(overlaysContainer: ViewGroup, listener: CommandListener) {
+        destroy(overlaysContainer)
+        listener.onSuccess("")
+    }
+
+    fun destroy(overlaysContainer: ViewGroup) {
+        overlayRegistry.values.forEach { overlay -> destroyOverlay(overlaysContainer, overlay) }
+    }
+
+    fun size() = overlayRegistry.size
+
+    fun findControllerById(id: String?): ViewController<*>? {
+        return overlayRegistry[id]
+    }
+
+    private fun destroyOverlay(overlaysContainer: ViewGroup, overlay: ViewController<*>) {
+        overlay.destroy()
+        overlayRegistry.remove(overlay.id)
+        if (isEmpty) overlaysContainer.visibility = View.GONE
+    }
+
+    private val isEmpty: Boolean
+        get() = size() == 0
+
+    fun onHostPause() {
+        overlayRegistry.values.forEach(ViewController<*>::onViewDisappear)
+    }
+
+    fun onHostResume() {
+        overlayRegistry.values.forEach(ViewController<*>::onViewDidAppear)
+    }
+}
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackPresenter.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackPresenter.java
index 3c02feb56b4..ecd6dd4cebc 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackPresenter.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackPresenter.java
@@ -266,6 +266,18 @@ private void applyStatusBarDrawBehindOptions(TopBarOptions topBarOptions, Option
         }
     }
 
+    private void mergeStatusBarDrawBehindOptions(TopBarOptions topBarOptions, Options toMerge) {
+      if(toMerge.statusBar.drawBehind.hasValue()){
+          if(toMerge.statusBar.visible.isTrueOrUndefined() && toMerge.statusBar.drawBehind.isTrue()){
+              topBar.setTopPadding(StatusBarUtils.getStatusBarHeight(activity));
+              topBar.setHeight(topBarOptions.height.get(UiUtils.getTopBarHeightDp(activity)) + StatusBarUtils.getStatusBarHeightDp(activity));
+          } else {
+              topBar.setTopPadding(0);
+              topBar.setHeight(topBarOptions.height.get(UiUtils.getTopBarHeightDp(activity)));
+          }
+      }
+    }
+
     @Nullable
     private View findBackgroundComponent(ComponentOptions component) {
         for (TopBarBackgroundViewController controller : backgroundControllers.values()) {
@@ -504,7 +516,7 @@ private void mergeTopBarOptions(TopBarOptions resolveOptions, Options options, S
         if (topBarOptions.topMargin.hasValue() && topBar.getLayoutParams() instanceof MarginLayoutParams) {
             ((MarginLayoutParams) topBar.getLayoutParams()).topMargin = UiUtils.dpToPx(activity, topBarOptions.topMargin.get());
         }
-        applyStatusBarDrawBehindOptions(resolveOptions,options);
+        mergeStatusBarDrawBehindOptions(resolveOptions,options);
         if (topBarOptions.title.height.hasValue()) topBar.setTitleHeight(topBarOptions.title.height.get());
         if (topBarOptions.title.topMargin.hasValue()) topBar.setTitleTopMargin(topBarOptions.title.topMargin.get());
         if (topBarOptions.animateLeftButtons.hasValue())
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/Presenter.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/Presenter.java
index fbc0412d787..9feab908f3e 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/Presenter.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/Presenter.java
@@ -136,15 +136,18 @@ private void setTextColorScheme(StatusBarOptions statusBar) {
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) return;
 
         final View view = activity.getWindow().getDecorView();
+        //View.post is a Workaround, added to solve internal Samsung 
+        //Android 9 issues. For more info see https://github.com/wix/react-native-navigation/pull/7231
+        view.post(()->{
+            int flags = view.getSystemUiVisibility();
+            if (isDarkTextColorScheme(statusBar)) {
+                flags |= View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
+            } else {
+                flags &= ~View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
+            }
 
-        int flags = view.getSystemUiVisibility();
-        if (isDarkTextColorScheme(statusBar)) {
-            flags |= View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
-        } else {
-            flags &= ~View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
-        }
-        
-        view.setSystemUiVisibility(flags);
+            view.setSystemUiVisibility(flags);
+        });
     }
 
     private void mergeStatusBarOptions(View view, StatusBarOptions statusBar) {
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactButtonView.java b/lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactButtonView.java
index 6a7dd69706f..de9a6951a0a 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactButtonView.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactButtonView.java
@@ -2,6 +2,7 @@
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.view.View;
 
 import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.options.ComponentOptions;
@@ -24,7 +25,14 @@ public TitleBarReactButtonView(Context context, ReactInstanceManager reactInstan
 
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
-        super.onMeasure(createSpec(widthMeasureSpec, component.width), createSpec(widthMeasureSpec, component.height));
+        
+        //This is a workaround, ReactNative throws exception when views have ids, On android MenuItems 
+        // With ActionViews like this got an id, see #7253
+        if (!this.isAttachedToWindow() || this.getReactInstanceManager() == null) {
+            this.setId(View.NO_ID);
+        }
+
+        super.onMeasure(createSpec(widthMeasureSpec, component.width), createSpec(heightMeasureSpec, component.height));
     }
 
     private int createSpec(int measureSpec, Number dimension) {
diff --git a/lib/android/app/src/reactNative63/java/com/reactnativenavigation/options/parsers/ColorParser.java b/lib/android/app/src/reactNative63/java/com/reactnativenavigation/options/parsers/ColorParser.java
deleted file mode 100644
index cf059ed2ba2..00000000000
--- a/lib/android/app/src/reactNative63/java/com/reactnativenavigation/options/parsers/ColorParser.java
+++ /dev/null
@@ -1,32 +0,0 @@
-package com.reactnativenavigation.options.parsers;
-
-import android.content.Context;
-
-import com.facebook.react.bridge.ColorPropConverter;
-import com.reactnativenavigation.options.params.Colour;
-import com.reactnativenavigation.options.params.DontApplyColour;
-import com.reactnativenavigation.options.params.NullColor;
-
-import org.json.JSONObject;
-
-public class ColorParser {
-    public static Colour parse(Context context, JSONObject json, String colorName) {
-        if (json.has(colorName)) {
-            Object color = json.opt(colorName);
-            if (color == null) {
-                return new DontApplyColour();
-            } else if (color instanceof Integer) {
-                return new Colour(json.optInt(colorName));
-            }
-            if (color.equals("NoColor")) {
-                return new DontApplyColour();
-            }
-            Object convertedColor = JSONParser.convert(json.optJSONObject(colorName));
-            Integer processedColor = ColorPropConverter.getColor(convertedColor, context);
-            if (processedColor != null) {
-                return new Colour(processedColor);
-            }
-        }
-        return new NullColor();
-    }
-}
diff --git a/lib/android/app/src/reactNative63/java/com/reactnativenavigation/options/parsers/ColorParser.kt b/lib/android/app/src/reactNative63/java/com/reactnativenavigation/options/parsers/ColorParser.kt
new file mode 100644
index 00000000000..857af348911
--- /dev/null
+++ b/lib/android/app/src/reactNative63/java/com/reactnativenavigation/options/parsers/ColorParser.kt
@@ -0,0 +1,38 @@
+package com.reactnativenavigation.options.parsers
+
+import android.content.Context
+import com.facebook.react.bridge.ColorPropConverter
+import com.reactnativenavigation.options.params.Colour
+import com.reactnativenavigation.options.params.DontApplyColour
+import com.reactnativenavigation.options.params.NullColor
+import com.reactnativenavigation.options.params.ReactPlatformColor
+import org.json.JSONObject
+
+object ColorParser {
+    private const val KEY_RESOURCE_PATHS = "resource_paths"
+    private const val VAL_NO_COLOR = "NoColor"
+
+    @JvmStatic
+    fun parse(context: Context?, json: JSONObject, colorName: String?): Colour {
+        if (json.has(KEY_RESOURCE_PATHS)) {
+            return ReactPlatformColor(JSONParser.convert(json))
+        }
+        return when (val color = json.opt(colorName)) {
+            null, VAL_NO_COLOR -> {
+                DontApplyColour()
+            }
+            is Int -> {
+                Colour(json.optInt(colorName))
+            }
+            is JSONObject -> {
+                ColorPropConverter.getColor(color, context)?.let {
+                    Colour(it)
+                } ?: NullColor()
+            }
+            else -> {
+                NullColor()
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/BaseTest.java b/lib/android/app/src/test/java/com/reactnativenavigation/BaseTest.java
index 8f40592464d..50b30e922ce 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/BaseTest.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/BaseTest.java
@@ -5,6 +5,7 @@
 import android.content.res.AssetManager;
 import android.content.res.Configuration;
 import android.content.res.Resources;
+import android.graphics.Color;
 import android.os.Handler;
 import android.os.Looper;
 import android.util.DisplayMetrics;
@@ -20,6 +21,7 @@
 import org.junit.After;
 import org.junit.Before;
 import org.junit.runner.RunWith;
+import org.mockito.ArgumentMatchers;
 import org.mockito.MockedStatic;
 import org.mockito.Mockito;
 import org.robolectric.Robolectric;
@@ -58,6 +60,8 @@ public void beforeEach() {
         mockConfiguration.uiMode = Configuration.UI_MODE_NIGHT_NO;
         when(res.getConfiguration()).thenReturn(mockConfiguration);
         when(NavigationApplication.instance.getResources()).thenReturn(res);
+        when(res.getColor(ArgumentMatchers.anyInt())).thenReturn(0x00000);
+        when(res.getColor(ArgumentMatchers.anyInt(),any())).thenReturn(0x00000);
     }
 
     public void mockStatusBarUtils(int statusBarHeight,int statusBarHeightDp, Functions.Func block) {
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/options/parsers/ColorParseTest.java b/lib/android/app/src/test/java/com/reactnativenavigation/options/parsers/ColorParseTest.java
index 74f99c8673a..136fcf8cc5c 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/options/parsers/ColorParseTest.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/options/parsers/ColorParseTest.java
@@ -1,20 +1,53 @@
 package com.reactnativenavigation.options.parsers;
 
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.JavaOnlyArray;
+import com.facebook.react.bridge.JavaOnlyMap;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.options.params.DontApplyColour;
+import com.reactnativenavigation.options.params.ReactPlatformColor;
+import com.reactnativenavigation.utils.StatusBarUtils;
 
+import org.json.JSONArray;
 import org.json.JSONException;
 import org.json.JSONObject;
 import org.junit.Test;
+import org.mockito.MockedStatic;
+import org.mockito.Mockito;
 
 import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.ArgumentMatchers.any;
+
+import android.app.Activity;
 
 public class ColorParseTest extends BaseTest {
 
+    Activity activity;
+    @Override
+    public void beforeEach() {
+        super.beforeEach();
+        activity = newActivity();
+    }
+
     @Test
     public void nullIsParsedAsNoColor() throws JSONException {
         JSONObject json = new JSONObject();
         json.put("color", "NoColor");
         assertThat(ColorParser.parse(null, json, "color")).isInstanceOf(DontApplyColour.class);
     }
+
+    @Test
+    public void shouldParsePlatformColors() throws JSONException {
+        JSONObject json = new JSONObject();
+        JSONObject color = new JSONObject();
+        final JSONArray jsonArray = new JSONArray();
+        jsonArray.put("@color/colorPrimary");
+        color.put("resource_paths",
+                jsonArray);
+        try (MockedStatic<Arguments> theMock = Mockito.mockStatic(Arguments.class)) {
+            theMock.when(Arguments::createMap).thenReturn(new JavaOnlyMap());
+            theMock.when(Arguments::createArray).thenReturn(new JavaOnlyArray());
+            assertThat(ColorParser.parse(activity, color, "color")).isInstanceOf(ReactPlatformColor.class);
+        }
+    }
 }
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/navigator/NavigatorTest.java b/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/navigator/NavigatorTest.java
index 70830cc51e0..b0fac8c78f8 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/navigator/NavigatorTest.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/navigator/NavigatorTest.java
@@ -15,6 +15,8 @@
 import com.reactnativenavigation.mocks.SimpleComponentViewController;
 import com.reactnativenavigation.mocks.SimpleViewController;
 import com.reactnativenavigation.mocks.TypefaceLoaderMock;
+import com.reactnativenavigation.options.ModalOptions;
+import com.reactnativenavigation.options.ModalPresentationStyle;
 import com.reactnativenavigation.options.Options;
 import com.reactnativenavigation.options.params.Bool;
 import com.reactnativenavigation.options.params.Text;
@@ -55,6 +57,7 @@
 import static org.junit.Assert.assertTrue;
 import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.Mockito.never;
 import static org.mockito.Mockito.spy;
 import static org.mockito.Mockito.times;
 import static org.mockito.Mockito.verify;
@@ -181,7 +184,126 @@ public void shouldCallOnViewDidAppearWhenHostResumes() {
         SimpleViewController child1 = spy(this.child1);
         uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
         uut.onHostResume();
-        verify(child1,times(2)).onViewDidAppear();
+        verify(child1, times(2)).onViewDidAppear();
+    }
+
+    @Test
+    public void shouldCallOverlaysOnHostResumeWhenHostResumes() {
+        SimpleViewController child1 = spy(this.child1);
+        uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
+        uut.onHostResume();
+        verify(overlayManager).onHostResume();
+    }
+
+    @Test
+    public void shouldCallOverlaysChildrenOnViewDidAppearOnHostResume() {
+        SimpleViewController child1 = spy(this.child1);
+        ViewController child2 = spy(this.child2);
+        ViewController child3 = spy(this.child3);
+
+        uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
+        uut.showOverlay(child2, new CommandListenerAdapter());
+        uut.showOverlay(child3, new CommandListenerAdapter());
+        verify(child1, times(1)).onViewDidAppear();
+
+        uut.onHostResume();
+
+        verify(overlayManager).onHostResume();
+        verify(child1, times(2)).onViewDidAppear();
+        verify(child2).onViewDidAppear();
+        verify(child3).onViewDidAppear();
+    }
+
+    @Test
+    public void shouldCallRootOnViewDidAppearWhenModalDisplayedOverContext(){
+        SimpleViewController child1 = spy(this.child1);
+        final Options overContextOptions = tabOptions.copy();
+        overContextOptions.modal =new ModalOptions();
+        overContextOptions.modal.presentationStyle = ModalPresentationStyle.OverCurrentContext;
+        ViewController overContextModal = spy(new SimpleViewController(activity, childRegistry, "overContextModal",
+                overContextOptions));
+        uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
+        uut.showModal(overContextModal, new CommandListenerAdapter());
+        uut.onHostResume();
+
+        verify(child1, times(2)).onViewDidAppear();
+        verify(overContextModal, times(1)).onViewDidAppear();
+    }
+
+    @Test
+    public void shouldCallRootOnViewDisappearWhenModalDisplayedOverContext(){
+        SimpleViewController child1 = spy(this.child1);
+        final Options overContextOptions = tabOptions.copy();
+        overContextOptions.modal =new ModalOptions();
+        overContextOptions.modal.presentationStyle = ModalPresentationStyle.OverCurrentContext;
+        ViewController overContextModal = spy(new SimpleViewController(activity, childRegistry, "overContextModal",
+                overContextOptions));
+        uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
+        uut.showModal(overContextModal, new CommandListenerAdapter());
+        uut.onHostPause();
+
+        verify(child1, times(1)).onViewDisappear();
+        verify(overContextModal, times(1)).onViewDisappear();
+    }
+
+    @Test
+    public void shouldCallModalOnViewDisappearWhenModalDisplayedOverContextUnderneath(){
+        SimpleViewController child1 = spy(this.child1);
+        ViewController child2 = spy(this.child2);
+        final Options overContextOptions = tabOptions.copy();
+        overContextOptions.modal =new ModalOptions();
+        overContextOptions.modal.presentationStyle = ModalPresentationStyle.OverCurrentContext;
+        ViewController overContextModal = spy(new SimpleViewController(activity, childRegistry, "overContextModal",
+                overContextOptions));
+        uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
+        uut.showModal(overContextModal, new CommandListenerAdapter());
+        uut.showModal(child2, new CommandListenerAdapter());
+        uut.onHostPause();
+
+        verify(child2, times(1)).onViewDisappear();
+        verify(overContextModal, never()).onViewDisappear();
+    }
+    @Test
+    public void shouldCallOverlaysAndModalsChildrenOnViewDidAppearOnHostResume() {
+        SimpleViewController child1 = spy(this.child1);
+        ViewController child2 = spy(this.child2);
+        ViewController child3 = spy(this.child3);
+        ViewController child4 = spy(this.child4);
+
+        uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
+        uut.showModal(child2, new CommandListenerAdapter());
+        uut.showOverlay(child3, new CommandListenerAdapter());
+        uut.showOverlay(child4, new CommandListenerAdapter());
+        verify(child1, times(1)).onViewDidAppear();
+
+        uut.onHostResume();
+
+        verify(overlayManager).onHostResume();
+        verify(child1, times(1)).onViewDidAppear();
+        verify(child2).onViewDidAppear();
+        verify(child3).onViewDidAppear();
+        verify(child4).onViewDidAppear();
+    }
+
+    @Test
+    public void shouldNotCallModalOnHostResumeWhenHostResumesAndNoModals() {
+        SimpleViewController child1 = spy(this.child1);
+        uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
+        uut.onHostResume();
+        verify(modalStack, never()).onHostResume();
+    }
+
+    @Test
+    public void shouldCallModalPeekDidAppearWhenHostResumes() {
+        SimpleViewController child1 = spy(this.child1);
+        ViewController child2 = spy(this.child2);
+        uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
+        uut.showModal(child2, new CommandListenerAdapter());
+        uut.onHostResume();
+
+        verify(modalStack).onHostResume();
+        verify(child2).onViewDidAppear();
+        verify(child1, times(1)).onViewDidAppear();
     }
 
     @Test
@@ -192,6 +314,27 @@ public void shouldCallOnViewDisappearWhenHostPauses() {
         verify(child1).onViewDidAppear();
     }
 
+    @Test
+    public void shouldNotCallModalOnHostPauseWhenHostPausesAndNoModals() {
+        SimpleViewController child1 = spy(this.child1);
+        uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
+        uut.onHostPause();
+        verify(modalStack, never()).onHostPause();
+    }
+
+    @Test
+    public void shouldCallModalPeekDidDisappearWhenHostPauses() {
+        SimpleViewController child1 = spy(this.child1);
+        ViewController child2 = spy(this.child2);
+        uut.setRoot(child1, new CommandListenerAdapter(), reactInstanceManager);
+        uut.showModal(child2, new CommandListenerAdapter());
+        uut.onHostPause();
+
+        verify(modalStack).onHostPause();
+        verify(child2).onViewDisappear();
+    }
+
+
     @Test
     public void setDefaultOptions() {
         uut.setDefaultOptions(new Options());
diff --git a/lib/ios/RNNAnimationsOptions.h b/lib/ios/RNNAnimationsOptions.h
index 5c88399b54a..55865f1e44a 100644
--- a/lib/ios/RNNAnimationsOptions.h
+++ b/lib/ios/RNNAnimationsOptions.h
@@ -1,7 +1,6 @@
 #import "RNNOptions.h"
 #import "RNNScreenTransition.h"
 #import "TransitionOptions.h"
-#import "ViewAnimationOptions.h"
 
 @interface RNNAnimationsOptions : RNNOptions
 
diff --git a/lib/ios/RNNComponentPresenter.m b/lib/ios/RNNComponentPresenter.m
index f267ab17115..fc5c18fb7df 100644
--- a/lib/ios/RNNComponentPresenter.m
+++ b/lib/ios/RNNComponentPresenter.m
@@ -83,6 +83,8 @@ - (void)applyOptions:(RNNNavigationOptions *)options {
                                  backgroundColor:[options.topBar.searchBar.backgroundColor
                                                      withDefault:nil]
                                        tintColor:[options.topBar.searchBar.tintColor
+                                                     withDefault:nil]
+                                      cancelText:[withDefault.topBar.searchBar.cancelText
                                                      withDefault:nil]];
     }
 
@@ -145,6 +147,8 @@ - (void)mergeOptions:(RNNNavigationOptions *)mergeOptions
                                  backgroundColor:[mergeOptions.topBar.searchBar.backgroundColor
                                                      withDefault:nil]
                                        tintColor:[mergeOptions.topBar.searchBar.tintColor
+                                                     withDefault:nil]
+                                      cancelText:[withDefault.topBar.searchBar.cancelText
                                                      withDefault:nil]];
     } else {
         [viewController setSearchBarVisible:NO];
diff --git a/lib/ios/RNNEnterExitAnimation.h b/lib/ios/RNNEnterExitAnimation.h
index 4f4dac3c7db..f4d9676df20 100644
--- a/lib/ios/RNNEnterExitAnimation.h
+++ b/lib/ios/RNNEnterExitAnimation.h
@@ -1,8 +1,12 @@
+#import "RNNEnterExitAnimation.h"
+#import "SharedElementTransitionOptions.h"
 #import "TransitionOptions.h"
 #import <Foundation/Foundation.h>
 
 @interface RNNEnterExitAnimation : RNNOptions
 
+@property(nonatomic, strong) NSArray<ElementTransitionOptions *> *elementTransitions;
+@property(nonatomic, strong) NSArray<SharedElementTransitionOptions *> *sharedElementTransitions;
 @property(nonatomic, strong) TransitionOptions *enter;
 @property(nonatomic, strong) TransitionOptions *exit;
 
diff --git a/lib/ios/RNNEnterExitAnimation.m b/lib/ios/RNNEnterExitAnimation.m
index 5da7c59e29a..e1e6521362c 100644
--- a/lib/ios/RNNEnterExitAnimation.m
+++ b/lib/ios/RNNEnterExitAnimation.m
@@ -1,4 +1,5 @@
 #import "RNNEnterExitAnimation.h"
+#import "OptionsArrayParser.h"
 
 @implementation RNNEnterExitAnimation
 
@@ -7,7 +8,12 @@ - (instancetype)initWithDict:(NSDictionary *)dict {
 
     self.enter = [[TransitionOptions alloc] initWithDict:dict[@"enter"]];
     self.exit = [[TransitionOptions alloc] initWithDict:dict[@"exit"]];
-
+    self.sharedElementTransitions = [OptionsArrayParser parse:dict
+                                                          key:@"sharedElementTransitions"
+                                                      ofClass:SharedElementTransitionOptions.class];
+    self.elementTransitions = [OptionsArrayParser parse:dict
+                                                    key:@"elementTransitions"
+                                                ofClass:ElementTransitionOptions.class];
     return self;
 }
 
@@ -16,10 +22,15 @@ - (void)mergeOptions:(RNNEnterExitAnimation *)options {
         self.enter = options.enter;
     if (options.exit.hasValue)
         self.exit = options.exit;
+    if (options.sharedElementTransitions)
+        self.sharedElementTransitions = options.sharedElementTransitions;
+    if (options.elementTransitions)
+        self.elementTransitions = options.elementTransitions;
 }
 
 - (BOOL)hasAnimation {
-    return self.enter.hasAnimation || self.exit.hasAnimation;
+    return self.enter.hasAnimation || self.exit.hasAnimation || self.elementTransitions ||
+           self.sharedElementTransitions;
 }
 
 - (NSTimeInterval)maxDuration {
@@ -29,6 +40,18 @@ - (NSTimeInterval)maxDuration {
     if (self.exit.maxDuration > maxDuration)
         maxDuration = self.exit.maxDuration;
 
+    for (ElementTransitionOptions *elementTransition in self.elementTransitions) {
+        if (elementTransition.maxDuration > maxDuration) {
+            maxDuration = elementTransition.maxDuration;
+        }
+    }
+
+    for (SharedElementTransitionOptions *sharedElementTransition in self.sharedElementTransitions) {
+        if (sharedElementTransition.maxDuration > maxDuration) {
+            maxDuration = sharedElementTransition.maxDuration;
+        }
+    }
+
     return maxDuration;
 }
 
diff --git a/lib/ios/RNNModalManager.m b/lib/ios/RNNModalManager.m
index c6f41d6e967..c50ef61983d 100644
--- a/lib/ios/RNNModalManager.m
+++ b/lib/ios/RNNModalManager.m
@@ -4,7 +4,6 @@
 #import "ScreenAnimationController.h"
 #import "ScreenReversedAnimationController.h"
 #import "UIViewController+LayoutProtocol.h"
-#import "ViewAnimationOptions.h"
 
 @interface RNNModalManager ()
 @property(nonatomic, strong) ScreenAnimationController *showModalTransitionDelegate;
@@ -73,13 +72,13 @@ - (void)showModal:(UIViewController<RNNLayoutProtocol> *)viewController
     }
 
     if (viewController.resolveOptionsWithDefault.animations.showModal.hasAnimation) {
-        ViewAnimationOptions *viewAnimationOptions =
+        RNNEnterExitAnimation *enterExitAnimationOptions =
             viewController.resolveOptionsWithDefault.animations.showModal;
         _showModalTransitionDelegate = [[ScreenAnimationController alloc]
-            initWithContentTransition:viewAnimationOptions
-                   elementTransitions:viewAnimationOptions.elementTransitions
-             sharedElementTransitions:viewAnimationOptions.sharedElementTransitions
-                             duration:viewAnimationOptions.maxDuration
+            initWithContentTransition:enterExitAnimationOptions
+                   elementTransitions:enterExitAnimationOptions.elementTransitions
+             sharedElementTransitions:enterExitAnimationOptions.sharedElementTransitions
+                             duration:enterExitAnimationOptions.maxDuration
                                bridge:_bridge];
 
         viewController.transitioningDelegate = _showModalTransitionDelegate;
@@ -108,7 +107,7 @@ - (void)dismissModal:(UIViewController *)viewController
 - (void)dismissAllModalsAnimated:(BOOL)animated completion:(void (^__nullable)(void))completion {
     UIViewController *root = [self rootViewController];
     if (root.presentedViewController) {
-        ViewAnimationOptions *dismissModalOptions =
+        RNNEnterExitAnimation *dismissModalOptions =
             root.presentedViewController.resolveOptionsWithDefault.animations.dismissModal;
         if (dismissModalOptions.hasAnimation) {
             _dismissModalTransitionDelegate = [[ScreenAnimationController alloc]
@@ -158,13 +157,13 @@ - (void)removePendingNextModalIfOnTop:(RNNTransitionCompletionBlock)completion
     UIViewController *topPresentedVC = [self topPresentedVC];
 
     if (optionsWithDefault.animations.dismissModal.hasAnimation) {
-        ViewAnimationOptions *viewAnimationOptions =
+        RNNEnterExitAnimation *enterExitAnimationOptions =
             modalToDismiss.resolveOptionsWithDefault.animations.dismissModal;
         _dismissModalTransitionDelegate = [[ScreenReversedAnimationController alloc]
-            initWithContentTransition:viewAnimationOptions
-                   elementTransitions:viewAnimationOptions.elementTransitions
-             sharedElementTransitions:viewAnimationOptions.sharedElementTransitions
-                             duration:viewAnimationOptions.maxDuration
+            initWithContentTransition:enterExitAnimationOptions
+                   elementTransitions:enterExitAnimationOptions.elementTransitions
+             sharedElementTransitions:enterExitAnimationOptions.sharedElementTransitions
+                             duration:enterExitAnimationOptions.maxDuration
                                bridge:_bridge];
 
         [self topViewControllerParent:modalToDismiss].transitioningDelegate =
diff --git a/lib/ios/RNNSearchBarOptions.h b/lib/ios/RNNSearchBarOptions.h
index bee30e91482..c571ced0570 100644
--- a/lib/ios/RNNSearchBarOptions.h
+++ b/lib/ios/RNNSearchBarOptions.h
@@ -10,5 +10,6 @@
 @property(nonatomic, strong) Color *backgroundColor;
 @property(nonatomic, strong) Color *tintColor;
 @property(nonatomic, strong) Text *placeholder;
+@property(nonatomic, strong) Text *cancelText;
 
 @end
diff --git a/lib/ios/RNNSearchBarOptions.m b/lib/ios/RNNSearchBarOptions.m
index 549db10fb0b..7eb32295bb7 100644
--- a/lib/ios/RNNSearchBarOptions.m
+++ b/lib/ios/RNNSearchBarOptions.m
@@ -13,6 +13,7 @@ - (instancetype)initWithDict:(NSDictionary *)dict {
     self.backgroundColor = [ColorParser parse:dict key:@"backgroundColor"];
     self.tintColor = [ColorParser parse:dict key:@"tintColor"];
     self.placeholder = [TextParser parse:dict key:@"placeholder"];
+    self.cancelText = [TextParser parse:dict key:@"cancelText"];
     return self;
 }
 
@@ -33,6 +34,8 @@ - (void)mergeOptions:(RNNSearchBarOptions *)options {
         self.tintColor = options.tintColor;
     if (options.placeholder.hasValue)
         self.placeholder = options.placeholder;
+    if (options.cancelText.hasValue)
+        self.cancelText = options.cancelText;
 }
 
 @end
diff --git a/lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj b/lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj
index c95bafab7fd..cddd07d5308 100644
--- a/lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj
+++ b/lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj
@@ -309,8 +309,6 @@
 		50AD1CE123CB428400FF3134 /* TransitionOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50AD1CDF23CB428400FF3134 /* TransitionOptions.m */; };
 		50AD288823CDB71C00FF3134 /* ElementHorizontalTransition.h in Headers */ = {isa = PBXBuildFile; fileRef = 50AD288623CDB71C00FF3134 /* ElementHorizontalTransition.h */; };
 		50AD288923CDB71C00FF3134 /* ElementHorizontalTransition.m in Sources */ = {isa = PBXBuildFile; fileRef = 50AD288723CDB71C00FF3134 /* ElementHorizontalTransition.m */; };
-		50B92C26253DDC6D0056FC26 /* ViewAnimationOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50B92C24253DDC6D0056FC26 /* ViewAnimationOptions.h */; };
-		50B92C27253DDC6D0056FC26 /* ViewAnimationOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50B92C25253DDC6D0056FC26 /* ViewAnimationOptions.m */; };
 		50BAFE4B2399405800798674 /* RNNExternalViewController.h in Headers */ = {isa = PBXBuildFile; fileRef = 50BAFE492399405800798674 /* RNNExternalViewController.h */; };
 		50BAFE4C2399405800798674 /* RNNExternalViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 50BAFE4A2399405800798674 /* RNNExternalViewController.m */; };
 		50BCB27123F1650800D6C8E5 /* SharedElementTransition.h in Headers */ = {isa = PBXBuildFile; fileRef = 50BCB26F23F1650800D6C8E5 /* SharedElementTransition.h */; };
@@ -843,8 +841,6 @@
 		50AD1CDF23CB428400FF3134 /* TransitionOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = TransitionOptions.m; sourceTree = "<group>"; };
 		50AD288623CDB71C00FF3134 /* ElementHorizontalTransition.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = ElementHorizontalTransition.h; sourceTree = "<group>"; };
 		50AD288723CDB71C00FF3134 /* ElementHorizontalTransition.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ElementHorizontalTransition.m; sourceTree = "<group>"; };
-		50B92C24253DDC6D0056FC26 /* ViewAnimationOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = ViewAnimationOptions.h; sourceTree = "<group>"; };
-		50B92C25253DDC6D0056FC26 /* ViewAnimationOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ViewAnimationOptions.m; sourceTree = "<group>"; };
 		50BAFE492399405800798674 /* RNNExternalViewController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNExternalViewController.h; sourceTree = "<group>"; };
 		50BAFE4A2399405800798674 /* RNNExternalViewController.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNExternalViewController.m; sourceTree = "<group>"; };
 		50BCB26F23F1650800D6C8E5 /* SharedElementTransition.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = SharedElementTransition.h; sourceTree = "<group>"; };
@@ -1400,8 +1396,6 @@
 			children = (
 				B8B2BB6324FFCC9500FC6575 /* CornerRadiusTransition.h */,
 				B8B2BB6424FFCC9500FC6575 /* CornerRadiusTransition.m */,
-				50B92C24253DDC6D0056FC26 /* ViewAnimationOptions.h */,
-				50B92C25253DDC6D0056FC26 /* ViewAnimationOptions.m */,
 				50F72E532607468C0096758A /* PathTransition.h */,
 				50F72E542607468C0096758A /* PathTransition.m */,
 				506BF65A2600AE4200A22755 /* CenterTransition.h */,
@@ -2032,7 +2026,6 @@
 				5038A3B1216DF41B009280BC /* UIViewController+RNNOptions.h in Headers */,
 				5049595A216F6B46006D2B81 /* NullDictionary.h in Headers */,
 				50BCB27123F1650800D6C8E5 /* SharedElementTransition.h in Headers */,
-				50B92C26253DDC6D0056FC26 /* ViewAnimationOptions.h in Headers */,
 				50BCB27D23F2A1EE00D6C8E5 /* FloatTransition.h in Headers */,
 				501224062173592D000F5F98 /* RNNBottomTabsPresenter.h in Headers */,
 				5017D9F2239D2FCB00B74047 /* BottomTabsOnSwitchToTabAttacher.h in Headers */,
@@ -2395,7 +2388,6 @@
 				5049593A216E5750006D2B81 /* Bool.m in Sources */,
 				50F5DFC61F407AA0001A00BC /* RNNStackController.m in Sources */,
 				21B85E5D1F44480200B314B5 /* RNNButtonsPresenter.m in Sources */,
-				50B92C27253DDC6D0056FC26 /* ViewAnimationOptions.m in Sources */,
 				E8E518371F83B94A000467AC /* RNNViewLocation.m in Sources */,
 				E3458D3E20BD9CE40023149B /* RNNPreviewOptions.m in Sources */,
 				5012242B217372B3000F5F98 /* ImageParser.m in Sources */,
diff --git a/lib/ios/TopBarAppearancePresenter.m b/lib/ios/TopBarAppearancePresenter.m
index f16559c7082..91474e44c1a 100644
--- a/lib/ios/TopBarAppearancePresenter.m
+++ b/lib/ios/TopBarAppearancePresenter.m
@@ -131,6 +131,7 @@ - (void)updateScrollEdgeBorder {
 
 - (void)setBackIndicatorImage:(UIImage *)image withColor:(UIColor *)color {
     [self.getAppearance setBackIndicatorImage:image transitionMaskImage:image];
+    [self.getScrollEdgeAppearance setBackIndicatorImage:image transitionMaskImage:image];
 }
 
 - (void)setTitleAttributes:(RNNTitleOptions *)titleOptions {
diff --git a/lib/ios/UIViewController+RNNOptions.h b/lib/ios/UIViewController+RNNOptions.h
index 0d8720d3ed0..490a3fda89e 100644
--- a/lib/ios/UIViewController+RNNOptions.h
+++ b/lib/ios/UIViewController+RNNOptions.h
@@ -14,7 +14,8 @@
                             hideOnScroll:(BOOL)searchBarHiddenWhenScrolling
     obscuresBackgroundDuringPresentation:(BOOL)obscuresBackgroundDuringPresentation
                          backgroundColor:(nullable UIColor *)backgroundColor
-                               tintColor:(nullable UIColor *)tintColor;
+                               tintColor:(nullable UIColor *)tintColor
+                              cancelText:(NSString *_Nullable)cancelText;
 
 - (void)setSearchBarHiddenWhenScrolling:(BOOL)searchBarHidden;
 
diff --git a/lib/ios/UIViewController+RNNOptions.m b/lib/ios/UIViewController+RNNOptions.m
index ee09cb5a56c..fc670ad4339 100644
--- a/lib/ios/UIViewController+RNNOptions.m
+++ b/lib/ios/UIViewController+RNNOptions.m
@@ -29,7 +29,8 @@ - (void)setSearchBarWithOptions:(NSString *)placeholder
                             hideOnScroll:(BOOL)hideOnScroll
     obscuresBackgroundDuringPresentation:(BOOL)obscuresBackgroundDuringPresentation
                          backgroundColor:(nullable UIColor *)backgroundColor
-                               tintColor:(nullable UIColor *)tintColor {
+                               tintColor:(nullable UIColor *)tintColor
+                              cancelText:(NSString *)cancelText {
     if (!self.navigationItem.searchController) {
         UISearchController *search =
             [[UISearchController alloc] initWithSearchResultsController:nil];
@@ -41,6 +42,9 @@ - (void)setSearchBarWithOptions:(NSString *)placeholder
         if (placeholder) {
             search.searchBar.placeholder = placeholder;
         }
+        if (cancelText) {
+            [search.searchBar setValue:cancelText forKey:@"cancelButtonText"];
+        }
         search.hidesNavigationBarDuringPresentation = hideTopBarOnFocus;
         search.searchBar.searchBarStyle = UISearchBarStyleProminent;
         search.searchBar.tintColor = tintColor;
diff --git a/lib/ios/ViewAnimationOptions.h b/lib/ios/ViewAnimationOptions.h
deleted file mode 100644
index 0332c6ebfd6..00000000000
--- a/lib/ios/ViewAnimationOptions.h
+++ /dev/null
@@ -1,16 +0,0 @@
-#import "ElementTransitionOptions.h"
-#import "RNNEnterExitAnimation.h"
-#import "SharedElementTransitionOptions.h"
-#import "TransitionOptions.h"
-
-@interface ViewAnimationOptions : RNNEnterExitAnimation
-
-@property(nonatomic, strong) NSArray<ElementTransitionOptions *> *elementTransitions;
-@property(nonatomic, strong) NSArray<SharedElementTransitionOptions *> *sharedElementTransitions;
-@property(nonatomic, strong) Bool *waitForRender;
-
-- (BOOL)shouldWaitForRender;
-- (NSTimeInterval)maxDuration;
-- (BOOL)hasAnimation;
-
-@end
diff --git a/lib/ios/ViewAnimationOptions.m b/lib/ios/ViewAnimationOptions.m
deleted file mode 100644
index 625c1dff94f..00000000000
--- a/lib/ios/ViewAnimationOptions.m
+++ /dev/null
@@ -1,56 +0,0 @@
-#import "ViewAnimationOptions.h"
-#import "OptionsArrayParser.h"
-
-@implementation ViewAnimationOptions
-
-- (instancetype)initWithDict:(NSDictionary *)dict {
-    self = [super initWithDict:dict];
-
-    self.sharedElementTransitions = [OptionsArrayParser parse:dict
-                                                          key:@"sharedElementTransitions"
-                                                      ofClass:SharedElementTransitionOptions.class];
-    self.elementTransitions = [OptionsArrayParser parse:dict
-                                                    key:@"elementTransitions"
-                                                ofClass:ElementTransitionOptions.class];
-    self.waitForRender = [BoolParser parse:dict key:@"waitForRender"];
-
-    return self;
-}
-
-- (void)mergeOptions:(ViewAnimationOptions *)options {
-    [super mergeOptions:options];
-    if (options.sharedElementTransitions)
-        self.sharedElementTransitions = options.sharedElementTransitions;
-    if (options.elementTransitions)
-        self.elementTransitions = options.elementTransitions;
-    if (options.waitForRender.hasValue)
-        self.waitForRender = options.waitForRender;
-}
-
-- (BOOL)hasAnimation {
-    return super.hasAnimation || self.sharedElementTransitions || self.elementTransitions;
-}
-
-- (BOOL)shouldWaitForRender {
-    return [self.waitForRender withDefault:NO] || self.hasAnimation;
-}
-
-- (NSTimeInterval)maxDuration {
-    NSTimeInterval maxDuration = [super maxDuration];
-
-    for (ElementTransitionOptions *elementTransition in self.elementTransitions) {
-        if (elementTransition.maxDuration > maxDuration) {
-            maxDuration = elementTransition.maxDuration;
-        }
-    }
-
-    for (SharedElementTransitionOptions *sharedElementTransition in self.sharedElementTransitions) {
-        if (sharedElementTransition.maxDuration > maxDuration) {
-            maxDuration = sharedElementTransition.maxDuration;
-        }
-    }
-
-    return maxDuration;
-}
-
-@end
diff --git a/lib/src/Mock/index.ts b/lib/src/Mock/index.ts
index 853604d556e..30e553ea08d 100644
--- a/lib/src/Mock/index.ts
+++ b/lib/src/Mock/index.ts
@@ -1,3 +1,16 @@
 export const ApplicationMock = require('./Application').Application;
 
 export * from './constants';
+
+export function mockNativeComponents() {
+  const { NativeCommandsSender } = require('./mocks/NativeCommandsSender');
+  const { NativeEventsReceiver } = require('./mocks/NativeEventsReceiver');
+  const { AppRegistryService } = require('./mocks/AppRegistryService');
+  const { Navigation } = require('react-native-navigation');
+
+  Navigation.mockNativeComponents(
+    new NativeCommandsSender(),
+    new NativeEventsReceiver(),
+    new AppRegistryService()
+  );
+}
diff --git a/lib/src/Mock/mocks/AppRegistryService.ts b/lib/src/Mock/mocks/AppRegistryService.ts
new file mode 100644
index 00000000000..0194cdbec9e
--- /dev/null
+++ b/lib/src/Mock/mocks/AppRegistryService.ts
@@ -0,0 +1,5 @@
+import { ComponentProvider } from 'react-native';
+
+export class AppRegistryService {
+  registerComponent(_appKey: string, _getComponentFunc: ComponentProvider) {}
+}
diff --git a/lib/src/Navigation.ts b/lib/src/Navigation.ts
index fa8e80aefed..9c80cc7b478 100644
--- a/lib/src/Navigation.ts
+++ b/lib/src/Navigation.ts
@@ -48,7 +48,8 @@ export class NavigationRoot {
 
   constructor(
     private readonly nativeCommandsSender: NativeCommandsSender,
-    private readonly nativeEventsReceiver: NativeEventsReceiver
+    private readonly nativeEventsReceiver: NativeEventsReceiver,
+    private readonly appRegistryService: AppRegistryService
   ) {
     this.componentWrapper = new ComponentWrapper();
     this.store = new Store();
@@ -59,12 +60,12 @@ export class NavigationRoot {
       this.nativeEventsReceiver,
       this.store
     );
-    const appRegistryService = new AppRegistryService();
+
     this.componentRegistry = new ComponentRegistry(
       this.store,
       this.componentEventsObserver,
       this.componentWrapper,
-      appRegistryService
+      this.appRegistryService
     );
     this.layoutTreeParser = new LayoutTreeParser(this.uniqueIdProvider);
     const optionsProcessor = new OptionsProcessor(
diff --git a/lib/src/NavigationDelegate.ts b/lib/src/NavigationDelegate.ts
index 00ff027b271..90aecf18a88 100644
--- a/lib/src/NavigationDelegate.ts
+++ b/lib/src/NavigationDelegate.ts
@@ -9,21 +9,24 @@ import { OptionsProcessor as OptionProcessor } from './interfaces/Processors';
 import { NavigationRoot } from './Navigation';
 import { NativeCommandsSender } from './adapters/NativeCommandsSender';
 import { NativeEventsReceiver } from './adapters/NativeEventsReceiver';
+import { AppRegistryService } from './adapters/AppRegistryService';
 
 export class NavigationDelegate {
   private concreteNavigation: NavigationRoot;
   constructor() {
     this.concreteNavigation = this.createConcreteNavigation(
       new NativeCommandsSender(),
-      new NativeEventsReceiver()
+      new NativeEventsReceiver(),
+      new AppRegistryService()
     );
   }
 
   private createConcreteNavigation(
     nativeCommandsSender: NativeCommandsSender,
-    nativeEventsReceiver: NativeEventsReceiver
+    nativeEventsReceiver: NativeEventsReceiver,
+    appRegistryService: AppRegistryService
   ) {
-    return new NavigationRoot(nativeCommandsSender, nativeEventsReceiver);
+    return new NavigationRoot(nativeCommandsSender, nativeEventsReceiver, appRegistryService);
   }
 
   /**
@@ -223,12 +226,15 @@ export class NavigationDelegate {
     return this.concreteNavigation.TouchablePreview;
   }
 
-  public mockNativeComponents() {
-    const { NativeCommandsSender } = require('./Mock/mocks/NativeCommandsSender');
-    const { NativeEventsReceiver } = require('./Mock/mocks/NativeEventsReceiver');
+  public mockNativeComponents(
+    mockedNativeCommandsSender: NativeCommandsSender,
+    mockedNativeEventsReceiver: NativeEventsReceiver,
+    mockedAppRegistryService: AppRegistryService
+  ) {
     this.concreteNavigation = this.createConcreteNavigation(
-      new NativeCommandsSender(),
-      new NativeEventsReceiver()
+      mockedNativeCommandsSender,
+      mockedNativeEventsReceiver,
+      mockedAppRegistryService
     );
   }
 
diff --git a/lib/src/commands/OptionsProcessor.test.ts b/lib/src/commands/OptionsProcessor.test.ts
index 6c65519ca4d..daf1799ef8b 100644
--- a/lib/src/commands/OptionsProcessor.test.ts
+++ b/lib/src/commands/OptionsProcessor.test.ts
@@ -13,7 +13,7 @@ import { AssetService } from '../adapters/AssetResolver';
 import { Deprecations } from './Deprecations';
 import { CommandName } from '../interfaces/CommandName';
 import { OptionsProcessor as Processor } from '../interfaces/Processors';
-import { Platform } from 'react-native';
+import { DynamicColorIOS, Platform } from 'react-native';
 
 describe('navigation options', () => {
   let uut: OptionsProcessor;
@@ -462,6 +462,23 @@ describe('navigation options', () => {
         Platform.OS = 'android';
       });
 
+      it('PlatformColor should be passed to native as is', () => {
+        const options: Options = {
+          topBar: {
+            background: {
+              color: {
+                // @ts-ignore
+                resource_paths: ['@color/textColor'],
+              },
+            },
+          },
+        };
+        uut.processOptions(options, CommandName.SetRoot);
+        expect(options).toEqual({
+          topBar: { background: { color: { resource_paths: ['@color/textColor'] } } },
+        });
+      });
+
       it('processes color keys', () => {
         const options: Options = {
           statusBar: { backgroundColor: 'red' },
@@ -520,8 +537,8 @@ describe('navigation options', () => {
 
         uut.processOptions(options, CommandName.SetRoot);
         expect(options).toEqual({
-          statusBar: { backgroundColor: { dynamic: { light: 0xffff0000, dark: 0xffff0000 } } },
-          topBar: { background: { color: { dynamic: { light: 0xff0000ff, dark: 0xff0000ff } } } },
+          statusBar: { backgroundColor: 0xffff0000 },
+          topBar: { background: { color: 0xff0000ff } },
         });
       });
 
@@ -532,7 +549,7 @@ describe('navigation options', () => {
 
         uut.processOptions(options, CommandName.SetRoot);
         expect(options).toEqual({
-          topBar: { background: { color: { dynamic: { light: 'NoColor', dark: 'NoColor' } } } },
+          topBar: { background: { color: 'NoColor' } },
         });
       });
 
@@ -548,15 +565,37 @@ describe('navigation options', () => {
         };
         uut.processOptions(options, CommandName.SetRoot);
         expect(options).toEqual({
-          statusBar: { backgroundColor: { dynamic: { light: 0xffff0000, dark: 0xffff0000 } } },
+          statusBar: { backgroundColor: 0xffff0000 },
           topBar: {
             background: { color: { dynamic: { light: 0xff0000ff, dark: 0xffff0000 } } },
             title: {
-              color: { dynamic: { light: null, dark: null } },
+              color: undefined,
             },
           },
         });
       });
+
+      it('supports DynamicColorIOS', () => {
+        const options: Options = {
+          topBar: { background: { color: DynamicColorIOS({ light: 'red', dark: 'blue' }) } },
+        };
+
+        uut.processOptions(options, CommandName.SetRoot);
+        expect(options).toEqual({
+          topBar: { background: { color: { dynamic: { light: 0xffff0000, dark: 0xff0000ff } } } },
+        });
+      });
+
+      it('should not process undefined value', () => {
+        const options: Options = {
+          topBar: { background: { color: undefined } },
+        };
+
+        uut.processOptions(options, CommandName.SetRoot);
+        expect(options).toEqual({
+          topBar: { background: { color: undefined } },
+        });
+      });
     });
   });
 
@@ -720,8 +759,8 @@ describe('navigation options', () => {
           hideOnScroll: false,
           hideTopBarOnFocus: false,
           obscuresBackgroundDuringPresentation: false,
-          backgroundColor: { dynamic: { light: null, dark: null } },
-          tintColor: { dynamic: { light: null, dark: null } },
+          backgroundColor: undefined,
+          tintColor: undefined,
           placeholder: '',
         });
       });
@@ -743,8 +782,8 @@ describe('navigation options', () => {
           hideOnScroll: true,
           hideTopBarOnFocus: true,
           obscuresBackgroundDuringPresentation: false,
-          backgroundColor: { dynamic: { dark: 0xffff0000, light: 0xffff0000 } },
-          tintColor: { dynamic: { dark: 0xff00ff00, light: 0xff00ff00 } },
+          backgroundColor: 0xffff0000,
+          tintColor: 0xff00ff00,
           placeholder: 'foo',
         });
       });
diff --git a/lib/src/commands/OptionsProcessor.ts b/lib/src/commands/OptionsProcessor.ts
index 43d48c9a0a5..1c47416ed70 100644
--- a/lib/src/commands/OptionsProcessor.ts
+++ b/lib/src/commands/OptionsProcessor.ts
@@ -116,22 +116,49 @@ export class OptionsProcessor {
 
   private processColor(key: string, value: any, options: Record<string, any>) {
     if (isEqual(key, 'color') || endsWith(key, 'Color')) {
-      const newColorObj: Record<string, any> = { dark: 'NoColor', light: 'NoColor' };
+      if (Platform.OS === 'ios') this.processColorIOS(key, value, options);
+      else this.processColorAndroid(key, value, options);
+    }
+  }
+
+  private processColorIOS(key: string, value: any, options: Record<string, any>) {
+    if (value !== undefined) {
       if (value === null) {
-        options[key] = newColorObj;
+        options[key] = 'NoColor';
       } else if (value instanceof Object) {
+        if ('dynamic' in value) {
+          options[key].dynamic.light = this.colorService.toNativeColor(value.dynamic.light);
+          options[key].dynamic.dark = this.colorService.toNativeColor(value.dynamic.dark);
+        } else {
+          options[key].light = this.colorService.toNativeColor(value.light);
+          options[key].dark = this.colorService.toNativeColor(value.dark);
+          options[key] = DynamicColorIOS(options[key]);
+        }
+      } else {
+        options[key] = this.colorService.toNativeColor(value);
+      }
+    }
+  }
+
+  private processColorAndroid(key: string, value: any, options: Record<string, any>) {
+    const newColorObj: Record<string, any> = { dark: 'NoColor', light: 'NoColor' };
+    if (value === null) {
+      options[key] = newColorObj;
+    } else if (value instanceof Object) {
+      if ('semantic' in value || 'resource_paths' in value) {
+        options[key] = value;
+        return;
+      } else {
         for (let keyColor in value) {
           newColorObj[keyColor] = this.colorService.toNativeColor(value[keyColor]);
         }
         options[key] = newColorObj;
-      } else {
-        let parsedColor = this.colorService.toNativeColor(value);
-        newColorObj.light = parsedColor;
-        newColorObj.dark = parsedColor;
-        options[key] = newColorObj;
       }
-
-      if (Platform.OS === 'ios') options[key] = DynamicColorIOS(options[key]);
+    } else {
+      let parsedColor = this.colorService.toNativeColor(value);
+      newColorObj.light = parsedColor;
+      newColorObj.dark = parsedColor;
+      options[key] = newColorObj;
     }
   }
 
diff --git a/lib/src/index.ts b/lib/src/index.ts
index 5140ca43436..c8a27e92177 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -16,4 +16,3 @@ export * from './interfaces/NavigationFunctionComponent';
 export * from './interfaces/CommandName';
 export * from './interfaces/Processors';
 export * from './interfaces/ProcessorSubscription';
-export * from './Mock';
diff --git a/lib/src/interfaces/Options.ts b/lib/src/interfaces/Options.ts
index 3cf8e3298d7..edfaf62cbd6 100644
--- a/lib/src/interfaces/Options.ts
+++ b/lib/src/interfaces/Options.ts
@@ -1,9 +1,9 @@
 // tslint:disable jsdoc-format
-import { ImageRequireSource, ImageSourcePropType, Insets } from 'react-native';
+import { ImageRequireSource, ImageSourcePropType, Insets, OpaqueColorValue } from 'react-native';
 
 // TODO: Import ColorValue instead when upgrading @types/react-native to 0.63+
 // Only assign PlatformColor or DynamicColorIOS as a Color symbol!
-export declare type Color = string | symbol | ThemeColor | null;
+export declare type Color = string | symbol | ThemeColor | OpaqueColorValue | null;
 type FontFamily = string;
 type FontStyle = 'normal' | 'italic';
 type FontWeightIOS =
@@ -583,6 +583,7 @@ export interface OptionsSearchBar {
   backgroundColor?: Color;
   tintColor?: Color;
   placeholder?: string;
+  cancelText?: string;
 }
 
 export interface OptionsTopBar {
@@ -1004,6 +1005,11 @@ export interface OptionsBottomTab {
    * instead it will emit a bottomTabPressedEvent
    */
   selectTabOnPress?: boolean;
+  /**
+   * Pop to root of stack by tapping on already selected tab
+   * #### (Android specific)
+   */
+  popToRoot?: boolean;
 }
 
 export interface SideMenuSide {
diff --git a/package.json b/package.json
index 2fb35952799..aa57232205b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "7.18.0",
+  "version": "7.21.0",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,
@@ -25,6 +25,7 @@
     "build": "node ./scripts/build",
     "watch": "node ./scripts/watch",
     "xcode": "open playground/ios/playground.xcworkspace",
+    "studio": "studio playground/android",
     "install-android": "node ./scripts/install-android",
     "uninstall-android": "cd playground/android && ./gradlew uninstallAll",
     "clean": "node ./scripts/clean",
@@ -50,15 +51,20 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "remx": "*"
+  },
+  "peerDependenciesMeta": {
+    "remx": {
+      "optional": true
+    }
   },
   "dependencies": {
     "hoist-non-react-statics": "3.x.x",
     "lodash": "4.17.x",
     "prop-types": "15.x.x",
     "react-lifecycles-compat": "2.0.0",
-    "tslib": "1.9.3",
-    "remx": "3.x.x"
+    "tslib": "1.9.3"
   },
   "devDependencies": {
     "@babel/core": "7.10.3",
@@ -109,7 +115,8 @@
     "ts-mockito": "^2.3.1",
     "typedoc": "0.x.x",
     "typescript": "3.9.5",
-    "detox-testing-library-rnn-adapter": "1.x.x"
+    "detox-testing-library-rnn-adapter": "2.x.x",
+    "remx": "3.x.x"
   },
   "jest": {
     "preset": "react-native",
@@ -127,6 +134,7 @@
       "./jest-setup.js"
     ],
     "moduleNameMapper": {
+      "react-native-navigation/Mock": "<rootDir>/lib/src/Mock",
       "react-native-navigation": "<rootDir>/lib/src",
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/playground/img/layouts@2x.png"
     },
@@ -250,4 +258,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/playground/android/app/src/main/res/values-night/colors.xml b/playground/android/app/src/main/res/values-night/colors.xml
new file mode 100644
index 00000000000..0d7bbf0c4e9
--- /dev/null
+++ b/playground/android/app/src/main/res/values-night/colors.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <item name="textColor" type="color">#BA292E</item>
+    <item name="backgroundColor" type="color">#282528</item>
+</resources>
\ No newline at end of file
diff --git a/playground/android/app/src/main/res/values-notnight/colors.xml b/playground/android/app/src/main/res/values-notnight/colors.xml
new file mode 100644
index 00000000000..a57d4024920
--- /dev/null
+++ b/playground/android/app/src/main/res/values-notnight/colors.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <item name="textColor" type="color">#000000</item>
+    <item name="backgroundColor" type="color">#e8e8e8</item>
+</resources>
\ No newline at end of file
diff --git a/playground/android/app/src/main/res/values/colors.xml b/playground/android/app/src/main/res/values/colors.xml
new file mode 100644
index 00000000000..a57d4024920
--- /dev/null
+++ b/playground/android/app/src/main/res/values/colors.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <item name="textColor" type="color">#000000</item>
+    <item name="backgroundColor" type="color">#e8e8e8</item>
+</resources>
\ No newline at end of file
diff --git a/playground/android/app/src/main/res/values/styles.xml b/playground/android/app/src/main/res/values/styles.xml
index 31533f92037..7879f972437 100644
--- a/playground/android/app/src/main/res/values/styles.xml
+++ b/playground/android/app/src/main/res/values/styles.xml
@@ -3,10 +3,4 @@
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <item name="android:windowBackground">@color/backgroundColor</item>
     </style>
-
-    <!--This is your application's default background color.
-    It will be visible when the app is first opened (while the splash layout is visible)
-    and when transitioning between a destination drawn under the StatusBar to
-    a destination drawn behind it-->
-    <item name="backgroundColor" type="color">#e8e8e8</item>
 </resources>
\ No newline at end of file
diff --git a/playground/ios/NavigationTests/RNNSearchBarOptionsTest.m b/playground/ios/NavigationTests/RNNSearchBarOptionsTest.m
index bb50d79c3f9..c46f439d2c1 100644
--- a/playground/ios/NavigationTests/RNNSearchBarOptionsTest.m
+++ b/playground/ios/NavigationTests/RNNSearchBarOptionsTest.m
@@ -15,7 +15,8 @@ - (void)testInitWithDict {
         @"obscuresBackgroundDuringPresentation" : @(1),
         @"backgroundColor" : @(0xff0000ff),
         @"tintColor" : @(0xff0000ff),
-        @"placeholder" : @"placeholder"
+        @"placeholder" : @"placeholder",
+        @"cancelText" : @"cancelText",
     }];
 
     XCTAssertTrue(options.visible.get);
@@ -25,6 +26,7 @@ - (void)testInitWithDict {
     XCTAssertTrue([options.backgroundColor.get isEqual:UIColor.blueColor]);
     XCTAssertTrue([options.tintColor.get isEqual:UIColor.blueColor]);
     XCTAssertTrue([options.placeholder.get isEqualToString:@"placeholder"]);
+    XCTAssertTrue([options.cancelText.get isEqualToString:@"cancelText"]);
 }
 
 - (void)testMergeOptions {
@@ -35,7 +37,8 @@ - (void)testMergeOptions {
         @"obscuresBackgroundDuringPresentation" : @(1),
         @"backgroundColor" : @(0xff0000ff),
         @"tintColor" : @(0xff0000ff),
-        @"placeholder" : @"placeholder"
+        @"placeholder" : @"placeholder",
+        @"cancelText" : @"cancelText",
     }];
     RNNSearchBarOptions *mergeOptions = [[RNNSearchBarOptions alloc] initWithDict:@{
         @"visible" : @(0),
@@ -44,7 +47,8 @@ - (void)testMergeOptions {
         @"obscuresBackgroundDuringPresentation" : @(0),
         @"backgroundColor" : @(0xff00ff00),
         @"tintColor" : @(0xff00ff00),
-        @"placeholder" : @"mergedPlaceholder"
+        @"placeholder" : @"mergedPlaceholder",
+        @"cancelText" : @"mergedCancelText",
     }];
 
     [options mergeOptions:mergeOptions];
@@ -56,6 +60,7 @@ - (void)testMergeOptions {
     XCTAssertTrue([options.backgroundColor.get isEqual:UIColor.greenColor]);
     XCTAssertTrue([options.tintColor.get isEqual:UIColor.greenColor]);
     XCTAssertTrue([options.placeholder.get isEqualToString:@"mergedPlaceholder"]);
+    XCTAssertTrue([options.cancelText.get isEqualToString:@"mergedCancelText"]);
 }
 
 @end
diff --git a/playground/ios/playground/Images.xcassets/rnnTextColor.colorset/Contents.json b/playground/ios/playground/Images.xcassets/rnnTextColor.colorset/Contents.json
new file mode 100644
index 00000000000..634c45cab69
--- /dev/null
+++ b/playground/ios/playground/Images.xcassets/rnnTextColor.colorset/Contents.json
@@ -0,0 +1,51 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.000",
+          "green" : "0.000",
+          "red" : "0.000"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "light"
+        }
+      ],
+      "color" : {
+        "platform" : "ios",
+        "reference" : "darkTextColor"
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.180",
+          "green" : "0.160",
+          "red" : "0.730"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/playground/ios/playground/LaunchScreen.storyboard b/playground/ios/playground/LaunchScreen.storyboard
index d6b5e4b687e..2b8552ecb68 100644
--- a/playground/ios/playground/LaunchScreen.storyboard
+++ b/playground/ios/playground/LaunchScreen.storyboard
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17156" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17125"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -19,26 +20,26 @@
                             <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd">
                                 <rect key="frame" x="20" y="855.5" width="374" height="20.5"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <color key="textColor" name="rnnTextColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="react-native-navigation playground" textAlignment="center" lineBreakMode="middleTruncation" numberOfLines="2" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
                                 <rect key="frame" x="20" y="256.5" width="374" height="86"/>
                                 <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <color key="textColor" name="rnnTextColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
                         </subviews>
-                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
-                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" systemColor="quaternarySystemFillColor" red="0.4549019608" green="0.4549019608" blue="0.50196078430000002" alpha="0.080000000000000002" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
                             <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="obG-Y5-kRd" secondAttribute="centerX" id="5cz-MP-9tL"/>
                             <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
-                            <constraint firstItem="obG-Y5-kRd" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" symbolic="YES" id="SfN-ll-jLj"/>
+                            <constraint firstItem="obG-Y5-kRd" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" constant="20" symbolic="YES" id="SfN-ll-jLj"/>
                             <constraint firstAttribute="bottom" secondItem="obG-Y5-kRd" secondAttribute="bottom" constant="20" id="Y44-ml-fuU"/>
                             <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" symbolic="YES" id="x7j-FC-K8j"/>
+                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" constant="20" symbolic="YES" id="x7j-FC-K8j"/>
                         </constraints>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
@@ -46,4 +47,9 @@
             <point key="canvasLocation" x="53" y="375"/>
         </scene>
     </scenes>
+    <resources>
+        <namedColor name="rnnTextColor">
+            <color white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </namedColor>
+    </resources>
 </document>
diff --git a/playground/src/commons/Colors.ts b/playground/src/commons/Colors.ts
index 166b485cf9e..608e0f53963 100644
--- a/playground/src/commons/Colors.ts
+++ b/playground/src/commons/Colors.ts
@@ -1,10 +1,15 @@
+import { Platform, PlatformColor } from 'react-native';
+
 const colors = {
   background: { light: '#e8e8e8', dark: '#282528' },
   barBackground: { light: 'white', dark: '#282528' },
   primary: { light: '#5847ff', dark: '#BA292E' },
   secondary: { light: '#FFC249', dark: '#5847ff' },
   accent: { light: '#65C888', dark: '#FFA73C' },
-  textColor: { light: 'black', dark: '#BA292E' },
+  textColor:
+    Platform.OS === 'ios'
+      ? { light: '#5847ff', dark: '#BA292E' }
+      : PlatformColor('@color/textColor'),
   activeTextColor: { light: '#5847ff', dark: '#FFA73C' },
   iconTint: { light: 'black', dark: '#BA292E' },
   activeIconTint: { light: '#5847ff', dark: '#FFA73C' },
diff --git a/website/docs/api/options-bottomTab.mdx b/website/docs/api/options-bottomTab.mdx
index c857076061a..a9df54180b0 100644
--- a/website/docs/api/options-bottomTab.mdx
+++ b/website/docs/api/options-bottomTab.mdx
@@ -17,6 +17,14 @@ const options = {
 | ------- | -------- | -------- |
 | boolean | No       | Both     |
 
+## `popToRoot`
+
+Pop to root of stack by tapping on already selected tab.
+
+| Type    | Required | Platform  |
+| ------- | -------- | --------- |
+| boolean | No       | Android   |
+
 ## `badge`
 
 | Type   | Required | Platform |
diff --git a/website/docs/api/topBar-searchBar.mdx b/website/docs/api/topBar-searchBar.mdx
index ead162857cc..bb48b29089b 100644
--- a/website/docs/api/topBar-searchBar.mdx
+++ b/website/docs/api/topBar-searchBar.mdx
@@ -52,3 +52,9 @@ sidebar_label: Layout
 | Type                    | Required | Platform | Description                    |
 | ----------------------- | -------- | -------- | ------------------------------ |
 | string | No       | iOS | The placeholder value in the UISearchBar. |
+
+## `cancelText`
+
+| Type                    | Required | Platform | Description                                           |
+| ----------------------- | -------- | -------- | ----------------------------------------------------- |
+| string                  | No       | iOS      | The text value of "Cancel" button in the UISearchBar. |
diff --git a/website/docs/docs/community-libraries.mdx b/website/docs/docs/community-libraries.mdx
index 2d9c4787da5..c15df2e1557 100644
--- a/website/docs/docs/community-libraries.mdx
+++ b/website/docs/docs/community-libraries.mdx
@@ -6,14 +6,21 @@ sidebar_label: Community libraries
 
 React Native Navigation has an active community with a bunch of support libraries.
 
+## Utilities
+
 [React Native Navigation Hooks](https://github.com/underscopeio/react-native-navigation-hooks) :
 A set of React hooks for React Native Navigation.
 
+[React Native Navigation Register Screens](https://github.com/karlmarxlopez/react-native-navigation-register-screens) : 
+Utility function to register array of screens instead of calling `Navigation.registerComponent` multiple times.
+
+## Extensions
+
 [React Native Navigation Drawer Extension](https://github.com/lukebrandonfarrell/react-native-navigation-drawer-extension) :
 Drawer API built on top of React Native Navigation for iOS and Android. 
 
 [React Native Navigation Search Bar](https://github.com/lukebrandonfarrell/react-native-navigation-search-bar) :
 React Native Elements search bar with collapsible header built for React Native Navigation.
 
-[React Native Navigation Register Screens](https://github.com/karlmarxlopez/react-native-navigation-register-screens) : 
-Utility function to register array of screens instead of calling `Navigation.registerComponent` multiple times.
\ No newline at end of file
+[React Native Navigation Bottom Sheet Extension](https://github.com/CursedWizard/react-native-navigation-bottom-sheet) :
+A performant customizable bottom sheet component built on top of React Native Navigation.
diff --git a/website/versioned_docs/version-7.16.0/api/api-events.mdx b/website/versioned_docs/version-7.16.0/api/api-events.mdx
index 7328d8c3539..b10a49e99c2 100644
--- a/website/versioned_docs/version-7.16.0/api/api-events.mdx
+++ b/website/versioned_docs/version-7.16.0/api/api-events.mdx
@@ -177,7 +177,7 @@ modalDismissedListener.remove();
 
 ## registerModalAttemptedToDismissListener(iOS 13+ only)
 
-Invoked only on iOS pageSheet modal when `swipeToDismiss` flag is set to true and modal was swiped down to dismiss.
+Invoked only on iOS pageSheet modal when `swipeToDismiss` flag is set to false and modal was swiped down to dismiss.
 
 ```js
 // Subscribe
diff --git a/website/versioned_docs/version-7.16.0/docs/community-libraries.mdx b/website/versioned_docs/version-7.16.0/docs/community-libraries.mdx
index 2d9c4787da5..c15df2e1557 100644
--- a/website/versioned_docs/version-7.16.0/docs/community-libraries.mdx
+++ b/website/versioned_docs/version-7.16.0/docs/community-libraries.mdx
@@ -6,14 +6,21 @@ sidebar_label: Community libraries
 
 React Native Navigation has an active community with a bunch of support libraries.
 
+## Utilities
+
 [React Native Navigation Hooks](https://github.com/underscopeio/react-native-navigation-hooks) :
 A set of React hooks for React Native Navigation.
 
+[React Native Navigation Register Screens](https://github.com/karlmarxlopez/react-native-navigation-register-screens) : 
+Utility function to register array of screens instead of calling `Navigation.registerComponent` multiple times.
+
+## Extensions
+
 [React Native Navigation Drawer Extension](https://github.com/lukebrandonfarrell/react-native-navigation-drawer-extension) :
 Drawer API built on top of React Native Navigation for iOS and Android. 
 
 [React Native Navigation Search Bar](https://github.com/lukebrandonfarrell/react-native-navigation-search-bar) :
 React Native Elements search bar with collapsible header built for React Native Navigation.
 
-[React Native Navigation Register Screens](https://github.com/karlmarxlopez/react-native-navigation-register-screens) : 
-Utility function to register array of screens instead of calling `Navigation.registerComponent` multiple times.
\ No newline at end of file
+[React Native Navigation Bottom Sheet Extension](https://github.com/CursedWizard/react-native-navigation-bottom-sheet) :
+A performant customizable bottom sheet component built on top of React Native Navigation.

From 94095b240fae9000ec85905408c0d4617a79fe54 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Thu, 16 Sep 2021 08:20:55 +0300
Subject: [PATCH 13/43] Rename and Refactor Declared to Modal

---
 .../react/NavigationPackage.kt                |   1 +
 .../react/RNNModalViewManager.kt              |  68 ----------
 .../ModalContentLayout.kt}                    |  12 +-
 .../react/modal/ModalFrameLayout.kt           |  19 +++
 .../ModalHostLayout.kt}                       |   8 +-
 .../ModalLayoutController.kt}                 |  31 +++--
 .../react/modal/RNNModalViewManager.kt        | 119 ++++++++++++++++++
 lib/src/components/RNNModal.tsx               |  14 +--
 playground/src/screens/LayoutsScreen.tsx      |  50 +++++---
 9 files changed, 202 insertions(+), 120 deletions(-)
 delete mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
 rename lib/android/app/src/main/java/com/reactnativenavigation/react/{DeclaredLayout.kt => modal/ModalContentLayout.kt} (87%)
 create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalFrameLayout.kt
 rename lib/android/app/src/main/java/com/reactnativenavigation/react/{DeclaredLayoutHost.kt => modal/ModalHostLayout.kt} (89%)
 rename lib/android/app/src/main/java/com/reactnativenavigation/react/{DeclaredLayoutController.kt => modal/ModalLayoutController.kt} (62%)
 create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
index 27a6f3199b5..985a8025f51 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
@@ -7,6 +7,7 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
 import com.reactnativenavigation.NavigationActivity
 import com.reactnativenavigation.options.LayoutFactory
+import com.reactnativenavigation.react.modal.RNNModalViewManager
 
 class NavigationPackage(private val reactNativeHost: ReactNativeHost) : ReactPackage {
     override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
deleted file mode 100644
index 261f1367777..00000000000
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/RNNModalViewManager.kt
+++ /dev/null
@@ -1,68 +0,0 @@
-package com.reactnativenavigation.react
-
-import android.view.View
-import com.facebook.react.common.MapBuilder
-import com.facebook.react.module.annotations.ReactModule
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-import com.facebook.react.uimanager.annotations.ReactProp
-import com.reactnativenavigation.react.modal.ModalDismissEvent
-import com.reactnativenavigation.react.modal.RequestDismissModalEvent
-import com.reactnativenavigation.react.modal.ShowModalEvent
-import com.reactnativenavigation.viewcontrollers.navigator.Navigator
-
-private const val MODAL_MANAGER_NAME = "RNNModalViewManager"
-
-@ReactModule(name = MODAL_MANAGER_NAME)
-    class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<DeclaredLayoutHost>() {
-
-        override fun getName(): String = MODAL_MANAGER_NAME
-
-        override fun createViewInstance(reactContext: ThemedReactContext): DeclaredLayoutHost {
-            return DeclaredLayoutHost(reactContext)
-        }
-
-        override fun onDropViewInstance(modal: DeclaredLayoutHost) {
-            super.onDropViewInstance(modal)
-            navigator.dismissModal(modal.viewController.id, CommandListenerAdapter(object: CommandListener {
-                override fun onSuccess(childId: String?) {
-                    modal.viewController.sendDismissEvent()
-                }
-
-                override fun onError(message: String?) {
-                }
-
-            }))
-            modal.onDropInstance()
-        }
-
-        override fun onAfterUpdateTransaction(modal: DeclaredLayoutHost) {
-            super.onAfterUpdateTransaction(modal)
-            navigator.showModal(modal.viewController, CommandListenerAdapter(object : CommandListener {
-                override fun onSuccess(childId: String?) {
-                    modal.viewController.sendShowEvent()
-                }
-
-                override fun onError(message: String?) {
-                }
-
-            }))
-        }
-
-        override fun addView(parent: DeclaredLayoutHost?, child: View?, index: Int) {
-            super.addView(parent, child, index)
-        }
-
-        override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
-            return MapBuilder.builder<String, Any>()
-                .put(RequestDismissModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onRequestDismiss"))
-                .put(ModalDismissEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDismiss"))
-                .put(ShowModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onShow"))
-                .build()
-        }
-
-        @ReactProp(name = "visible")
-        fun setVisible(modal: DeclaredLayoutHost, visible: Boolean) {
-        }
-
-    }
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt
similarity index 87%
rename from lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt
rename to lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt
index 0d2c28b7ef4..4923f371817 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayout.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt
@@ -1,4 +1,4 @@
-package com.reactnativenavigation.react
+package com.reactnativenavigation.react.modal
 
 import android.content.Context
 import android.view.MotionEvent
@@ -8,11 +8,13 @@ import com.facebook.react.uimanager.*
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.views.view.ReactViewGroup
 
-class DeclaredLayout(context: Context?) : ReactViewGroup(context), RootView{
+
+class ModalContentLayout(context: Context?) : ReactViewGroup(context), RootView{
     private var hasAdjustedSize = false
     private var viewWidth = 0
     private var viewHeight = 0
     private val mJSTouchDispatcher = JSTouchDispatcher(this)
+
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
         super.onSizeChanged(w, h, oldw, oldh)
         viewWidth = w
@@ -26,13 +28,13 @@ class DeclaredLayout(context: Context?) : ReactViewGroup(context), RootView{
             val reactContext: ReactContext = this.getReactContext()
             reactContext.runOnNativeModulesQueueThread(object : GuardedRunnable(reactContext) {
                 override fun runGuarded() {
-                    val uiManager = this@DeclaredLayout.getReactContext().getNativeModule<UIManagerModule>(
+                    val uiManager = this@ModalContentLayout.getReactContext().getNativeModule<UIManagerModule>(
                         UIManagerModule::class.java
                     ) as UIManagerModule
                     uiManager.updateNodeSize(
                         viewTag,
-                        this@DeclaredLayout.viewWidth,
-                        this@DeclaredLayout.viewHeight
+                        this@ModalContentLayout.viewWidth,
+                        this@ModalContentLayout.viewHeight
                     )
                 }
             })
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalFrameLayout.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalFrameLayout.kt
new file mode 100644
index 00000000000..07e0690127b
--- /dev/null
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalFrameLayout.kt
@@ -0,0 +1,19 @@
+package com.reactnativenavigation.react.modal
+
+import android.widget.FrameLayout
+import com.facebook.react.bridge.ReactContext
+import com.reactnativenavigation.utils.StatusBarUtils
+
+class ModalFrameLayout(context: ReactContext) : FrameLayout(context) {
+    val modalContentLayout = ModalContentLayout(context)
+
+    init {
+        addView(modalContentLayout, MarginLayoutParams(MarginLayoutParams.WRAP_CONTENT, MarginLayoutParams.WRAP_CONTENT)
+            .apply {
+                val translucent = context.currentActivity?.window?.let {
+                    StatusBarUtils.isTranslucent(context.currentActivity?.window)
+                } ?: false
+                topMargin = if (translucent) 0 else StatusBarUtils.getStatusBarHeight(context)
+            })
+    }
+}
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalHostLayout.kt
similarity index 89%
rename from lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
rename to lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalHostLayout.kt
index e569853c199..121aa6a09f7 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutHost.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalHostLayout.kt
@@ -1,4 +1,4 @@
-package com.reactnativenavigation.react
+package com.reactnativenavigation.react.modal
 
 import android.annotation.SuppressLint
 import android.annotation.TargetApi
@@ -18,8 +18,8 @@ import com.reactnativenavigation.viewcontrollers.viewcontroller.overlay.ViewCont
 import java.util.*
 
 @SuppressLint("ViewConstructor")
-open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reactContext), LifecycleEventListener {
-    val viewController = DeclaredLayoutController(
+open class ModalHostLayout(reactContext: ThemedReactContext) : ViewGroup(reactContext), LifecycleEventListener {
+    val viewController = ModalLayoutController(
         reactContext,
         reactContext.currentActivity, CompatUtils.generateViewId().toString(),
         YellowBoxDelegate(reactContext), Options().apply {
@@ -27,7 +27,7 @@ open class DeclaredLayoutHost(reactContext: ThemedReactContext) : ViewGroup(reac
         }, ViewControllerOverlay(reactContext),
         getHostId = { this.id }
     )
-    private val mHostView = viewController.view
+    private val mHostView = viewController.view.modalContentLayout
 
     init {
         (context as ReactContext).addLifecycleEventListener(this)
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
similarity index 62%
rename from lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
rename to lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
index 50e5e55ec35..61c1b177577 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/DeclaredLayoutController.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
@@ -1,25 +1,23 @@
-package com.reactnativenavigation.react
+package com.reactnativenavigation.react.modal
 
 import android.app.Activity
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerModule
 import com.reactnativenavigation.options.Options
-import com.reactnativenavigation.react.modal.ModalDismissEvent
-import com.reactnativenavigation.react.modal.RequestDismissModalEvent
-import com.reactnativenavigation.react.modal.ShowModalEvent
+import com.reactnativenavigation.react.Constants
 import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController
 import com.reactnativenavigation.viewcontrollers.viewcontroller.YellowBoxDelegate
 import com.reactnativenavigation.viewcontrollers.viewcontroller.overlay.ViewControllerOverlay
 
-class DeclaredLayoutController(
+class ModalLayoutController(
     val reactContext: ReactContext,
     activity: Activity?,
     id: String?,
     yellowBoxDelegate: YellowBoxDelegate?,
     initialOptions: Options?,
     overlay: ViewControllerOverlay?,
-    val getHostId:()->Int
-) : ViewController<DeclaredLayout>(activity, id, yellowBoxDelegate, initialOptions, overlay) {
+    val getHostId: () -> Int
+) : ViewController<ModalFrameLayout>(activity, id, yellowBoxDelegate, initialOptions, overlay) {
     override fun isViewShown(): Boolean {
         return !isDestroyed && view != null && view!!.isShown
     }
@@ -31,31 +29,30 @@ class DeclaredLayoutController(
     override fun getCurrentComponentName(): String = "GenericDeclaredLayoutController"
 
 
-    override fun createView(): DeclaredLayout {
-        return DeclaredLayout(reactContext)
+    override fun createView(): ModalFrameLayout {
+        return ModalFrameLayout(reactContext)
     }
 
     override fun sendOnNavigationButtonPressed(buttonId: String?) {
-        if(buttonId == Constants.HARDWARE_BACK_BUTTON_ID ){
-                val dispatcher = reactContext.getNativeModule(
-                    UIManagerModule::class.java
-                ).eventDispatcher
-                dispatcher.dispatchEvent(RequestDismissModalEvent(getHostId()))
+        if (buttonId == Constants.HARDWARE_BACK_BUTTON_ID) {
+            val dispatcher = reactContext.getNativeModule(
+                UIManagerModule::class.java
+            ).eventDispatcher
+            dispatcher.dispatchEvent(RequestDismissModalEvent(getHostId()))
         }
     }
 
-    fun sendDismissEvent(){
+    fun sendDismissEvent() {
         val dispatcher = reactContext.getNativeModule(
             UIManagerModule::class.java
         ).eventDispatcher
         dispatcher.dispatchEvent(ModalDismissEvent(getHostId()))
     }
 
-    fun sendShowEvent(){
+    fun sendShowEvent() {
         val dispatcher = reactContext.getNativeModule(
             UIManagerModule::class.java
         ).eventDispatcher
         dispatcher.dispatchEvent(ShowModalEvent(getHostId()))
     }
-
 }
\ No newline at end of file
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt
new file mode 100644
index 00000000000..0eead872a1a
--- /dev/null
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt
@@ -0,0 +1,119 @@
+package com.reactnativenavigation.react.modal
+
+import android.content.Context
+import android.graphics.Point
+import android.view.WindowManager
+import com.facebook.infer.annotation.Assertions
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.LayoutShadowNode
+import com.facebook.react.uimanager.ReactShadowNodeImpl
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.reactnativenavigation.react.CommandListener
+import com.reactnativenavigation.react.CommandListenerAdapter
+import com.reactnativenavigation.utils.StatusBarUtils
+import com.reactnativenavigation.viewcontrollers.navigator.Navigator
+
+private const val MODAL_MANAGER_NAME = "RNNModalViewManager"
+
+@ReactModule(name = MODAL_MANAGER_NAME)
+class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<ModalHostLayout>() {
+
+    override fun getName(): String = MODAL_MANAGER_NAME
+
+    override fun createViewInstance(reactContext: ThemedReactContext): ModalHostLayout {
+        return ModalHostLayout(reactContext)
+    }
+
+    override fun createShadowNodeInstance(): LayoutShadowNode {
+        return ModalHostShadowNode()
+    }
+
+    override fun getShadowNodeClass(): Class<out LayoutShadowNode> {
+        return ModalHostShadowNode::class.java
+    }
+
+    override fun onDropViewInstance(modal: ModalHostLayout) {
+        super.onDropViewInstance(modal)
+        navigator.dismissModal(modal.viewController.id, CommandListenerAdapter(object : CommandListener {
+            override fun onSuccess(childId: String?) {
+                modal.viewController.sendDismissEvent()
+            }
+
+            override fun onError(message: String?) {
+            }
+
+        }))
+        modal.onDropInstance()
+    }
+
+    override fun onAfterUpdateTransaction(modal: ModalHostLayout) {
+        super.onAfterUpdateTransaction(modal)
+        navigator.showModal(modal.viewController, CommandListenerAdapter(object : CommandListener {
+            override fun onSuccess(childId: String?) {
+                modal.viewController.sendShowEvent()
+            }
+
+            override fun onError(message: String?) {
+            }
+
+        }))
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
+        return MapBuilder.builder<String, Any>()
+            .put(RequestDismissModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onRequestDismiss"))
+            .put(ModalDismissEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDismiss"))
+            .put(ShowModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onShow"))
+            .build()
+    }
+
+    @ReactProp(name = "visible")
+    fun setVisible(modal: ModalHostLayout, visible: Boolean) {
+        //should be empty, we need at least one prop to be implemented via this
+        //annotation, which enables RN to call onAfterUpdateTransaction to show and
+        //onDropViewInstance to hide (to prevent taking space).
+    }
+
+}
+
+private fun getModalHostSize(context: Context): Point {
+    val MIN_POINT = Point()
+    val MAX_POINT = Point()
+    val SIZE_POINT = Point()
+    val wm = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
+    val display = Assertions.assertNotNull(wm).defaultDisplay
+    // getCurrentSizeRange will return the min and max width and height that the window can be
+    display.getCurrentSizeRange(MIN_POINT, MAX_POINT)
+    // getSize will return the dimensions of the screen in its current orientation
+    display.getSize(SIZE_POINT)
+    val attrs = intArrayOf(android.R.attr.windowFullscreen)
+    val theme = context.theme
+    val ta = theme.obtainStyledAttributes(attrs)
+    val windowFullscreen = ta.getBoolean(0, false)
+
+    // We need to add the status bar height to the height if we have a fullscreen window,
+    // because Display.getCurrentSizeRange doesn't include it.
+    var statusBarHeight = 0
+    if (windowFullscreen) {
+        statusBarHeight = StatusBarUtils.getStatusBarHeight(context)
+    }
+    return if (SIZE_POINT.x < SIZE_POINT.y) {
+        // If we are vertical the width value comes from min width and height comes from max height
+        Point(MIN_POINT.x, MAX_POINT.y + statusBarHeight)
+    } else {
+        // If we are horizontal the width value comes from max width and height comes from min height
+        Point(MAX_POINT.x, MIN_POINT.y + statusBarHeight)
+    }
+}
+
+private class ModalHostShadowNode : LayoutShadowNode() {
+    override fun addChildAt(child: ReactShadowNodeImpl, i: Int) {
+        super.addChildAt(child, i)
+        val modalSize = getModalHostSize(themedContext)
+        child.setStyleWidth(modalSize.x.toFloat())
+        child.setStyleHeight(modalSize.y.toFloat())
+    }
+}
diff --git a/lib/src/components/RNNModal.tsx b/lib/src/components/RNNModal.tsx
index 782defa5ef1..4bc87da6b98 100644
--- a/lib/src/components/RNNModal.tsx
+++ b/lib/src/components/RNNModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { requireNativeComponent, ViewProps, StyleSheet, ScrollView } from 'react-native';
+import { requireNativeComponent, ViewProps, StyleSheet } from 'react-native';
 import { View } from 'react-native-ui-lib';
 export interface RNNModalProps extends ViewProps {
   // animationType?: 'none' | 'slide' | 'fade' | null;
@@ -24,11 +24,9 @@ export class RNNModal extends React.Component<RNNModalProps> {
     if (this.props.visible) {
       return (
         <RNNModalViewManager {...p}>
-          <ScrollView>
-            <View style={styles.container} collapsable={false}>
-              {this.props.children}
-            </View>
-          </ScrollView>
+          <View style={styles.container} collapsable={false}>
+            {this.props.children}
+          </View>
         </RNNModalViewManager>
       );
     } else {
@@ -39,11 +37,11 @@ export class RNNModal extends React.Component<RNNModalProps> {
 
 const styles = StyleSheet.create({
   modal: {
-    backgroundColor: 'yellow',
+    // backgroundColor: 'yellow',
     position: 'absolute',
   },
   container: {
-    backgroundColor: 'red',
+    // backgroundColor: 'red',
     top: 0,
     flex: 1,
   },
diff --git a/playground/src/screens/LayoutsScreen.tsx b/playground/src/screens/LayoutsScreen.tsx
index 4d1eab2b31b..ed90e667c9d 100644
--- a/playground/src/screens/LayoutsScreen.tsx
+++ b/playground/src/screens/LayoutsScreen.tsx
@@ -13,7 +13,8 @@ import testIDs from '../testIDs';
 import Screens from './Screens';
 import Navigation from '../services/Navigation';
 import { stack } from '../commons/Layouts';
-import { Modal, Text } from 'react-native';
+import { Modal, Text, Image, StyleSheet } from 'react-native';
+import { View } from 'react-native-ui-lib';
 
 const {
   WELCOME_SCREEN_HEADER,
@@ -59,29 +60,22 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     };
   }
 
-  onRequestDismiss = () => {
-    console.log('OnRequestDismiss called');
-    this.setState({ modalVisible: false });
-  };
-
-  onModalDismiss = () => {
-    console.log('Modal Dismissed');
-  };
-
-  onModalShow = () => {
-    console.log('Modal Shown');
-  };
-
   render() {
     return (
       <Root componentId={this.props.componentId}>
         <RNNModal
           visible={this.state.modalVisible}
-          onRequestDismiss={this.onRequestDismiss}
-          onDismiss={this.onModalDismiss}
-          onShow={this.onModalShow}
+          onRequestDismiss={() => this.setState({ modalVisible: false })}
         >
-          <Button label="Dismiss Modal eee" onPress={this.toggleModal} />
+          <Button label="Dismiss Our Modal" onPress={this.toggleModal} />
+          <View style={styles.logoContainer}>
+            <Image
+              style={styles.tinyLogo}
+              source={{
+                uri: 'https://wix.github.io/react-native-navigation/img/logo.png',
+              }}
+            />
+          </View>
         </RNNModal>
 
         <Modal
@@ -89,6 +83,14 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
           onRequestClose={() => this.setState({ rnModalVisibile: false })}
         >
           <Button label="Dismiss RN Modal" onPress={this.toggleRNModal} />
+          <View style={styles.logoContainer}>
+            <Image
+              style={styles.tinyLogo}
+              source={{
+                uri: 'https://reactnative.dev/img/tiny_logo.png',
+              }}
+            />
+          </View>
         </Modal>
         <Button label="Stack" testID={STACK_BTN} onPress={this.stack} />
         <Button label="BottomTabs" testID={BOTTOM_TABS_BTN} onPress={this.bottomTabs} />
@@ -214,3 +216,15 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     });
   };
 }
+const styles = StyleSheet.create({
+  logoContainer: {
+    justifyContent: 'center',
+    flex: 1,
+    flexDirection: 'row',
+  },
+  tinyLogo: {
+    justifyContent: 'center',
+    width: 128,
+    height: 128,
+  },
+});

From 16e49ef8701b8792b4329a5d2a900da6fabd53fa Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:30:03 +0300
Subject: [PATCH 14/43] Update NavigationReactInitializer.java

---
 .../react/NavigationReactInitializer.java     | 34 ++-----------------
 1 file changed, 3 insertions(+), 31 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
index 939933df132..90880338abd 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
@@ -1,22 +1,11 @@
 package com.reactnativenavigation.react;
 
-import android.view.View;
+import androidx.annotation.NonNull;
 
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.uimanager.NativeViewHierarchyManager;
-import com.facebook.react.uimanager.ReactShadowNode;
-import com.facebook.react.uimanager.UIBlock;
-import com.facebook.react.uimanager.UIImplementation;
-import com.facebook.react.uimanager.UIManagerModule;
-import com.facebook.react.uimanager.UIManagerModuleListener;
-import com.facebook.react.uimanager.events.Event;
-import com.facebook.react.uimanager.events.EventDispatcherListener;
-import com.facebook.react.views.modal.ReactModalHostManager;
-import com.facebook.react.views.modal.ReactModalHostView;
 import com.reactnativenavigation.NavigationActivity;
 import com.reactnativenavigation.react.events.EventEmitter;
-import com.reactnativenavigation.utils.LogKt;
 
 import androidx.annotation.NonNull;
 
@@ -26,15 +15,13 @@ public class NavigationReactInitializer implements ReactInstanceManager.ReactIns
     private final DevPermissionRequest devPermissionRequest;
     private boolean waitingForAppLaunchEvent = true;
     private boolean isActivityReadyForUi = false;
-    NavigationActivity _activity;
 
     NavigationReactInitializer(ReactInstanceManager reactInstanceManager, boolean isDebug) {
         this.reactInstanceManager = reactInstanceManager;
         this.devPermissionRequest = new DevPermissionRequest(isDebug);
     }
 
-    void onActivityCreated(NavigationActivity activity) {
-        _activity = activity;
+    void onActivityCreated() {
         reactInstanceManager.addReactInstanceEventListener(this);
         waitingForAppLaunchEvent = true;
     }
@@ -85,22 +72,7 @@ private boolean shouldCreateContext() {
 
     @Override
     public void onReactContextInitialized(final ReactContext context) {
-        final UIManagerModule nativeModule = context.getNativeModule(UIManagerModule.class);
-        nativeModule.getUIImplementation().setLayoutUpdateListener(root -> {
-            final View view = nativeModule.resolveView(root.getReactTag());
-            if (view != null && view instanceof ReactModalHostView) {
-                LogKt.logd("view layout updated for view " + view.getClass().getSimpleName(), "XEXE");
-            }
-            LogKt.logd("onLayoutUpdated: " + root.getViewClass() + ",reactTag "
-                    + root.getReactTag(), "onLayoutUpdated");
-        });
-
-        nativeModule.getEventDispatcher().addListener(event -> {
-            final String eventName = event.getEventName();
-            if ("topRequestClose".equals(eventName) || "topShow".equals(eventName)) {
-                LogKt.logd("Modal view tag is " + event.getViewTag(), "ModalXX");
-            }
-        });
         emitAppLaunched(context);
     }
 }
+

From 6bcab70a45856b6070adbfce670ec0adaa61923f Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:30:35 +0300
Subject: [PATCH 15/43] Update ReactGateway.java

---
 .../java/com/reactnativenavigation/react/ReactGateway.java      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/android/app/src/reactNative63/java/com/reactnativenavigation/react/ReactGateway.java b/lib/android/app/src/reactNative63/java/com/reactnativenavigation/react/ReactGateway.java
index d12671cb3bf..035ec31b2c5 100644
--- a/lib/android/app/src/reactNative63/java/com/reactnativenavigation/react/ReactGateway.java
+++ b/lib/android/app/src/reactNative63/java/com/reactnativenavigation/react/ReactGateway.java
@@ -25,7 +25,7 @@ public ReactGateway(ReactNativeHost host) {
     }
 
 	public void onActivityCreated(NavigationActivity activity) {
-		initializer.onActivityCreated(activity);
+		initializer.onActivityCreated();
         jsDevReloadHandler.setReloadListener(activity);
 	}
 

From 00abb93e7b641419c0f4fa3ca7cbfdae07050c39 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:32:12 +0300
Subject: [PATCH 16/43] Update NavigationReactInitializer.java

---
 .../react/NavigationReactInitializer.java                      | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
index 90880338abd..887489e0481 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
@@ -1,7 +1,5 @@
 package com.reactnativenavigation.react;
 
-import androidx.annotation.NonNull;
-
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.ReactContext;
 import com.reactnativenavigation.NavigationActivity;
@@ -75,4 +73,3 @@ public void onReactContextInitialized(final ReactContext context) {
         emitAppLaunched(context);
     }
 }
-

From 63334f37c8864089c2eee09b08dad5c05a8b7ac7 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:33:26 +0300
Subject: [PATCH 17/43] Update NavigationReactInitializer.java

---
 .../reactnativenavigation/react/NavigationReactInitializer.java | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
index 887489e0481..4aea1aecb7f 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java
@@ -72,4 +72,4 @@ private boolean shouldCreateContext() {
     public void onReactContextInitialized(final ReactContext context) {
         emitAppLaunched(context);
     }
-}
+}
\ No newline at end of file

From 46cd4be80afb4aaf5734050398b81b0f15a9457f Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:36:56 +0300
Subject: [PATCH 18/43] Update CoordinatorLayoutUtils.java

---
 .../com/reactnativenavigation/utils/CoordinatorLayoutUtils.java  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/utils/CoordinatorLayoutUtils.java b/lib/android/app/src/main/java/com/reactnativenavigation/utils/CoordinatorLayoutUtils.java
index d21ae947546..07fc90e968a 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/utils/CoordinatorLayoutUtils.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/utils/CoordinatorLayoutUtils.java
@@ -7,7 +7,6 @@
 import androidx.coordinatorlayout.widget.CoordinatorLayout;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
-import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
 
 public class CoordinatorLayoutUtils {
     public static CoordinatorLayout.LayoutParams matchParentLP() {

From 0945b90505dc9107adc3466eca456d1c2db47ea2 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:39:01 +0300
Subject: [PATCH 19/43] Update ModalStack.java

---
 .../viewcontrollers/modal/ModalStack.java                 | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
index 5dc24a1aec6..b540fcd7377 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
@@ -1,7 +1,6 @@
 package com.reactnativenavigation.viewcontrollers.modal;
 
 import android.content.Context;
-
 import android.content.res.Configuration;
 import android.view.ViewGroup;
 
@@ -16,11 +15,9 @@
 import java.util.ArrayList;
 import java.util.EmptyStackException;
 import java.util.List;
-import java.util.Map;
 
 import androidx.annotation.Nullable;
 import androidx.annotation.RestrictTo;
-import androidx.collection.ArrayMap;
 import androidx.coordinatorlayout.widget.CoordinatorLayout;
 
 import static com.reactnativenavigation.react.Constants.HARDWARE_BACK_BUTTON_ID;
@@ -28,7 +25,6 @@
 
 public class ModalStack {
     private final List<ViewController> modals = new ArrayList<>();
-    private final Map<String, ViewController> declaredModals = new ArrayMap<>();
     private final ModalPresenter presenter;
     private final ModalOverlay overlay;
     private EventEmitter eventEmitter;
@@ -61,9 +57,7 @@ public void setDefaultOptions(Options defaultOptions) {
         presenter.setDefaultOptions(defaultOptions);
     }
 
-    public void declareModal(ViewController viewController){
-        declaredModals.put(viewController.getId(),viewController);
-    }
+   
     public void showModal(ViewController viewController, ViewController root, CommandListener listener) {
         ViewController toRemove = isEmpty() ? root : peek();
         modals.add(viewController);

From beff45f7053ac085574fd0738266a34b1fc95c20 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:39:20 +0300
Subject: [PATCH 20/43] Update ModalStack.java

---
 .../viewcontrollers/modal/ModalStack.java                      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
index b540fcd7377..a94511dc4bb 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
@@ -56,8 +56,7 @@ public void setRootLayout(ViewGroup rootLayout) {
     public void setDefaultOptions(Options defaultOptions) {
         presenter.setDefaultOptions(defaultOptions);
     }
-
-   
+    
     public void showModal(ViewController viewController, ViewController root, CommandListener listener) {
         ViewController toRemove = isEmpty() ? root : peek();
         modals.add(viewController);

From 2997e11c4078071f5f6232c11de18d8be45a6ac8 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:39:47 +0300
Subject: [PATCH 21/43] Update ModalStack.java

---
 .../reactnativenavigation/viewcontrollers/modal/ModalStack.java | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
index a94511dc4bb..2770067a7f9 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java
@@ -56,7 +56,7 @@ public void setRootLayout(ViewGroup rootLayout) {
     public void setDefaultOptions(Options defaultOptions) {
         presenter.setDefaultOptions(defaultOptions);
     }
-    
+
     public void showModal(ViewController viewController, ViewController root, CommandListener listener) {
         ViewController toRemove = isEmpty() ? root : peek();
         modals.add(viewController);

From 3e9157526f14789348ce936e7f381d0eb1722b4c Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:43:00 +0300
Subject: [PATCH 22/43] Update Navigator.java

---
 .../viewcontrollers/navigator/Navigator.java  | 61 ++-----------------
 1 file changed, 5 insertions(+), 56 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
index 6575aa9221f..a6b04757959 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java
@@ -1,15 +1,9 @@
 package com.reactnativenavigation.viewcontrollers.navigator;
 
 import android.app.Activity;
-
-import android.content.Context;
 import android.content.res.Configuration;
-import android.graphics.PixelFormat;
-import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
-import android.view.Window;
-import android.view.WindowManager;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
@@ -37,57 +31,19 @@
 import java.util.Collections;
 import java.util.List;
 
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.annotation.RestrictTo;
-import androidx.coordinatorlayout.widget.CoordinatorLayout;
-
-import org.jetbrains.annotations.NotNull;
-
-
 public class Navigator extends ParentController {
-    static class OverlaysLayout extends CoordinatorLayout{
 
-        public OverlaysLayout(@NonNull @NotNull Context context) {
-            super(context);
-        }
-
-        @Override
-        public void onViewAdded(View child) {
-            super.onViewAdded(child);
-            child.setOnTouchListener(new OnTouchListener() {
-                @Override
-                public boolean onTouch(View v, MotionEvent event) {
-                    v.onTouchEvent(event);
-                    return true;
-                }
-            });
-        }
-
-        @Override
-        public boolean onTouchEvent(MotionEvent ev) {
-             super.onTouchEvent(ev);
-             return true;
-        }
-    }
-    public final ModalStack modalStack;
+    private final ModalStack modalStack;
     private final OverlayManager overlayManager;
     private final RootPresenter rootPresenter;
     private ViewController root;
     private ViewController previousRoot;
     private final CoordinatorLayout rootLayout;
     private final CoordinatorLayout modalsLayout;
-    public final OverlaysLayout overlaysLayout;
-
+    private final CoordinatorLayout overlaysLayout;
     private ViewGroup contentLayout;
     private Options defaultOptions = new Options();
-    WindowManager.LayoutParams overlaysLP = new WindowManager.LayoutParams(
-            WindowManager.LayoutParams.MATCH_PARENT,
-            WindowManager.LayoutParams.MATCH_PARENT,
-            WindowManager.LayoutParams.TYPE_APPLICATION,
-            WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE| WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
-                    | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
-            PixelFormat.TRANSPARENT);
+
     @Override
     public void setDefaultOptions(Options defaultOptions) {
         super.setDefaultOptions(defaultOptions);
@@ -110,11 +66,10 @@ public void setEventEmitter(EventEmitter eventEmitter) {
     public void setContentLayout(ViewGroup contentLayout) {
         this.contentLayout = contentLayout;
         contentLayout.addView(rootLayout);
-        final Window window = getActivity().getWindow();
         modalsLayout.setVisibility(View.GONE);
         contentLayout.addView(modalsLayout);
         overlaysLayout.setVisibility(View.GONE);
-        getActivity().getWindowManager().addView(overlaysLayout, overlaysLP);
+        contentLayout.addView(overlaysLayout);
     }
 
     public Navigator(final Activity activity, ChildControllersRegistry childRegistry, ModalStack modalStack, OverlayManager overlayManager, RootPresenter rootPresenter) {
@@ -124,7 +79,7 @@ public Navigator(final Activity activity, ChildControllersRegistry childRegistry
         this.rootPresenter = rootPresenter;
         rootLayout = new CoordinatorLayout(getActivity());
         modalsLayout = new CoordinatorLayout(getActivity());
-        overlaysLayout = new OverlaysLayout(getActivity());
+        overlaysLayout = new CoordinatorLayout(getActivity());
     }
 
     public void bindViews() {
@@ -235,9 +190,6 @@ public void popTo(final String id, Options mergeOptions, CommandListener listene
         }
     }
 
-    public void declareModal(final ViewController viewController){
-        modalStack.declareModal(viewController);
-    }
     public void showModal(final ViewController viewController, CommandListener listener) {
         modalStack.showModal(viewController, root, listener);
     }
@@ -255,9 +207,6 @@ public void dismissAllModals(Options mergeOptions, CommandListener listener) {
     }
 
     public void showOverlay(ViewController overlay, CommandListener listener) {
-        final WindowManager windowManager = getActivity().getWindowManager();
-        windowManager.removeViewImmediate(overlaysLayout);
-        windowManager.addView(overlaysLayout, overlaysLP);
         overlayManager.show(overlaysLayout, overlay, listener);
     }
 

From 37c50eef0387b635b67c9d30187d0a160981ee76 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:44:33 +0300
Subject: [PATCH 23/43] Update TouchablePreview.tsx

---
 lib/src/adapters/TouchablePreview.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/src/adapters/TouchablePreview.tsx b/lib/src/adapters/TouchablePreview.tsx
index 563e5ff6e76..67586395516 100644
--- a/lib/src/adapters/TouchablePreview.tsx
+++ b/lib/src/adapters/TouchablePreview.tsx
@@ -102,7 +102,6 @@ export class TouchablePreview extends React.PureComponent<Props> {
       }
     }
 
-    //@ts-ignore
     this.timeout = setTimeout(this.onTouchEnd, PREVIEW_TIMEOUT);
   };
 

From 04aa5dd55c0f9eb4d0ef3c2180c2009b71bbf9cd Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:58:13 +0300
Subject: [PATCH 24/43] Update LayoutsScreen.tsx

---
 playground/src/screens/LayoutsScreen.tsx | 54 +-----------------------
 1 file changed, 1 insertion(+), 53 deletions(-)

diff --git a/playground/src/screens/LayoutsScreen.tsx b/playground/src/screens/LayoutsScreen.tsx
index ed90e667c9d..711a7e4e961 100644
--- a/playground/src/screens/LayoutsScreen.tsx
+++ b/playground/src/screens/LayoutsScreen.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  RNNModal,
   Options,
   OptionsModalPresentationStyle,
   NavigationComponent,
@@ -13,8 +12,7 @@ import testIDs from '../testIDs';
 import Screens from './Screens';
 import Navigation from '../services/Navigation';
 import { stack } from '../commons/Layouts';
-import { Modal, Text, Image, StyleSheet } from 'react-native';
-import { View } from 'react-native-ui-lib';
+import { Text } from 'react-native';
 
 const {
   WELCOME_SCREEN_HEADER,
@@ -27,8 +25,6 @@ const {
 
 interface State {
   componentDidAppear: boolean;
-  modalVisible: boolean;
-  rnModalVisibile: boolean;
 }
 
 export default class LayoutsScreen extends NavigationComponent<NavigationComponentProps, State> {
@@ -37,8 +33,6 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     Navigation.events().bindComponent(this);
     this.state = {
       componentDidAppear: false,
-      modalVisible: false,
-      rnModalVisibile: false,
     };
   }
 
@@ -63,41 +57,9 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
   render() {
     return (
       <Root componentId={this.props.componentId}>
-        <RNNModal
-          visible={this.state.modalVisible}
-          onRequestDismiss={() => this.setState({ modalVisible: false })}
-        >
-          <Button label="Dismiss Our Modal" onPress={this.toggleModal} />
-          <View style={styles.logoContainer}>
-            <Image
-              style={styles.tinyLogo}
-              source={{
-                uri: 'https://wix.github.io/react-native-navigation/img/logo.png',
-              }}
-            />
-          </View>
-        </RNNModal>
-
-        <Modal
-          visible={this.state.rnModalVisibile}
-          onRequestClose={() => this.setState({ rnModalVisibile: false })}
-        >
-          <Button label="Dismiss RN Modal" onPress={this.toggleRNModal} />
-          <View style={styles.logoContainer}>
-            <Image
-              style={styles.tinyLogo}
-              source={{
-                uri: 'https://reactnative.dev/img/tiny_logo.png',
-              }}
-            />
-          </View>
-        </Modal>
         <Button label="Stack" testID={STACK_BTN} onPress={this.stack} />
         <Button label="BottomTabs" testID={BOTTOM_TABS_BTN} onPress={this.bottomTabs} />
         <Button label="SideMenu" testID={SIDE_MENU_BTN} onPress={this.sideMenu} />
-        <Button label="Toggle modal" onPress={this.toggleModal} />
-        <Button label="Toggle RN modal" onPress={this.toggleRNModal} />
-
         <Button
           label="SplitView"
           testID={SPLIT_VIEW_BUTTON}
@@ -109,8 +71,6 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     );
   }
 
-  toggleRNModal = () => this.setState({ rnModalVisibile: !this.state.rnModalVisibile });
-  toggleModal = () => this.setState({ modalVisible: !this.state.modalVisible });
   stack = () => Navigation.showModal(stack(Screens.Stack, 'StackId'));
 
   bottomTabs = () =>
@@ -216,15 +176,3 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     });
   };
 }
-const styles = StyleSheet.create({
-  logoContainer: {
-    justifyContent: 'center',
-    flex: 1,
-    flexDirection: 'row',
-  },
-  tinyLogo: {
-    justifyContent: 'center',
-    width: 128,
-    height: 128,
-  },
-});

From 6bf9efee441b1af15b53dccd8299e26353c048c6 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 11:59:56 +0300
Subject: [PATCH 25/43] Update testIDs.ts

---
 playground/src/testIDs.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/playground/src/testIDs.ts b/playground/src/testIDs.ts
index cd184d46db2..758db87ca9d 100644
--- a/playground/src/testIDs.ts
+++ b/playground/src/testIDs.ts
@@ -191,7 +191,6 @@ const testIDs = {
   SIDE_MENU_LEFT_DRAWER_WIDTH_TEXT: 'SIDE_MENU_LEFT_DRAWER_WIDTH_TEXT',
   SIDE_MENU_RIGHT_DRAWER_WIDTH_TEXT: 'SIDE_MENU_RIGHT_DRAWER_WIDTH_TEXT',
   TOGGLE_REACT_NATIVE_MODAL: 'TOGGLE_REACT_NATIVE_MODAL',
-  SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL: 'SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL',
 
   //External Component Buttons
   EXTERNAL_DISMISS_MODAL_BTN: 'EXTERNAL_DISMISS_MODAL_BTN',

From e391f6854c555eac5f39683bb69d01e0d9089a01 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 12:00:03 +0300
Subject: [PATCH 26/43] Update TouchablePreview.tsx

---
 lib/src/adapters/TouchablePreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/src/adapters/TouchablePreview.tsx b/lib/src/adapters/TouchablePreview.tsx
index 67586395516..fb2e743501d 100644
--- a/lib/src/adapters/TouchablePreview.tsx
+++ b/lib/src/adapters/TouchablePreview.tsx
@@ -101,7 +101,7 @@ export class TouchablePreview extends React.PureComponent<Props> {
         this.props.onPeekIn();
       }
     }
-
+    //@ts-ignore
     this.timeout = setTimeout(this.onTouchEnd, PREVIEW_TIMEOUT);
   };
 

From 368595c17a8e72396ae2119f2d73fc783e5ac615 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 12:00:07 +0300
Subject: [PATCH 27/43] Update ModalScreen.tsx

---
 playground/src/screens/ModalScreen.tsx | 81 +++++++++++++++++---------
 1 file changed, 53 insertions(+), 28 deletions(-)

diff --git a/playground/src/screens/ModalScreen.tsx b/playground/src/screens/ModalScreen.tsx
index c6bb0a2ca2c..76f5c8edae3 100644
--- a/playground/src/screens/ModalScreen.tsx
+++ b/playground/src/screens/ModalScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationComponent } from 'react-native-navigation';
+import { NavigationComponent, RNNModal } from 'react-native-navigation';
 import last from 'lodash/last';
 import concat from 'lodash/concat';
 import forEach from 'lodash/forEach';
@@ -12,7 +12,9 @@ import { stack } from '../commons/Layouts';
 import Screens from './Screens';
 import flags from '../flags';
 import testIDs from '../testIDs';
-import { Dimensions } from 'react-native';
+import { Dimensions, Modal, Image, Platform, StyleSheet } from 'react-native';
+import { View } from 'react-native-ui-lib';
+
 const height = Math.round(Dimensions.get('window').height);
 const MODAL_ANIMATION_DURATION = 350;
 const {
@@ -30,7 +32,7 @@ const {
   DISMISS_FIRST_MODAL_BTN,
   SET_ROOT,
   TOGGLE_REACT_NATIVE_MODAL,
-  // SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL,
+  DISMISS_BTN,
 } = testIDs;
 
 interface Props {
@@ -40,7 +42,7 @@ interface Props {
 
 interface State {
   swipeableToDismiss: boolean;
-  reactNativeModalVisible: boolean;
+  modalVisible: boolean;
 }
 
 export default class ModalScreen extends NavigationComponent<Props, State> {
@@ -59,7 +61,7 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
     super(props);
     this.state = {
       swipeableToDismiss: false,
-      reactNativeModalVisible: false,
+      modalVisible: false,
     };
   }
 
@@ -128,27 +130,38 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
           testID={TOGGLE_REACT_NATIVE_MODAL}
           onPress={this.toggleModal}
         />
-
-        {/* <Modal visible={this.state.reactNativeModalVisible} animationType={'slide'}>
-          <Root componentId={this.props.componentId} footer={`ReactNative modal in action!`}>
-            <Button label="Toggle react-native modal" onPress={this.toggleModal} />
-            <Button label="Show overlay" onPress={this.showOverlay} />
-            <Button label="Show RN modal" onPress={this.showRNModal} />
-
-            <Button
-              label="Present another modal and dismiss current modal"
-              testID={SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL}
-              onPress={async () => {
-                this.toggleModal();
-                await Navigation.showModal({
-                  component: {
-                    name: Screens.Modal,
-                  },
-                });
-              }}
-            />
-          </Root>
-        </Modal> */}
+        {Platform.OS === 'android' && (
+          <RNNModal
+            visible={this.state.modalVisible}
+            onRequestDismiss={() => this.setState({ modalVisible: false })}
+          >
+            <Button label="Dismiss Our Modal" testID={DISMISS_BTN} onPress={this.toggleModal} />
+            <View style={styles.logoContainer}>
+              <Image
+                style={styles.tinyLogo}
+                source={{
+                  uri: 'https://wix.github.io/react-native-navigation/img/logo.png',
+                }}
+              />
+            </View>
+          </RNNModal>
+        )}
+        {Platform.OS === 'ios' && (
+          <Modal
+            visible={this.state.modalVisible}
+            onRequestClose={() => this.setState({ modalVisible: false })}
+          >
+            <Button label="Dismiss RN Modal" onPress={this.toggleModal} />
+            <View style={styles.logoContainer}>
+              <Image
+                style={styles.tinyLogo}
+                source={{
+                  uri: 'https://reactnative.dev/img/tiny_logo.png',
+                }}
+              />
+            </View>
+          </Modal>
+        )}
       </Root>
     );
   }
@@ -166,8 +179,7 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
       layout: { componentBackgroundColor: 'transparent' },
     });
   };
-  toggleModal = () =>
-    this.setState({ reactNativeModalVisible: !this.state.reactNativeModalVisible });
+  toggleModal = () => this.setState({ modalVisible: !this.state.modalVisible });
 
   showModalWithTransition = () => {
     Navigation.showModal({
@@ -306,3 +318,16 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
 
   getPreviousModalId = () => last(this.props.previousModalIds)!;
 }
+
+const styles = StyleSheet.create({
+  logoContainer: {
+    justifyContent: 'center',
+    flex: 1,
+    flexDirection: 'row',
+  },
+  tinyLogo: {
+    justifyContent: 'center',
+    width: 128,
+    height: 128,
+  },
+});

From 9b49d9fc961ca9042ce9418ac8af210a0af89fb7 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 12:08:41 +0300
Subject: [PATCH 28/43] Update ModalScreen.tsx

---
 playground/src/screens/ModalScreen.tsx | 37 +++++++++++++++++---------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/playground/src/screens/ModalScreen.tsx b/playground/src/screens/ModalScreen.tsx
index 76f5c8edae3..4ae069b916a 100644
--- a/playground/src/screens/ModalScreen.tsx
+++ b/playground/src/screens/ModalScreen.tsx
@@ -21,6 +21,8 @@ const {
   PUSH_BTN,
   MODAL_SCREEN_HEADER,
   MODAL_BTN,
+  SHOW_MODAL_FROM_DECLARED_BUTTON,
+  OVERLAY_BTN,
   MODAL_DISABLED_BACK_BTN,
   DISMISS_MODAL_BTN,
   DISMISS_UNKNOWN_MODAL_BTN,
@@ -32,7 +34,6 @@ const {
   DISMISS_FIRST_MODAL_BTN,
   SET_ROOT,
   TOGGLE_REACT_NATIVE_MODAL,
-  DISMISS_BTN,
 } = testIDs;
 
 interface Props {
@@ -126,7 +127,7 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
         <Button label="Push" testID={PUSH_BTN} onPress={this.push} />
         <Button label="Set Root" testID={SET_ROOT} onPress={this.setRoot} />
         <Button
-          label="Toggle react-native modal"
+          label="Toggle declared modal"
           testID={TOGGLE_REACT_NATIVE_MODAL}
           onPress={this.toggleModal}
         />
@@ -135,7 +136,17 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
             visible={this.state.modalVisible}
             onRequestDismiss={() => this.setState({ modalVisible: false })}
           >
-            <Button label="Dismiss Our Modal" testID={DISMISS_BTN} onPress={this.toggleModal} />
+            <Button
+              label="Dismiss declared Modal"
+              testID={DISMISS_MODAL_BTN}
+              onPress={this.toggleModal}
+            />
+            <Button
+              label="Show Modal"
+              testID={SHOW_MODAL_FROM_DECLARED_BUTTON}
+              onPress={this.showModal}
+            />
+            <Button label="Show Overlay" testID={OVERLAY_BTN} onPress={this.showOverlay} />
             <View style={styles.logoContainer}>
               <Image
                 style={styles.tinyLogo}
@@ -151,7 +162,17 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
             visible={this.state.modalVisible}
             onRequestClose={() => this.setState({ modalVisible: false })}
           >
-            <Button label="Dismiss RN Modal" onPress={this.toggleModal} />
+            <Button
+              label="Dismiss declared Modal"
+              testID={DISMISS_MODAL_BTN}
+              onPress={this.toggleModal}
+            />
+            <Button
+              label="Show Modal"
+              testID={SHOW_MODAL_FROM_DECLARED_BUTTON}
+              onPress={this.showModal}
+            />
+            <Button label="Show Overlay" testID={OVERLAY_BTN} onPress={this.showOverlay} />
             <View style={styles.logoContainer}>
               <Image
                 style={styles.tinyLogo}
@@ -166,14 +187,6 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
     );
   }
 
-  showRNModal = async () => {
-    await Navigation.showModal({
-      component: {
-        name: Screens.Stack,
-      },
-    });
-  };
-
   showOverlay = async () => {
     await Navigation.showOverlay(Screens.OverlayAlert, {
       layout: { componentBackgroundColor: 'transparent' },

From 76f246419c2cf6ec68ef978022adc197b1c6785b Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 12:08:46 +0300
Subject: [PATCH 29/43] Update testIDs.ts

---
 playground/src/testIDs.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/playground/src/testIDs.ts b/playground/src/testIDs.ts
index 758db87ca9d..2a249291350 100644
--- a/playground/src/testIDs.ts
+++ b/playground/src/testIDs.ts
@@ -20,6 +20,7 @@ const testIDs = {
   MODAL_COMMANDS_BTN: 'MODAL_COMMANDS_BTN',
   STACK_COMMANDS_BTN: 'STACK_COMMANDS_BTN',
   MODAL_BTN: 'SHOW_MODAL_BUTTON',
+  SHOW_MODAL_FROM_DECLARED_BUTTON: 'SHOW_MODAL_FROM_DECLARED_BUTTON',
   MODAL_DISABLED_BACK_BTN: 'SHOW_MODAL_DISABLED_BACK_BTN',
   PAGE_SHEET_MODAL_BTN: 'SHOW_PAGE_SHEET_MODAL_BUTTON',
   DISMISS_MODAL_BTN: 'DISMISS_MODAL_BUTTON',

From 900de0fa3774d87645fc1ea0ef0d92ddaa19fe39 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 12:25:22 +0300
Subject: [PATCH 30/43] add more e2e tests

---
 e2e/Modals.test.js                     | 49 ++++++++++++++++++++++----
 playground/src/screens/ModalScreen.tsx |  4 +--
 playground/src/testIDs.ts              |  2 +-
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/e2e/Modals.test.js b/e2e/Modals.test.js
index 07663823d42..2944dba71b4 100644
--- a/e2e/Modals.test.js
+++ b/e2e/Modals.test.js
@@ -155,17 +155,52 @@ describe('modal', () => {
     await expect(elementByLabel('dismissModal promise resolved with: UniqueStackId')).toBeVisible();
   });
 
-  it('dismiss previous react-native modal', async () => {
-    await elementById(TestIDs.TOGGLE_REACT_NATIVE_MODAL).tap();
-    await elementById(TestIDs.SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL).tap();
+  it.e2e('should show declated modal', async () => {
+    await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+    await expect(elementByLabel("Dismiss declared Modal")).toBeVisible();
     await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
     await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
   });
 
-  it.only('overlay should be clickable when using react-native modal', async () => {
-    await elementById(TestIDs.TOGGLE_REACT_NATIVE_MODAL).tap();
-    await elementById(TestIDs.SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL).tap();
+  it.e2e('should show and dismiss multiple modals including declared modal', async () => {
+    await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+    await elementById(TestIDs.SHOW_MODAL_FROM_DECLARED_BUTTON).tap();
+    await expect(elementByLabel("Toggle declared modal")).toBeVisible();
+    await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await expect(elementByLabel("Dismiss declared Modal")).toBeVisible();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+
+    await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+  });
+
+  it.e2e('overlay should be on top of all modals', async () => {
+    await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+    await elementById(TestIDs.OVERLAY_BTN).tap();
+    await expect(elementByLabel("Dismiss declared Modal")).toBeVisible();
+    await expect(elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON)).toBeVisible();
+   
+    await elementById(TestIDs.SHOW_MODAL_FROM_DECLARED_BUTTON).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+
+    await elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON).tap();
+  });
+
+
+
+  it.e2e(':android: should handle back properly', async () => {
+    await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+    await elementById(TestIDs.SHOW_MODAL_FROM_DECLARED_BUTTON).tap();
+    await expect(elementByLabel("Toggle declared modal")).toBeVisible();
+    
+    Android.pressBack();
+    
+    await expect(elementByLabel("Dismiss declared Modal")).toBeVisible();
+
+    Android.pressBack();
+
     await elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON).tap();
-    await expect(elementByLabel('ReactNative modal in action!')).toBeVisible();
   });
 });
diff --git a/playground/src/screens/ModalScreen.tsx b/playground/src/screens/ModalScreen.tsx
index 4ae069b916a..594c712c0be 100644
--- a/playground/src/screens/ModalScreen.tsx
+++ b/playground/src/screens/ModalScreen.tsx
@@ -33,7 +33,7 @@ const {
   DISMISS_ALL_MODALS_BTN,
   DISMISS_FIRST_MODAL_BTN,
   SET_ROOT,
-  TOGGLE_REACT_NATIVE_MODAL,
+  TOGGLE_REACT_DECLARED_MODAL,
 } = testIDs;
 
 interface Props {
@@ -128,7 +128,7 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
         <Button label="Set Root" testID={SET_ROOT} onPress={this.setRoot} />
         <Button
           label="Toggle declared modal"
-          testID={TOGGLE_REACT_NATIVE_MODAL}
+          testID={TOGGLE_REACT_DECLARED_MODAL}
           onPress={this.toggleModal}
         />
         {Platform.OS === 'android' && (
diff --git a/playground/src/testIDs.ts b/playground/src/testIDs.ts
index 2a249291350..4f704c33cb2 100644
--- a/playground/src/testIDs.ts
+++ b/playground/src/testIDs.ts
@@ -191,7 +191,7 @@ const testIDs = {
   SIDE_MENU_LEFT_DRAWER_HEIGHT_TEXT: 'SIDE_MENU_LEFT_DRAWER_HEIGHT_TEXT',
   SIDE_MENU_LEFT_DRAWER_WIDTH_TEXT: 'SIDE_MENU_LEFT_DRAWER_WIDTH_TEXT',
   SIDE_MENU_RIGHT_DRAWER_WIDTH_TEXT: 'SIDE_MENU_RIGHT_DRAWER_WIDTH_TEXT',
-  TOGGLE_REACT_NATIVE_MODAL: 'TOGGLE_REACT_NATIVE_MODAL',
+  TOGGLE_REACT_DECLARED_MODAL: 'TOGGLE_REACT_DECLARED_MODAL',
 
   //External Component Buttons
   EXTERNAL_DISMISS_MODAL_BTN: 'EXTERNAL_DISMISS_MODAL_BTN',

From c7f38262c2895d2f5a7a5307d0853cb39568edf6 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 13:17:16 +0300
Subject: [PATCH 31/43] Update NavigationActivity.java

---
 .../main/java/com/reactnativenavigation/NavigationActivity.java | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java b/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java
index 8458ee0e667..5d757542f4a 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java
@@ -30,7 +30,7 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
     @Nullable
     private PermissionListener mPermissionListener;
     
-    private Navigator navigator;
+    protected Navigator navigator;
 
     @Override
     protected void onCreate(@Nullable Bundle savedInstanceState) {

From fafc170e2808f411aba7d6a64238a13d1f33cb1a Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 13:47:08 +0300
Subject: [PATCH 32/43] fix tests

---
 e2e/Modals.test.js                     | 4 +++-
 playground/src/screens/ModalScreen.tsx | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/e2e/Modals.test.js b/e2e/Modals.test.js
index 2944dba71b4..9379f324453 100644
--- a/e2e/Modals.test.js
+++ b/e2e/Modals.test.js
@@ -182,6 +182,8 @@ describe('modal', () => {
     await expect(elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON)).toBeVisible();
    
     await elementById(TestIDs.SHOW_MODAL_FROM_DECLARED_BUTTON).tap();
+    await expect(elementByLabel("Modal Lifecycle")).toBeVisible();
+
     await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
     await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
 
@@ -201,6 +203,6 @@ describe('modal', () => {
 
     Android.pressBack();
 
-    await elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON).tap();
+    await expect(elementByLabel("Toggle declared modal")).toBeVisible();
   });
 });
diff --git a/playground/src/screens/ModalScreen.tsx b/playground/src/screens/ModalScreen.tsx
index 594c712c0be..b9ca1c9b417 100644
--- a/playground/src/screens/ModalScreen.tsx
+++ b/playground/src/screens/ModalScreen.tsx
@@ -190,6 +190,7 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
   showOverlay = async () => {
     await Navigation.showOverlay(Screens.OverlayAlert, {
       layout: { componentBackgroundColor: 'transparent' },
+      overlay: { interceptTouchOutside: false },
     });
   };
   toggleModal = () => this.setState({ modalVisible: !this.state.modalVisible });

From a013e2868ff7fb1cbb3e4237837348722845011f Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 13:54:18 +0300
Subject: [PATCH 33/43] Update build.gradle

---
 playground/android/app/build.gradle | 1 -
 1 file changed, 1 deletion(-)

diff --git a/playground/android/app/build.gradle b/playground/android/app/build.gradle
index a881bb5c8df..7581e6895af 100644
--- a/playground/android/app/build.gradle
+++ b/playground/android/app/build.gradle
@@ -8,7 +8,6 @@ project.ext.react = [
         bundleInAlpha: true,
         bundleInBeta: true,
         enableHermes: enableHermes,
-        nodeExecutableAndArgs:['/usr/local/bin/node'],
         hermesFlagsDebug:['-Xes6-proxy','-output-source-map'],
         hermesFlagsRelease:['-output-source-map'],
         hermesCommand: "../../../node_modules/hermes-engine/%OS-BIN%/hermesc",

From 728b69cbdbbe529862bb0223b74489a726a7d942 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 13:55:35 +0300
Subject: [PATCH 34/43] Squashed commit of the following:

commit 102b7184fc0cf1a1dfd177a8766cc463a72dfeb5
Author: Sergei Butko <svbutko@hotmail.com>
Date:   Thu Sep 30 12:59:05 2021 +0300

    Add callback as optional parameter to updateProps (#7277)

    * Add callback as optional parameter to updateProps

    * Add optional callback to NavigationDelegate

    * Add tests to Store and ComponentWrapper

    Co-authored-by: Ward Abbass <warda@wix.com>

commit 92bbcc17c50d079617d2b8a03e8682faffd278aa
Author: Jordan Becker <jordanbeckerfr@gmail.com>
Date:   Thu Sep 30 10:32:22 2021 +0200

    Fix iOS 15 bars appearance (#7270)

    Following #7266 and especially [my comment there](https://github.com/wix/react-native-navigation/issues/7266#issuecomment-925706532), I'm opening this PR to provide a quick fix to people experiencing issues when building RNN using Xcode 13.

    This should be considered a fix PR rather than a feature PR, as what it's doing is basically duplicating the already set `standardAppearance` to a `scrollEdgeAppearance`. What this means is that the bars will have the same visual aspect whether they're displayed alongside the edge of a scroll view.

    In a future, more elaborate PR, we could imagine a way to be able to provide `scrollEdgeAppearance` values from JS for more control over the native bars.

    Fixes #7266
    Fixes #7268

    Co-authored-by: Yogev Ben David <yogev132@gmail.com>

commit f87e1ca6b34e0942ee0826e72d25efd0c45edc55
Author: Sergei Butko <svbutko@hotmail.com>
Date:   Thu Sep 30 01:06:36 2021 +0300

    Remove default splash layout color on Android (#7276)

    Co-authored-by: Ward Abbass <warda@wix.com>

commit a207f62db83a496c7648c6bb66869946ad3bb545
Author: Tom Spencer <tom.spencer@studiozeffa.com>
Date:   Wed Sep 29 15:44:15 2021 +0100

    Fix sideMenu docs (#7275)

    Updated the example using `Navigation.mergeOptions` to open the side menu with the correct first argument.
---
 .../NavigationActivity.java                   |  3 +-
 lib/ios/BottomTabAppearancePresenter.h        |  6 ---
 lib/ios/BottomTabAppearancePresenter.m        | 12 ------
 lib/ios/BottomTabPresenter.h                  |  5 ++-
 lib/ios/BottomTabPresenter.m                  | 14 +++++--
 lib/ios/BottomTabPresenterCreator.m           | 15 ++++++--
 lib/ios/BottomTabsAppearancePresenter.m       | 33 +++++++++++++++--
 lib/ios/RNNBottomTabsController.m             |  5 +++
 lib/ios/RNNTabBarItemCreator.h                |  8 ++--
 lib/ios/RNNTabBarItemCreator.m                | 14 +++----
 .../project.pbxproj                           | 16 ++++----
 lib/ios/TabBarItemAppearanceCreator.m         |  6 +--
 lib/ios/TabBarItemIOS15Creator.h              |  6 +++
 lib/ios/TabBarItemIOS15Creator.m              | 37 +++++++++++++++++++
 lib/ios/UIViewController+RNNOptions.m         |  7 ++++
 lib/src/Navigation.ts                         |  4 +-
 lib/src/NavigationDelegate.ts                 |  4 +-
 lib/src/commands/Commands.test.ts             | 13 +++++++
 lib/src/commands/Commands.ts                  |  4 +-
 lib/src/components/ComponentWrapper.test.tsx  | 13 +++++++
 lib/src/components/ComponentWrapper.tsx       | 19 ++++++----
 lib/src/components/Store.test.ts              | 13 +++++++
 lib/src/components/Store.ts                   |  4 +-
 .../NavigationTests/BottomTabPresenterTest.m  |  9 +++--
 website/docs/api/api-component.mdx            |  9 +++--
 website/docs/docs/docs-sideMenu.mdx           |  2 +-
 26 files changed, 202 insertions(+), 79 deletions(-)
 delete mode 100644 lib/ios/BottomTabAppearancePresenter.h
 delete mode 100644 lib/ios/BottomTabAppearancePresenter.m
 create mode 100644 lib/ios/TabBarItemIOS15Creator.h
 create mode 100644 lib/ios/TabBarItemIOS15Creator.m

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java b/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java
index 5d757542f4a..121b64e876a 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java
@@ -29,7 +29,7 @@
 public class NavigationActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler, PermissionAwareActivity, JsDevReloadHandler.ReloadListener {
     @Nullable
     private PermissionListener mPermissionListener;
-    
+
     protected Navigator navigator;
 
     @Override
@@ -146,7 +146,6 @@ public void onReload() {
 
     protected void addDefaultSplashLayout() {
         View view = new View(this);
-        view.setBackgroundColor(Color.WHITE);
         setContentView(view);
     }
 
diff --git a/lib/ios/BottomTabAppearancePresenter.h b/lib/ios/BottomTabAppearancePresenter.h
deleted file mode 100644
index 928fdc2bee0..00000000000
--- a/lib/ios/BottomTabAppearancePresenter.h
+++ /dev/null
@@ -1,6 +0,0 @@
-#import "BottomTabPresenter.h"
-
-API_AVAILABLE(ios(13.0))
-@interface BottomTabAppearancePresenter : BottomTabPresenter
-
-@end
diff --git a/lib/ios/BottomTabAppearancePresenter.m b/lib/ios/BottomTabAppearancePresenter.m
deleted file mode 100644
index 8a7c16f1342..00000000000
--- a/lib/ios/BottomTabAppearancePresenter.m
+++ /dev/null
@@ -1,12 +0,0 @@
-#import "BottomTabAppearancePresenter.h"
-#import "TabBarItemAppearanceCreator.h"
-
-@implementation BottomTabAppearancePresenter
-
-- (void)createTabBarItem:(UIViewController *)child
-        bottomTabOptions:(RNNBottomTabOptions *)bottomTabOptions {
-    child.tabBarItem = [TabBarItemAppearanceCreator createTabBarItem:bottomTabOptions
-                                                           mergeItem:child.tabBarItem];
-}
-
-@end
diff --git a/lib/ios/BottomTabPresenter.h b/lib/ios/BottomTabPresenter.h
index 3964a853e74..6750519d872 100644
--- a/lib/ios/BottomTabPresenter.h
+++ b/lib/ios/BottomTabPresenter.h
@@ -1,7 +1,10 @@
 #import "RNNBasePresenter.h"
-
+#import "RNNTabBarItemCreator.h"
 @interface BottomTabPresenter : RNNBasePresenter
 
+- (instancetype)initWithDefaultOptions:(RNNNavigationOptions *)defaultOptions
+                            tabCreator:(RNNTabBarItemCreator *)tabCreator;
+
 - (void)applyOptions:(RNNNavigationOptions *)options child:(UIViewController *)child;
 
 - (void)applyOptionsOnWillMoveToParentViewController:(RNNNavigationOptions *)options
diff --git a/lib/ios/BottomTabPresenter.m b/lib/ios/BottomTabPresenter.m
index bb2558e9f38..d2b59c2fcb2 100644
--- a/lib/ios/BottomTabPresenter.m
+++ b/lib/ios/BottomTabPresenter.m
@@ -3,7 +3,16 @@
 #import "UIViewController+LayoutProtocol.h"
 #import "UIViewController+RNNOptions.h"
 
-@implementation BottomTabPresenter
+@implementation BottomTabPresenter {
+    RNNTabBarItemCreator *_tabCreator;
+}
+
+- (instancetype)initWithDefaultOptions:(RNNNavigationOptions *)defaultOptions
+                            tabCreator:(RNNTabBarItemCreator *)tabCreator {
+    self = [super initWithDefaultOptions:defaultOptions];
+    _tabCreator = tabCreator;
+    return self;
+}
 
 - (void)applyOptions:(RNNNavigationOptions *)options child:(UIViewController *)child {
     RNNNavigationOptions *withDefault = [options withDefault:self.defaultOptions];
@@ -37,8 +46,7 @@ - (void)mergeOptions:(RNNNavigationOptions *)mergeOptions
 
 - (void)createTabBarItem:(UIViewController *)child
         bottomTabOptions:(RNNBottomTabOptions *)bottomTabOptions {
-    child.tabBarItem = [RNNTabBarItemCreator createTabBarItem:bottomTabOptions
-                                                    mergeItem:child.tabBarItem];
+    child.tabBarItem = [_tabCreator createTabBarItem:bottomTabOptions mergeItem:child.tabBarItem];
 }
 
 @end
diff --git a/lib/ios/BottomTabPresenterCreator.m b/lib/ios/BottomTabPresenterCreator.m
index 4b4ad02c3f6..e2246e59c50 100644
--- a/lib/ios/BottomTabPresenterCreator.m
+++ b/lib/ios/BottomTabPresenterCreator.m
@@ -1,14 +1,21 @@
 #import "BottomTabPresenterCreator.h"
-#import "BottomTabAppearancePresenter.h"
+#import "RNNTabBarItemCreator.h"
+#import "TabBarItemAppearanceCreator.h"
+#import "TabBarItemIOS15Creator.h"
 
 @implementation BottomTabPresenterCreator
 
 + (BottomTabPresenter *)createWithDefaultOptions:(RNNNavigationOptions *)defaultOptions {
-    if (@available(iOS 13.0, *)) {
-        return [[BottomTabAppearancePresenter alloc] initWithDefaultOptions:defaultOptions];
+    RNNTabBarItemCreator *tabCreator;
+    if (@available(iOS 15.0, *)) {
+        tabCreator = [TabBarItemIOS15Creator new];
+    } else if (@available(iOS 13.0, *)) {
+        tabCreator = [TabBarItemAppearanceCreator new];
     } else {
-        return [[BottomTabPresenter alloc] initWithDefaultOptions:defaultOptions];
+        tabCreator = [RNNTabBarItemCreator new];
     }
+
+    return [[BottomTabPresenter alloc] initWithDefaultOptions:defaultOptions tabCreator:tabCreator];
 }
 
 @end
diff --git a/lib/ios/BottomTabsAppearancePresenter.m b/lib/ios/BottomTabsAppearancePresenter.m
index 85cfcc502db..afd3e9cf9fe 100644
--- a/lib/ios/BottomTabsAppearancePresenter.m
+++ b/lib/ios/BottomTabsAppearancePresenter.m
@@ -28,8 +28,14 @@ - (void)applyTabBarBorder:(RNNBottomTabsOptions *)options {
 
 - (void)setTabBarBackgroundColor:(UIColor *)backgroundColor {
     [self setTabBarOpaqueBackground];
-    for (UIViewController *childViewController in self.tabBarController.childViewControllers)
+    for (UIViewController *childViewController in self.tabBarController.childViewControllers) {
         childViewController.tabBarItem.standardAppearance.backgroundColor = backgroundColor;
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+        if (@available(iOS 15.0, *)) {
+            childViewController.tabBarItem.scrollEdgeAppearance.backgroundColor = backgroundColor;
+        }
+#endif
+    }
 }
 
 - (void)setTabBarTranslucent:(BOOL)translucent {
@@ -46,18 +52,37 @@ - (void)setTabBarDefaultBackground {
 }
 
 - (void)setTabBarTranslucentBackground {
-    for (UIViewController *childViewController in self.tabBarController.childViewControllers)
+    for (UIViewController *childViewController in self.tabBarController.childViewControllers) {
         [childViewController.tabBarItem.standardAppearance configureWithDefaultBackground];
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+        if (@available(iOS 15.0, *)) {
+            [childViewController.tabBarItem.scrollEdgeAppearance configureWithDefaultBackground];
+        }
+#endif
+    }
 }
 
 - (void)setTabBarTransparentBackground {
-    for (UIViewController *childViewController in self.tabBarController.childViewControllers)
+    for (UIViewController *childViewController in self.tabBarController.childViewControllers) {
         [childViewController.tabBarItem.standardAppearance configureWithTransparentBackground];
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+        if (@available(iOS 15.0, *)) {
+            [childViewController.tabBarItem
+                    .scrollEdgeAppearance configureWithTransparentBackground];
+        }
+#endif
+    }
 }
 
 - (void)setTabBarOpaqueBackground {
-    for (UIViewController *childViewController in self.tabBarController.childViewControllers)
+    for (UIViewController *childViewController in self.tabBarController.childViewControllers) {
         [childViewController.tabBarItem.standardAppearance configureWithOpaqueBackground];
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+        if (@available(iOS 15.0, *)) {
+            [childViewController.tabBarItem.scrollEdgeAppearance configureWithOpaqueBackground];
+        }
+#endif
+    }
 }
 
 @end
diff --git a/lib/ios/RNNBottomTabsController.m b/lib/ios/RNNBottomTabsController.m
index 0472198cffc..adf23aa1245 100644
--- a/lib/ios/RNNBottomTabsController.m
+++ b/lib/ios/RNNBottomTabsController.m
@@ -40,6 +40,11 @@ - (instancetype)initWithLayoutInfo:(RNNLayoutInfo *)layoutInfo
     if (@available(iOS 13.0, *)) {
         self.tabBar.standardAppearance = [UITabBarAppearance new];
     }
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+    if (@available(iOS 15.0, *)) {
+        self.tabBar.scrollEdgeAppearance = [UITabBarAppearance new];
+    }
+#endif
 
     self.longPressRecognizer =
         [[UILongPressGestureRecognizer alloc] initWithTarget:self
diff --git a/lib/ios/RNNTabBarItemCreator.h b/lib/ios/RNNTabBarItemCreator.h
index 97f223ede79..127e0c31c7d 100644
--- a/lib/ios/RNNTabBarItemCreator.h
+++ b/lib/ios/RNNTabBarItemCreator.h
@@ -4,14 +4,14 @@
 
 @interface RNNTabBarItemCreator : NSObject
 
-+ (UITabBarItem *)createTabBarItem:(RNNBottomTabOptions *)bottomTabOptions
+- (UITabBarItem *)createTabBarItem:(RNNBottomTabOptions *)bottomTabOptions
                          mergeItem:(UITabBarItem *)mergeItem;
 
-+ (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem;
+- (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem;
 
-+ (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes;
+- (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes;
 
-+ (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
+- (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
            selectedTitleAttributes:(NSDictionary *)selectedTitleAttributes;
 
 @end
diff --git a/lib/ios/RNNTabBarItemCreator.m b/lib/ios/RNNTabBarItemCreator.m
index eb9fbd14216..063b732d4d9 100644
--- a/lib/ios/RNNTabBarItemCreator.m
+++ b/lib/ios/RNNTabBarItemCreator.m
@@ -4,11 +4,11 @@
 
 @implementation RNNTabBarItemCreator
 
-+ (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem {
+- (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem {
     return [UITabBarItem new];
 }
 
-+ (UITabBarItem *)createTabBarItem:(RNNBottomTabOptions *)bottomTabOptions
+- (UITabBarItem *)createTabBarItem:(RNNBottomTabOptions *)bottomTabOptions
                          mergeItem:(UITabBarItem *)mergeItem {
     UITabBarItem *tabItem = [self createTabBarItem:mergeItem];
     UIImage *icon = [bottomTabOptions.icon withDefault:nil];
@@ -44,7 +44,7 @@ + (UITabBarItem *)createTabBarItem:(RNNBottomTabOptions *)bottomTabOptions
     return tabItem;
 }
 
-+ (UIImage *)getSelectedIconImage:(UIImage *)selectedIcon
+- (UIImage *)getSelectedIconImage:(UIImage *)selectedIcon
                 selectedIconColor:(UIColor *)selectedIconColor {
     if (selectedIcon) {
         if (selectedIconColor) {
@@ -58,7 +58,7 @@ + (UIImage *)getSelectedIconImage:(UIImage *)selectedIcon
     return nil;
 }
 
-+ (UIImage *)getIconImage:(UIImage *)icon withTint:(UIColor *)tintColor {
+- (UIImage *)getIconImage:(UIImage *)icon withTint:(UIColor *)tintColor {
     if (icon) {
         if (tintColor) {
             return [[icon withTintColor:tintColor]
@@ -71,7 +71,7 @@ + (UIImage *)getIconImage:(UIImage *)icon withTint:(UIColor *)tintColor {
     return nil;
 }
 
-+ (void)appendTitleAttributes:(UITabBarItem *)tabItem
+- (void)appendTitleAttributes:(UITabBarItem *)tabItem
              bottomTabOptions:(RNNBottomTabOptions *)bottomTabOptions {
     UIColor *textColor = [bottomTabOptions.textColor withDefault:[UIColor blackColor]];
     UIColor *selectedTextColor =
@@ -97,11 +97,11 @@ + (void)appendTitleAttributes:(UITabBarItem *)tabItem
     [self setTitleAttributes:tabItem titleAttributes:normalAttributes];
 }
 
-+ (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes {
+- (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes {
     [tabItem setTitleTextAttributes:titleAttributes forState:UIControlStateNormal];
 }
 
-+ (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
+- (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
            selectedTitleAttributes:(NSDictionary *)selectedTitleAttributes {
     [tabItem setTitleTextAttributes:selectedTitleAttributes forState:UIControlStateSelected];
 }
diff --git a/lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj b/lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj
index cddd07d5308..3de213897ca 100644
--- a/lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj
+++ b/lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj
@@ -94,8 +94,6 @@
 		50206A6D21AFE75400B7BB1A /* RNNSideMenuParserTest.m in Sources */ = {isa = PBXBuildFile; fileRef = 50206A6C21AFE75400B7BB1A /* RNNSideMenuParserTest.m */; };
 		5022EDB52405224B00852BA6 /* BottomTabPresenter.h in Headers */ = {isa = PBXBuildFile; fileRef = 5022EDB32405224B00852BA6 /* BottomTabPresenter.h */; };
 		5022EDB62405224B00852BA6 /* BottomTabPresenter.m in Sources */ = {isa = PBXBuildFile; fileRef = 5022EDB42405224B00852BA6 /* BottomTabPresenter.m */; };
-		5022EDB92405226800852BA6 /* BottomTabAppearancePresenter.h in Headers */ = {isa = PBXBuildFile; fileRef = 5022EDB72405226800852BA6 /* BottomTabAppearancePresenter.h */; };
-		5022EDBA2405226800852BA6 /* BottomTabAppearancePresenter.m in Sources */ = {isa = PBXBuildFile; fileRef = 5022EDB82405226800852BA6 /* BottomTabAppearancePresenter.m */; };
 		5022EDBD2405237100852BA6 /* BottomTabPresenterCreator.h in Headers */ = {isa = PBXBuildFile; fileRef = 5022EDBB2405237100852BA6 /* BottomTabPresenterCreator.h */; };
 		5022EDBE2405237100852BA6 /* BottomTabPresenterCreator.m in Sources */ = {isa = PBXBuildFile; fileRef = 5022EDBC2405237100852BA6 /* BottomTabPresenterCreator.m */; };
 		5022EDC124053C9F00852BA6 /* TabBarItemAppearanceCreator.h in Headers */ = {isa = PBXBuildFile; fileRef = 5022EDBF24053C9F00852BA6 /* TabBarItemAppearanceCreator.h */; };
@@ -375,6 +373,8 @@
 		50E5F792223FA04C002AFEAD /* TransitionDetailsOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50E5F790223FA04C002AFEAD /* TransitionDetailsOptions.m */; };
 		50E5F7952240EBD6002AFEAD /* RNNAnimationsTransitionDelegate.h in Headers */ = {isa = PBXBuildFile; fileRef = 50E5F7932240EBD6002AFEAD /* RNNAnimationsTransitionDelegate.h */; };
 		50E5F7962240EBD6002AFEAD /* RNNAnimationsTransitionDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 50E5F7942240EBD6002AFEAD /* RNNAnimationsTransitionDelegate.m */; };
+		50E99C422704A7170006D4D1 /* TabBarItemIOS15Creator.h in Headers */ = {isa = PBXBuildFile; fileRef = 50E99C402704A7170006D4D1 /* TabBarItemIOS15Creator.h */; };
+		50E99C432704A7170006D4D1 /* TabBarItemIOS15Creator.m in Sources */ = {isa = PBXBuildFile; fileRef = 50E99C412704A7170006D4D1 /* TabBarItemIOS15Creator.m */; };
 		50EA541623AEDF5D006F881A /* RNNInterpolator.h in Headers */ = {isa = PBXBuildFile; fileRef = 50EA541423AEDF5D006F881A /* RNNInterpolator.h */; };
 		50EA541723AEDF5D006F881A /* RNNInterpolator.m in Sources */ = {isa = PBXBuildFile; fileRef = 50EA541523AEDF5D006F881A /* RNNInterpolator.m */; };
 		50EA541A23AEE1C6006F881A /* AnimatedReactView.h in Headers */ = {isa = PBXBuildFile; fileRef = 50EA541823AEE1C6006F881A /* AnimatedReactView.h */; };
@@ -624,8 +624,6 @@
 		50206A6C21AFE75400B7BB1A /* RNNSideMenuParserTest.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSideMenuParserTest.m; sourceTree = "<group>"; };
 		5022EDB32405224B00852BA6 /* BottomTabPresenter.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = BottomTabPresenter.h; sourceTree = "<group>"; };
 		5022EDB42405224B00852BA6 /* BottomTabPresenter.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = BottomTabPresenter.m; sourceTree = "<group>"; };
-		5022EDB72405226800852BA6 /* BottomTabAppearancePresenter.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = BottomTabAppearancePresenter.h; sourceTree = "<group>"; };
-		5022EDB82405226800852BA6 /* BottomTabAppearancePresenter.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = BottomTabAppearancePresenter.m; sourceTree = "<group>"; };
 		5022EDBB2405237100852BA6 /* BottomTabPresenterCreator.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = BottomTabPresenterCreator.h; sourceTree = "<group>"; };
 		5022EDBC2405237100852BA6 /* BottomTabPresenterCreator.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = BottomTabPresenterCreator.m; sourceTree = "<group>"; };
 		5022EDBF24053C9F00852BA6 /* TabBarItemAppearanceCreator.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = TabBarItemAppearanceCreator.h; sourceTree = "<group>"; };
@@ -908,6 +906,8 @@
 		50E5F790223FA04C002AFEAD /* TransitionDetailsOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = TransitionDetailsOptions.m; sourceTree = "<group>"; };
 		50E5F7932240EBD6002AFEAD /* RNNAnimationsTransitionDelegate.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNAnimationsTransitionDelegate.h; sourceTree = "<group>"; };
 		50E5F7942240EBD6002AFEAD /* RNNAnimationsTransitionDelegate.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNAnimationsTransitionDelegate.m; sourceTree = "<group>"; };
+		50E99C402704A7170006D4D1 /* TabBarItemIOS15Creator.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = TabBarItemIOS15Creator.h; sourceTree = "<group>"; };
+		50E99C412704A7170006D4D1 /* TabBarItemIOS15Creator.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = TabBarItemIOS15Creator.m; sourceTree = "<group>"; };
 		50EA541423AEDF5D006F881A /* RNNInterpolator.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNInterpolator.h; sourceTree = "<group>"; };
 		50EA541523AEDF5D006F881A /* RNNInterpolator.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNInterpolator.m; sourceTree = "<group>"; };
 		50EA541823AEE1C6006F881A /* AnimatedReactView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = AnimatedReactView.h; sourceTree = "<group>"; };
@@ -1118,6 +1118,8 @@
 				5038A3BC216E1490009280BC /* RNNTabBarItemCreator.m */,
 				5022EDBF24053C9F00852BA6 /* TabBarItemAppearanceCreator.h */,
 				5022EDC024053C9F00852BA6 /* TabBarItemAppearanceCreator.m */,
+				50E99C402704A7170006D4D1 /* TabBarItemIOS15Creator.h */,
+				50E99C412704A7170006D4D1 /* TabBarItemIOS15Creator.m */,
 				5053CE7D2175FB1900D0386B /* RNNDefaultOptionsHelper.h */,
 				5053CE7E2175FB1900D0386B /* RNNDefaultOptionsHelper.m */,
 				C2A57A1A21E815F80066711C /* InteractivePopGestureDelegate.h */,
@@ -1509,8 +1511,6 @@
 				505C640123E074860078AFC0 /* TopBarTitlePresenter.m */,
 				5022EDB32405224B00852BA6 /* BottomTabPresenter.h */,
 				5022EDB42405224B00852BA6 /* BottomTabPresenter.m */,
-				5022EDB72405226800852BA6 /* BottomTabAppearancePresenter.h */,
-				5022EDB82405226800852BA6 /* BottomTabAppearancePresenter.m */,
 				5022EDC324054C6100852BA6 /* BottomTabsAppearancePresenter.h */,
 				5022EDC424054C6100852BA6 /* BottomTabsAppearancePresenter.m */,
 				5041DC3C2417BBBA0033312F /* BottomTabsBasePresenter.h */,
@@ -1892,7 +1892,6 @@
 				507ACB1123F44D1E00829911 /* RNNComponentView.h in Headers */,
 				B84F6E50252C5ECE007D78A1 /* DecelerateInterpolator.h in Headers */,
 				263905B51E4C6F440023D7D3 /* MMExampleDrawerVisualStateManager.h in Headers */,
-				5022EDB92405226800852BA6 /* BottomTabAppearancePresenter.h in Headers */,
 				50451D052042DAEB00695F00 /* RNNPushAnimation.h in Headers */,
 				507F43C51FF4F17C00D9425B /* RNNTopTabsViewController.h in Headers */,
 				501223D72173590F000F5F98 /* RNNStackPresenter.h in Headers */,
@@ -1987,6 +1986,7 @@
 				50CED449239EA56100C42EE2 /* TopBarPresenterCreator.h in Headers */,
 				5012240E21735999000F5F98 /* RNNBasePresenter.h in Headers */,
 				50495952216F62BD006D2B81 /* NullNumber.h in Headers */,
+				50E99C422704A7170006D4D1 /* TabBarItemIOS15Creator.h in Headers */,
 				5012242221736883000F5F98 /* NullColor.h in Headers */,
 				50CED451239F9DFC00C42EE2 /* TopBarPresenter.h in Headers */,
 				B8415321251E088100467F37 /* LinearInterpolator.h in Headers */,
@@ -2225,6 +2225,7 @@
 				50D3A36F23B8D6C600717F95 /* SharedElementAnimator.m in Sources */,
 				5012242721737278000F5F98 /* NullImage.m in Sources */,
 				5022EDC624054C6100852BA6 /* BottomTabsAppearancePresenter.m in Sources */,
+				50E99C432704A7170006D4D1 /* TabBarItemIOS15Creator.m in Sources */,
 				7B1126A01E2D263F00F9B03B /* RNNEventEmitter.m in Sources */,
 				504189582506144D004A6BC7 /* RNNSetRootAnimator.m in Sources */,
 				A7626BFD1FC2FB2C00492FB8 /* RNNTopBarOptions.m in Sources */,
@@ -2242,7 +2243,6 @@
 				390AD478200F499D00A8250D /* RNNSwizzles.m in Sources */,
 				50E02BD921A6EE0F00A43942 /* SideMenuOpenMode.m in Sources */,
 				503A8A0E23BC9BC50094D1C4 /* ElementVerticalTransition.m in Sources */,
-				5022EDBA2405226800852BA6 /* BottomTabAppearancePresenter.m in Sources */,
 				7BA500751E2544B9001B9E1B /* ReactNativeNavigation.m in Sources */,
 				50E5F7962240EBD6002AFEAD /* RNNAnimationsTransitionDelegate.m in Sources */,
 				5038A3BA216DFCFD009280BC /* UITabBarController+RNNOptions.m in Sources */,
diff --git a/lib/ios/TabBarItemAppearanceCreator.m b/lib/ios/TabBarItemAppearanceCreator.m
index 36b98b591f2..1ec6a7bc7c1 100644
--- a/lib/ios/TabBarItemAppearanceCreator.m
+++ b/lib/ios/TabBarItemAppearanceCreator.m
@@ -2,21 +2,21 @@
 
 @implementation TabBarItemAppearanceCreator
 
-+ (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem {
+- (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem {
     UITabBarItem *tabBarItem = [super createTabBarItem:mergeItem];
     tabBarItem.standardAppearance =
         mergeItem.standardAppearance ?: [[UITabBarAppearance alloc] init];
     return tabBarItem;
 }
 
-+ (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes {
+- (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes {
     tabItem.standardAppearance.stackedLayoutAppearance.normal.titleTextAttributes = titleAttributes;
     tabItem.standardAppearance.compactInlineLayoutAppearance.normal.titleTextAttributes =
         titleAttributes;
     tabItem.standardAppearance.inlineLayoutAppearance.normal.titleTextAttributes = titleAttributes;
 }
 
-+ (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
+- (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
            selectedTitleAttributes:(NSDictionary *)selectedTitleAttributes {
     tabItem.standardAppearance.stackedLayoutAppearance.selected.titleTextAttributes =
         selectedTitleAttributes;
diff --git a/lib/ios/TabBarItemIOS15Creator.h b/lib/ios/TabBarItemIOS15Creator.h
new file mode 100644
index 00000000000..f1a420b487b
--- /dev/null
+++ b/lib/ios/TabBarItemIOS15Creator.h
@@ -0,0 +1,6 @@
+#import "TabBarItemAppearanceCreator.h"
+
+API_AVAILABLE(ios(15.0))
+@interface TabBarItemIOS15Creator : TabBarItemAppearanceCreator
+
+@end
diff --git a/lib/ios/TabBarItemIOS15Creator.m b/lib/ios/TabBarItemIOS15Creator.m
new file mode 100644
index 00000000000..6fb820a42e9
--- /dev/null
+++ b/lib/ios/TabBarItemIOS15Creator.m
@@ -0,0 +1,37 @@
+#import "TabBarItemIOS15Creator.h"
+
+@implementation TabBarItemIOS15Creator
+
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+
+- (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem {
+    UITabBarItem *tabBarItem = [super createTabBarItem:mergeItem];
+    tabBarItem.scrollEdgeAppearance =
+        mergeItem.scrollEdgeAppearance ?: [[UITabBarAppearance alloc] init];
+    return tabBarItem;
+}
+
+- (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes {
+    [super setTitleAttributes:tabItem titleAttributes:titleAttributes];
+    tabItem.scrollEdgeAppearance.stackedLayoutAppearance.normal.titleTextAttributes =
+        titleAttributes;
+    tabItem.scrollEdgeAppearance.compactInlineLayoutAppearance.normal.titleTextAttributes =
+        titleAttributes;
+    tabItem.scrollEdgeAppearance.inlineLayoutAppearance.normal.titleTextAttributes =
+        titleAttributes;
+}
+
+- (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
+           selectedTitleAttributes:(NSDictionary *)selectedTitleAttributes {
+    [super setSelectedTitleAttributes:tabItem selectedTitleAttributes:selectedTitleAttributes];
+    tabItem.scrollEdgeAppearance.stackedLayoutAppearance.selected.titleTextAttributes =
+        selectedTitleAttributes;
+    tabItem.scrollEdgeAppearance.compactInlineLayoutAppearance.selected.titleTextAttributes =
+        selectedTitleAttributes;
+    tabItem.scrollEdgeAppearance.inlineLayoutAppearance.selected.titleTextAttributes =
+        selectedTitleAttributes;
+}
+
+#endif
+
+@end
diff --git a/lib/ios/UIViewController+RNNOptions.m b/lib/ios/UIViewController+RNNOptions.m
index fc670ad4339..d19b9699c39 100644
--- a/lib/ios/UIViewController+RNNOptions.m
+++ b/lib/ios/UIViewController+RNNOptions.m
@@ -98,6 +98,13 @@ - (void)setTabBarItemBadgeColor:(UIColor *)badgeColor {
     if (@available(iOS 13.0, *)) {
         self.tabBarItem.standardAppearance.stackedLayoutAppearance.normal.badgeBackgroundColor =
             badgeColor;
+
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+        if (@available(iOS 15.0, *)) {
+            self.tabBarItem.scrollEdgeAppearance.stackedLayoutAppearance.normal
+                .badgeBackgroundColor = badgeColor;
+        }
+#endif
     } else {
         self.tabBarItem.badgeColor = badgeColor;
     }
diff --git a/lib/src/Navigation.ts b/lib/src/Navigation.ts
index 9c80cc7b478..f14c176ef54 100644
--- a/lib/src/Navigation.ts
+++ b/lib/src/Navigation.ts
@@ -188,8 +188,8 @@ export class NavigationRoot {
   /**
    * Update a mounted component's props
    */
-  public updateProps(componentId: string, props: object) {
-    this.commands.updateProps(componentId, props);
+  public updateProps(componentId: string, props: object, callback?: () => void) {
+    this.commands.updateProps(componentId, props, callback);
   }
 
   /**
diff --git a/lib/src/NavigationDelegate.ts b/lib/src/NavigationDelegate.ts
index 90aecf18a88..2c27a0f62b9 100644
--- a/lib/src/NavigationDelegate.ts
+++ b/lib/src/NavigationDelegate.ts
@@ -113,8 +113,8 @@ export class NavigationDelegate {
   /**
    * Update a mounted component's props
    */
-  public updateProps(componentId: string, props: object) {
-    this.concreteNavigation.updateProps(componentId, props);
+  public updateProps(componentId: string, props: object, callback?: () => void) {
+    this.concreteNavigation.updateProps(componentId, props, callback);
   }
 
   /**
diff --git a/lib/src/commands/Commands.test.ts b/lib/src/commands/Commands.test.ts
index 1e1ee4f10b7..4b75df04a47 100644
--- a/lib/src/commands/Commands.test.ts
+++ b/lib/src/commands/Commands.test.ts
@@ -242,6 +242,19 @@ describe('Commands', () => {
         )
       );
     });
+
+    test('update props with callback', (done) => {
+      function callback() {
+        try {
+          expect(true).toBe(true);
+          done();
+        } catch (error) {
+          done(error);
+        }
+      }
+
+      uut.updateProps('theComponentId', { someProp: 'someValue' }, callback);
+    });
   });
 
   describe('showModal', () => {
diff --git a/lib/src/commands/Commands.ts b/lib/src/commands/Commands.ts
index c2c3b6f566a..3defb11c912 100644
--- a/lib/src/commands/Commands.ts
+++ b/lib/src/commands/Commands.ts
@@ -85,8 +85,8 @@ export class Commands {
     this.commandsObserver.notify(CommandName.MergeOptions, { componentId, options });
   }
 
-  public updateProps(componentId: string, props: object) {
-    this.store.updateProps(componentId, props);
+  public updateProps(componentId: string, props: object, callback?: () => void) {
+    this.store.updateProps(componentId, props, callback);
     this.commandsObserver.notify(CommandName.UpdateProps, { componentId, props });
   }
 
diff --git a/lib/src/components/ComponentWrapper.test.tsx b/lib/src/components/ComponentWrapper.test.tsx
index b70a5d43686..417c3c82459 100644
--- a/lib/src/components/ComponentWrapper.test.tsx
+++ b/lib/src/components/ComponentWrapper.test.tsx
@@ -121,6 +121,19 @@ describe('ComponentWrapper', () => {
     });
   });
 
+  test('update props with callback', (done) => {
+    function callback() {
+      try {
+        expect(true).toBe(true);
+        done();
+      } catch (error) {
+        done(error);
+      }
+    }
+
+    store.updateProps('component123', { someProp: 'someValue' }, callback);
+  });
+
   it('updates props from store into inner component', () => {
     const NavigationComponent = uut.wrap(
       componentName,
diff --git a/lib/src/components/ComponentWrapper.tsx b/lib/src/components/ComponentWrapper.tsx
index ba4f6859040..54283f20173 100644
--- a/lib/src/components/ComponentWrapper.tsx
+++ b/lib/src/components/ComponentWrapper.tsx
@@ -15,7 +15,7 @@ interface HocProps {
 }
 
 export interface IWrappedComponent extends React.Component {
-  setProps(newProps: Record<string, any>): void;
+  setProps(newProps: Record<string, any>, callback?: () => void): void;
   isMounted: boolean;
 }
 
@@ -56,13 +56,16 @@ export class ComponentWrapper {
         store.setComponentInstance(props.componentId, this);
       }
 
-      public setProps(newProps: any) {
-        this.setState((prevState) => ({
-          allProps: {
-            ...prevState.allProps,
-            ...newProps,
-          },
-        }));
+      public setProps(newProps: any, callback?: () => void) {
+        this.setState(
+          (prevState) => ({
+            allProps: {
+              ...prevState.allProps,
+              ...newProps,
+            },
+          }),
+          callback
+        );
       }
 
       componentDidMount() {
diff --git a/lib/src/components/Store.test.ts b/lib/src/components/Store.test.ts
index a24117b360d..f458e3e73a3 100644
--- a/lib/src/components/Store.test.ts
+++ b/lib/src/components/Store.test.ts
@@ -23,6 +23,19 @@ describe('Store', () => {
     expect(uut.getPropsForId('component1')).toEqual({});
   });
 
+  test('update props with callback', (done) => {
+    function callback() {
+      try {
+        expect(true).toBe(true);
+        done();
+      } catch (error) {
+        done(error);
+      }
+    }
+
+    uut.updateProps('component1', { someProp: 'someValue' }, callback);
+  });
+
   it('holds original components classes by componentName', () => {
     const MyWrappedComponent = () => class MyComponent extends React.Component {};
     uut.setComponentClassForName('example.mycomponent', MyWrappedComponent);
diff --git a/lib/src/components/Store.ts b/lib/src/components/Store.ts
index 8038bc8deeb..6438768fd09 100644
--- a/lib/src/components/Store.ts
+++ b/lib/src/components/Store.ts
@@ -9,11 +9,11 @@ export class Store {
   private wrappedComponents: Record<string, React.ComponentClass<any>> = {};
   private lazyRegistratorFn: ((lazyComponentRequest: string | number) => void) | undefined;
 
-  updateProps(componentId: string, props: any) {
+  updateProps(componentId: string, props: any, callback?: () => void) {
     this.mergeNewPropsForId(componentId, props);
     const component = this.componentsInstancesById[componentId];
     if (component) {
-      this.componentsInstancesById[componentId].setProps(props);
+      this.componentsInstancesById[componentId].setProps(props, callback);
     }
   }
 
diff --git a/playground/ios/NavigationTests/BottomTabPresenterTest.m b/playground/ios/NavigationTests/BottomTabPresenterTest.m
index 5611b7b412e..e23bb455c9f 100644
--- a/playground/ios/NavigationTests/BottomTabPresenterTest.m
+++ b/playground/ios/NavigationTests/BottomTabPresenterTest.m
@@ -2,13 +2,14 @@
 #import "RNNBottomTabsController+Helpers.h"
 #import "UIViewController+RNNOptions.h"
 #import <OCMock/OCMock.h>
-#import <ReactNativeNavigation/BottomTabAppearancePresenter.h>
+#import <ReactNativeNavigation/BottomTabPresenter.h>
+#import <ReactNativeNavigation/BottomTabPresenterCreator.h>
 #import <ReactNativeNavigation/RNNComponentViewController.h>
 #import <XCTest/XCTest.h>
 
 @interface RNNBottomTabPresenterTest : XCTestCase
 
-@property(nonatomic, strong) BottomTabAppearancePresenter *uut;
+@property(nonatomic, strong) BottomTabPresenter *uut;
 @property(nonatomic, strong) RNNNavigationOptions *options;
 @property(nonatomic, strong) RNNBottomTabsController *boundViewController;
 @property(nonatomic, strong) RNNComponentViewController *componentViewController;
@@ -20,8 +21,8 @@ @implementation RNNBottomTabPresenterTest
 
 - (void)setUp {
     [super setUp];
-    self.uut = [[BottomTabAppearancePresenter alloc]
-        initWithDefaultOptions:[RNNNavigationOptions emptyOptions]];
+    self.uut =
+        [BottomTabPresenterCreator createWithDefaultOptions:RNNNavigationOptions.emptyOptions];
     self.componentViewController = [RNNComponentViewController new];
     self.boundViewController =
         [RNNBottomTabsController createWithChildren:@[ self.componentViewController ]];
diff --git a/website/docs/api/api-component.mdx b/website/docs/api/api-component.mdx
index 53b00874ede..4d4387a57dc 100644
--- a/website/docs/api/api-component.mdx
+++ b/website/docs/api/api-component.mdx
@@ -57,10 +57,11 @@ Navigation.setLazyComponentRegistrator((componentName) => {
 Update props of a component registered with [registerComponent](#registercomponent). Updating props triggers the component lifecycle methods related to [updating](https://reactjs.org/docs/react-component.html#updating).
 
 #### Parameters
-| Name   | Required | Type                | Description                                                                                                            |
-| ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| componentId | Yes      | string | Unique component id |
-| options | Yes      | object | props object to pass to the component |
+| Name        | Required | Type     | Description                                                                                                            |
+| ----------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------- |
+| componentId | Yes      | string   | Unique component id                                               |
+| options     | Yes      | object   | Props object to pass to the component                             |
+| callback    | No       | Function | Function that will be executed once inner `setState` is completed |
 
 #### Example
 ```js
diff --git a/website/docs/docs/docs-sideMenu.mdx b/website/docs/docs/docs-sideMenu.mdx
index 5a15ac4f33c..4a22cb449cb 100644
--- a/website/docs/docs/docs-sideMenu.mdx
+++ b/website/docs/docs/docs-sideMenu.mdx
@@ -56,7 +56,7 @@ class SideMenuCenterScreen extends React.Component {
 
   navigationButtonPressed({ buttonId }) {
     if (buttonId === 'sideMenu') {
-      Navigation.mergeOptions(this, {
+      Navigation.mergeOptions(this.props.componentId, {
         sideMenu: {
           left: {
             visible: true

From 01fdfa4e11047348894ca88e450eb35b6958d994 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 14:03:39 +0300
Subject: [PATCH 35/43] revert local changes

---
 scripts/start.js    | 2 +-
 scripts/test-e2e.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/start.js b/scripts/start.js
index abc8db336ee..abe6404b7cf 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -6,7 +6,7 @@ if (isWindows) runWin32();
 else run();
 
 function run() {
-  // exec.killPort(8081);
+  exec.killPort(8081);
   exec.execSync(`watchman watch-del-all || true`);
   exec.execSync(`adb reverse tcp:8081 tcp:8081 || true`);
   exec.execSync(`node ./node_modules/react-native/local-cli/cli.js start`);
diff --git a/scripts/test-e2e.js b/scripts/test-e2e.js
index 4ec858cb49d..2591595bfd6 100644
--- a/scripts/test-e2e.js
+++ b/scripts/test-e2e.js
@@ -27,7 +27,7 @@ function run() {
     exec.execSync(`detox build --configuration ${configuration}`);
   }
   exec.execSync(
-    `detox test --configuration ${configuration} -w 1 ${loglevel} e2e/Modals.test.js`
+    `detox test --configuration ${configuration} ${headless$} -w ${workers} ${loglevel}`
     // "Buttons.test.js" --loglevel trace`
   );
 }

From 8623fec0605e32565b836bde0e51f35f40ddb17a Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 14:11:48 +0300
Subject: [PATCH 36/43] remove unused event

When changing state of RNNModal to not visible the props got unbound to native and the dismiss event will not be received in JS, suggested to call dismiss block after calling setState in RequestDismiss.
---
 .../reactnativenavigation/react/modal/Events.kt    | 14 --------------
 .../react/modal/ModalLayoutController.kt           |  7 -------
 .../react/modal/RNNModalViewManager.kt             | 11 +----------
 lib/src/components/RNNModal.tsx                    |  8 --------
 4 files changed, 1 insertion(+), 39 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt
index 910757f3cb0..d4616e8220c 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt
@@ -3,20 +3,6 @@ package com.reactnativenavigation.react.modal
 import com.facebook.react.uimanager.events.Event
 import com.facebook.react.uimanager.events.RCTEventEmitter
 
-open class ModalDismissEvent(viewTag: Int) : Event<RequestDismissModalEvent>(viewTag) {
-
-    companion object{
-        const val EVENT_NAME = "topModalDismiss"
-    }
-
-    override fun getEventName(): String {
-        return EVENT_NAME
-    }
-
-    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
-        rctEventEmitter.receiveEvent(viewTag, eventName, null)
-    }
-}
 open class RequestDismissModalEvent(viewTag: Int) : Event<RequestDismissModalEvent>(viewTag) {
 
     companion object{
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
index 61c1b177577..8311c787eec 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
@@ -42,13 +42,6 @@ class ModalLayoutController(
         }
     }
 
-    fun sendDismissEvent() {
-        val dispatcher = reactContext.getNativeModule(
-            UIManagerModule::class.java
-        ).eventDispatcher
-        dispatcher.dispatchEvent(ModalDismissEvent(getHostId()))
-    }
-
     fun sendShowEvent() {
         val dispatcher = reactContext.getNativeModule(
             UIManagerModule::class.java
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt
index 0eead872a1a..bee52d29976 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt
@@ -37,15 +37,7 @@ class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<M
 
     override fun onDropViewInstance(modal: ModalHostLayout) {
         super.onDropViewInstance(modal)
-        navigator.dismissModal(modal.viewController.id, CommandListenerAdapter(object : CommandListener {
-            override fun onSuccess(childId: String?) {
-                modal.viewController.sendDismissEvent()
-            }
-
-            override fun onError(message: String?) {
-            }
-
-        }))
+        navigator.dismissModal(modal.viewController.id, CommandListenerAdapter())
         modal.onDropInstance()
     }
 
@@ -65,7 +57,6 @@ class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<M
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
         return MapBuilder.builder<String, Any>()
             .put(RequestDismissModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onRequestDismiss"))
-            .put(ModalDismissEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDismiss"))
             .put(ShowModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onShow"))
             .build()
     }
diff --git a/lib/src/components/RNNModal.tsx b/lib/src/components/RNNModal.tsx
index 4bc87da6b98..1477743ceb8 100644
--- a/lib/src/components/RNNModal.tsx
+++ b/lib/src/components/RNNModal.tsx
@@ -2,13 +2,7 @@ import React from 'react';
 import { requireNativeComponent, ViewProps, StyleSheet } from 'react-native';
 import { View } from 'react-native-ui-lib';
 export interface RNNModalProps extends ViewProps {
-  // animationType?: 'none' | 'slide' | 'fade' | null;
-  // presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen' | null;
-  // transparent?: boolean;
-  // statusBarTranslucent?: boolean;
-  // hardwareAccelerated?: boolean;
   onShow?: () => any;
-  onDismiss?: () => any;
   onRequestDismiss: () => any;
   visible: boolean;
 }
@@ -37,11 +31,9 @@ export class RNNModal extends React.Component<RNNModalProps> {
 
 const styles = StyleSheet.create({
   modal: {
-    // backgroundColor: 'yellow',
     position: 'absolute',
   },
   container: {
-    // backgroundColor: 'red',
     top: 0,
     flex: 1,
   },

From 9d36bb66fa8cfe162b07c13ba839b1d5361c87e0 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 14:32:43 +0300
Subject: [PATCH 37/43] add missing props

---
 .../react/modal/RNNModalViewManager.kt            | 15 +++++++++++++++
 lib/src/components/RNNModal.tsx                   |  6 ++++++
 2 files changed, 21 insertions(+)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt
index bee52d29976..40304079b32 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt
@@ -11,6 +11,9 @@ import com.facebook.react.uimanager.ReactShadowNodeImpl
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.reactnativenavigation.options.ModalPresentationStyle
+import com.reactnativenavigation.options.Options
+import com.reactnativenavigation.options.params.Bool
 import com.reactnativenavigation.react.CommandListener
 import com.reactnativenavigation.react.CommandListenerAdapter
 import com.reactnativenavigation.utils.StatusBarUtils
@@ -68,6 +71,18 @@ class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<M
         //onDropViewInstance to hide (to prevent taking space).
     }
 
+    @ReactProp(name = "blurOnUnmount")
+    fun setBlurOnUnmount(modal: ModalHostLayout, blurOnUnmount: Boolean) {
+       modal.viewController.mergeOptions(Options().apply {
+           this.modal.blurOnUnmount = Bool(blurOnUnmount)
+       })
+    }
+    @ReactProp(name = "presentationStyle")
+    fun setPresentationStyle(modal: ModalHostLayout, presentationStyle: String) {
+        modal.viewController.mergeOptions(Options().apply {
+            this.modal.presentationStyle = ModalPresentationStyle.fromString(presentationStyle)
+        })
+    }
 }
 
 private fun getModalHostSize(context: Context): Point {
diff --git a/lib/src/components/RNNModal.tsx b/lib/src/components/RNNModal.tsx
index 1477743ceb8..3fade6cd895 100644
--- a/lib/src/components/RNNModal.tsx
+++ b/lib/src/components/RNNModal.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { requireNativeComponent, ViewProps, StyleSheet } from 'react-native';
 import { View } from 'react-native-ui-lib';
 export interface RNNModalProps extends ViewProps {
+  presentationStyle: 'unspecified' | 'none' | 'overCurrentContext';
+  blurOnUnmount: boolean;
   onShow?: () => any;
   onRequestDismiss: () => any;
   visible: boolean;
@@ -10,6 +12,10 @@ export interface RNNModalProps extends ViewProps {
 const RNNModalViewManager = requireNativeComponent('RNNModalViewManager');
 
 export class RNNModal extends React.Component<RNNModalProps> {
+  static defaultProps = {
+    presentationStyle: 'unspecified',
+    blurOnUnmount: false,
+  };
   constructor(props: RNNModalProps) {
     super(props);
   }

From 9867283124cb50ef9d91172de1dbfed1aa8ef9af Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 22:21:07 +0300
Subject: [PATCH 38/43] Update ModalViewManager.kt

---
 ...odalViewManager.kt => ModalViewManager.kt} | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)
 rename lib/android/app/src/main/java/com/reactnativenavigation/react/modal/{RNNModalViewManager.kt => ModalViewManager.kt} (78%)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalViewManager.kt
similarity index 78%
rename from lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt
rename to lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalViewManager.kt
index 40304079b32..11fb497c487 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/RNNModalViewManager.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalViewManager.kt
@@ -4,6 +4,7 @@ import android.content.Context
 import android.graphics.Point
 import android.view.WindowManager
 import com.facebook.infer.annotation.Assertions
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.LayoutShadowNode
@@ -14,6 +15,8 @@ import com.facebook.react.uimanager.annotations.ReactProp
 import com.reactnativenavigation.options.ModalPresentationStyle
 import com.reactnativenavigation.options.Options
 import com.reactnativenavigation.options.params.Bool
+import com.reactnativenavigation.options.parseTransitionAnimationOptions
+import com.reactnativenavigation.options.parsers.JSONParser
 import com.reactnativenavigation.react.CommandListener
 import com.reactnativenavigation.react.CommandListenerAdapter
 import com.reactnativenavigation.utils.StatusBarUtils
@@ -22,8 +25,8 @@ import com.reactnativenavigation.viewcontrollers.navigator.Navigator
 private const val MODAL_MANAGER_NAME = "RNNModalViewManager"
 
 @ReactModule(name = MODAL_MANAGER_NAME)
-class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<ModalHostLayout>() {
-
+class ModalViewManager(private val navigator: Navigator) : ViewGroupManager<ModalHostLayout>() {
+    private val jsonParser = JSONParser()
     override fun getName(): String = MODAL_MANAGER_NAME
 
     override fun createViewInstance(reactContext: ThemedReactContext): ModalHostLayout {
@@ -59,28 +62,31 @@ class RNNModalViewManager(private val navigator: Navigator) : ViewGroupManager<M
 
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
         return MapBuilder.builder<String, Any>()
-            .put(RequestDismissModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onRequestDismiss"))
+            .put(RequestCloseModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onRequestClose"))
             .put(ShowModalEvent.EVENT_NAME, MapBuilder.of("registrationName", "onShow"))
             .build()
     }
 
-    @ReactProp(name = "visible")
-    fun setVisible(modal: ModalHostLayout, visible: Boolean) {
-        //should be empty, we need at least one prop to be implemented via this
-        //annotation, which enables RN to call onAfterUpdateTransaction to show and
-        //onDropViewInstance to hide (to prevent taking space).
+    @ReactProp(name = "animation")
+    fun setAnimation(modal: ModalHostLayout, animation: ReadableMap) {
+        modal.viewController.mergeOptions(Options().apply {
+           val animationJson = jsonParser.parse(animation)
+            val showModal = parseTransitionAnimationOptions(animationJson.optJSONObject("showModal"))
+            val dismissModal = parseTransitionAnimationOptions(animationJson.optJSONObject("dismissModal"))
+            this.animations.showModal = showModal
+            this.animations.dismissModal = dismissModal
+        })
     }
-
     @ReactProp(name = "blurOnUnmount")
     fun setBlurOnUnmount(modal: ModalHostLayout, blurOnUnmount: Boolean) {
        modal.viewController.mergeOptions(Options().apply {
            this.modal.blurOnUnmount = Bool(blurOnUnmount)
        })
     }
-    @ReactProp(name = "presentationStyle")
-    fun setPresentationStyle(modal: ModalHostLayout, presentationStyle: String) {
+    @ReactProp(name = "transparent")
+    fun setTransparent(modal: ModalHostLayout, transparent: Boolean) {
         modal.viewController.mergeOptions(Options().apply {
-            this.modal.presentationStyle = ModalPresentationStyle.fromString(presentationStyle)
+            this.modal.presentationStyle = if(transparent) ModalPresentationStyle.OverCurrentContext else ModalPresentationStyle.None
         })
     }
 }

From 0f8890e49af5ec7f9b4f641a09ed65ab3a4f77ad Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 22:21:24 +0300
Subject: [PATCH 39/43] rename

---
 .../java/com/reactnativenavigation/react/NavigationPackage.kt | 4 ++--
 .../main/java/com/reactnativenavigation/react/modal/Events.kt | 4 ++--
 .../react/modal/ModalLayoutController.kt                      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
index 985a8025f51..2f8f3d5e70b 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt
@@ -7,7 +7,7 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
 import com.reactnativenavigation.NavigationActivity
 import com.reactnativenavigation.options.LayoutFactory
-import com.reactnativenavigation.react.modal.RNNModalViewManager
+import com.reactnativenavigation.react.modal.ModalViewManager
 
 class NavigationPackage(private val reactNativeHost: ReactNativeHost) : ReactPackage {
     override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
@@ -22,6 +22,6 @@ class NavigationPackage(private val reactNativeHost: ReactNativeHost) : ReactPac
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
 
-        return listOf(RNNModalViewManager((reactContext.currentActivity as NavigationActivity).navigator))
+        return listOf(ModalViewManager((reactContext.currentActivity as NavigationActivity).navigator))
     }
 }
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt
index d4616e8220c..a92dbfac873 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt
@@ -3,10 +3,10 @@ package com.reactnativenavigation.react.modal
 import com.facebook.react.uimanager.events.Event
 import com.facebook.react.uimanager.events.RCTEventEmitter
 
-open class RequestDismissModalEvent(viewTag: Int) : Event<RequestDismissModalEvent>(viewTag) {
+open class RequestCloseModalEvent(viewTag: Int) : Event<RequestCloseModalEvent>(viewTag) {
 
     companion object{
-        const val EVENT_NAME = "topRequestDismiss"
+        const val EVENT_NAME = "topRequestClose"
     }
 
     override fun getEventName(): String {
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
index 8311c787eec..df25c43d7b2 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
@@ -38,7 +38,7 @@ class ModalLayoutController(
             val dispatcher = reactContext.getNativeModule(
                 UIManagerModule::class.java
             ).eventDispatcher
-            dispatcher.dispatchEvent(RequestDismissModalEvent(getHostId()))
+            dispatcher.dispatchEvent(RequestCloseModalEvent(getHostId()))
         }
     }
 

From bc1f4a3c657ac289bd05d222b7d43ed2e432619d Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 22:22:43 +0300
Subject: [PATCH 40/43] rename

---
 lib/src/components/Modal.tsx           | 109 +++++++++++++++++++++++++
 lib/src/components/RNNModal.tsx        |  46 -----------
 lib/src/index.ts                       |   2 +-
 playground/src/screens/ModalScreen.tsx |   4 +-
 4 files changed, 112 insertions(+), 49 deletions(-)
 create mode 100644 lib/src/components/Modal.tsx
 delete mode 100644 lib/src/components/RNNModal.tsx

diff --git a/lib/src/components/Modal.tsx b/lib/src/components/Modal.tsx
new file mode 100644
index 00000000000..23ecc5e3422
--- /dev/null
+++ b/lib/src/components/Modal.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { requireNativeComponent, ViewProps, StyleSheet, Dimensions } from 'react-native';
+import { AnimationOptions, ViewAnimationOptions } from 'react-native-navigation/interfaces/Options';
+import { View } from 'react-native-ui-lib';
+export interface RNNModalProps extends ViewProps {
+  visible: boolean;
+  transparent: boolean;
+  blurOnUnmount: boolean;
+  animationType: 'none' | 'fade' | 'slide';
+  onShow?: () => any;
+  onRequestClose: () => any;
+}
+interface AnimatedModalProps extends RNNModalProps {
+  animation?: AnimationOptions;
+}
+const RNNModalViewManager = requireNativeComponent('RNNModalViewManager');
+
+export class Modal extends React.Component<RNNModalProps> {
+  static defaultProps = {
+    transparent: false,
+    blurOnUnmount: false,
+    animationType: 'slide',
+  };
+  constructor(props: RNNModalProps) {
+    super(props);
+  }
+  render() {
+    const processed = this.proccessProps();
+    if (this.props.visible) {
+      return (
+        <RNNModalViewManager {...processed}>
+          <View style={styles.container} collapsable={false}>
+            {this.props.children}
+          </View>
+        </RNNModalViewManager>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  private proccessProps() {
+    const processed: AnimatedModalProps = { ...this.props, style: styles.modal };
+    if (this.props.animationType === 'none') {
+      processed.animation = {
+        showModal: { enabled: false },
+        dismissModal: { enabled: false },
+      };
+    } else {
+      const isSlide = this.props.animationType === 'slide';
+      processed.animation = {
+        showModal: {
+          enter: isSlide ? showModalSlideEnterAnimations : showModalFadeEnterAnimations,
+        },
+        dismissModal: {
+          exit: isSlide ? dismissModalSlideExitAnimations : dismissModalFadeExitAnimations,
+        },
+      };
+    }
+    return processed;
+  }
+}
+
+const height = Math.round(Dimensions.get('window').height);
+const SCREEN_ANIMATION_DURATION = 500;
+const showModalSlideEnterAnimations: ViewAnimationOptions = {
+  translationY: {
+    from: height,
+    to: 0,
+    duration: SCREEN_ANIMATION_DURATION,
+    interpolation: { type: 'decelerate' },
+  },
+};
+
+const dismissModalSlideExitAnimations: ViewAnimationOptions = {
+  translationY: {
+    from: 0,
+    to: height,
+    duration: SCREEN_ANIMATION_DURATION,
+    interpolation: { type: 'decelerate' },
+  },
+};
+const showModalFadeEnterAnimations: ViewAnimationOptions = {
+  alpha: {
+    from: 0,
+    to: 1,
+    duration: SCREEN_ANIMATION_DURATION,
+    interpolation: { type: 'decelerate' },
+  },
+};
+
+const dismissModalFadeExitAnimations: ViewAnimationOptions = {
+  alpha: {
+    from: 1,
+    to: 0,
+    duration: SCREEN_ANIMATION_DURATION,
+    interpolation: { type: 'decelerate' },
+  },
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    position: 'absolute',
+  },
+  container: {
+    top: 0,
+    flex: 1,
+  },
+});
diff --git a/lib/src/components/RNNModal.tsx b/lib/src/components/RNNModal.tsx
deleted file mode 100644
index 3fade6cd895..00000000000
--- a/lib/src/components/RNNModal.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { requireNativeComponent, ViewProps, StyleSheet } from 'react-native';
-import { View } from 'react-native-ui-lib';
-export interface RNNModalProps extends ViewProps {
-  presentationStyle: 'unspecified' | 'none' | 'overCurrentContext';
-  blurOnUnmount: boolean;
-  onShow?: () => any;
-  onRequestDismiss: () => any;
-  visible: boolean;
-}
-
-const RNNModalViewManager = requireNativeComponent('RNNModalViewManager');
-
-export class RNNModal extends React.Component<RNNModalProps> {
-  static defaultProps = {
-    presentationStyle: 'unspecified',
-    blurOnUnmount: false,
-  };
-  constructor(props: RNNModalProps) {
-    super(props);
-  }
-  render() {
-    const p = { ...this.props, style: styles.modal };
-    if (this.props.visible) {
-      return (
-        <RNNModalViewManager {...p}>
-          <View style={styles.container} collapsable={false}>
-            {this.props.children}
-          </View>
-        </RNNModalViewManager>
-      );
-    } else {
-      return null;
-    }
-  }
-}
-
-const styles = StyleSheet.create({
-  modal: {
-    position: 'absolute',
-  },
-  container: {
-    top: 0,
-    flex: 1,
-  },
-});
diff --git a/lib/src/index.ts b/lib/src/index.ts
index c8a27e92177..230459f720c 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -1,7 +1,7 @@
 import { NavigationDelegate } from './NavigationDelegate';
 const navigationDelegate = new NavigationDelegate();
 export const Navigation = navigationDelegate;
-export * from './components/RNNModal';
+export * from './components/Modal';
 export * from './events/EventsRegistry';
 export * from './adapters/Constants';
 export * from './interfaces/ComponentEvents';
diff --git a/playground/src/screens/ModalScreen.tsx b/playground/src/screens/ModalScreen.tsx
index b9ca1c9b417..3062fb6b2ca 100644
--- a/playground/src/screens/ModalScreen.tsx
+++ b/playground/src/screens/ModalScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationComponent, RNNModal } from 'react-native-navigation';
+import { NavigationComponent, Modal as RNNModal } from 'react-native-navigation';
 import last from 'lodash/last';
 import concat from 'lodash/concat';
 import forEach from 'lodash/forEach';
@@ -134,7 +134,7 @@ export default class ModalScreen extends NavigationComponent<Props, State> {
         {Platform.OS === 'android' && (
           <RNNModal
             visible={this.state.modalVisible}
-            onRequestDismiss={() => this.setState({ modalVisible: false })}
+            onRequestClose={() => this.setState({ modalVisible: false })}
           >
             <Button
               label="Dismiss declared Modal"

From 791d266a4bac9776a9433aa471b49dcd0264738d Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Sun, 3 Oct 2021 22:24:46 +0300
Subject: [PATCH 41/43] Update ModalLayoutController.kt

---
 .../reactnativenavigation/react/modal/ModalLayoutController.kt  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
index df25c43d7b2..d8fd6a15b8a 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalLayoutController.kt
@@ -26,7 +26,7 @@ class ModalLayoutController(
         return isViewCreated
     }
 
-    override fun getCurrentComponentName(): String = "GenericDeclaredLayoutController"
+    override fun getCurrentComponentName(): String = "ModalLayoutController"
 
 
     override fun createView(): ModalFrameLayout {

From a52bedb8aca01253bf5987a43c1dde3ca5b37f49 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Mon, 4 Oct 2021 11:46:17 +0300
Subject: [PATCH 42/43] Update NavigationModule.java

---
 .../com/reactnativenavigation/react/NavigationModule.java    | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
index 6ead119fe4f..3eb66097716 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java
@@ -7,14 +7,11 @@
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.uimanager.ViewManager;
-import com.facebook.react.views.modal.ReactModalHostManager;
 import com.reactnativenavigation.NavigationActivity;
 import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.options.LayoutFactory;
@@ -33,8 +30,6 @@
 import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController;
 
 import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
 
 import static com.reactnativenavigation.utils.UiUtils.pxToDp;
 

From 9d4db17f55a04947f8191c9ff231f0c330339162 Mon Sep 17 00:00:00 2001
From: Ward Abbass <swabbass@gmail.com>
Date: Mon, 4 Oct 2021 12:19:27 +0300
Subject: [PATCH 43/43] update docs

---
 website/docs/docs/docs-modal.mdx | 35 ++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/website/docs/docs/docs-modal.mdx b/website/docs/docs/docs-modal.mdx
index 08903f0bdf5..85a606b8c0c 100644
--- a/website/docs/docs/docs-modal.mdx
+++ b/website/docs/docs/docs-modal.mdx
@@ -36,6 +36,41 @@ Navigation.showModal({
   },
 });
 ```
+Or by declaring modal as a Component inside render function:
+
+:::note
+Available for Android only, for iOS please use Modal from `react-native`.
+:::
+
+([Full code can be found in the Playground](https://github.com/wix/react-native-navigation/blob/master/playground/src/screens/ModalScreen.tsx)).
+
+```jsx
+import { NavigationComponent, Modal as RNNModal } from 'react-native-navigation';
+.....
+toggleModal = () => this.setState({ modalVisible: !this.state.modalVisible });
+.....
+render() {
+  return (
+    .....
+  <RNNModal
+      onShow={/* optional callback */}
+      animationType={/* optional, 'none' | 'fade' | 'slide', default 'slide'*/}
+      blurOnUnmount={/* optional, default false */}
+      transparent={/* optional, default false, true behaves as overCurrentContext */}
+      visible={this.state.modalVisible}
+      onRequestClose={() => this.setState({ modalVisible: false })}
+      >
+          <Button
+            label="Dismiss declared Modal"
+            testID={DISMISS_MODAL_BTN}
+            onPress={this.toggleModal}
+          />
+          ....
+    </RNNModal>
+    ....
+    );
+}
+```
 
 Here's how the Modal looks on both platforms.