react-native-screens 3.9.0 → 3.11.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Krzysztof Magiera
+Copyright (c) 2018 Software Mansion <swmansion.com>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -35,6 +35,26 @@ protected void onCreate(Bundle savedInstanceState) {
 
 For people that must handle cases like this, there is [a more detailed discussion of the difficulties in a series of related comments](https://github.com/software-mansion/react-native-screens/issues/17#issuecomment-424704633).
 
+<details>
+<summary>Need to use a custom Kotlin version?</summary>
+<br>
+
+Since `v3.6.0` `react-native-screens` has been rewritten with Kotlin. Kotlin version used in this library defaults to `1.4.10`.
+
+If you need to use a different Kotlin version, set `kotlinVersion` ext property in your project's `android/build.gradle` and the library will use this version accordingly:
+
+```
+buildscript {
+    ext {
+        ...
+        kotlinVersion = "1.4.10"
+    }
+}
+```
+
+**Disclaimer**: `react-native-screens` requires Kotlin `1.3.50` or higher.
+</details>
+
 ### Windows
 
 Installation on Windows should be completely handled with auto-linking when using React Native Windows 0.63+. For earlier versions, you must [manually link](https://microsoft.github.io/react-native-windows/docs/native-modules-using) the native module.
@@ -68,6 +88,24 @@ Just make sure that the version of [react-navigation](https://github.com/react-n
 
 You are all set 🎉 – when screens are enabled in your application code react-navigation will automatically use them instead of relying on plain React Native Views.
 
+### Experimental support for `react-freeze`
+
+> You have to use React Native 0.64 or higher, react-navigation 5.x or 6.x and react-native-screens >= v3.9.0
+
+Since `v3.9.0`, `react-native-screens` comes with experimental support for [`react-freeze`](https://github.com/software-mansion-labs/react-freeze). It uses the React `Suspense` mechanism to prevent parts of the React component tree from rendering, while keeping its state untouched.
+
+To benefit from this feature, enable it in your entry file (e.g. `App.js`) with this snippet:
+
+```js
+import { enableFreeze } from 'react-native-screens';
+
+enableFreeze(true);
+```
+
+Want to know more? Check out [react-freeze README](https://github.com/software-mansion-labs/react-freeze#readme)
+
+Found a bug? File an issue [here](https://github.com/software-mansion/react-native-screens/issues) or directly in [react-freeze repository](https://github.com/software-mansion-labs/react-freeze/issues).
+
 ### Disabling `react-native-screens`
 
 If, for whatever reason, you'd like to disable native screens support and use plain React Native Views add the following code in your entry file (e.g. `App.js`):
@@ -85,8 +123,8 @@ You can also disable the usage of native screens per navigator with [`detachInac
 To take advantage of the native stack navigator primitive for React Navigation that leverages `UINavigationController` on iOS and `Fragment` on Android, please refer:
 
 - for React Navigation >= v6 to the [Native Stack Navigator part of React Navigation documentation](https://reactnavigation.org/docs/native-stack-navigator)
-- for React Navigation v5 to the [README in react-native-screens/native-stack](https://github.com/software-mansion/react-native-screens/tree/master/native-stack)
-- for older versions to the [README in react-native-screens/createNativeStackNavigator](https://github.com/software-mansion/react-native-screens/tree/master/createNativeStackNavigator)
+- for React Navigation v5 to the [README in react-native-screens/native-stack](https://github.com/software-mansion/react-native-screens/tree/main/native-stack)
+- for older versions to the [README in react-native-screens/createNativeStackNavigator](https://github.com/software-mansion/react-native-screens/tree/main/createNativeStackNavigator)
 
 ## Interop with [react-native-navigation](https://github.com/wix/react-native-navigation)
 
@@ -94,12 +132,12 @@ React-native-navigation library already uses native containers for rendering nav
 
 ## Interop with other libraries
 
-This library should work out of the box with all existing react-native libraries. If you experience problems with interoperability please [report an issue](https://github.com/kmagiera/react-native-screens/issues).
+This library should work out of the box with all existing react-native libraries. If you experience problems with interoperability please [report an issue](https://github.com/software-mansion/react-native-screens/issues).
 
 ## Guide for navigation library authors
 
 If you are building a navigation library you may want to use `react-native-screens` to have control over which parts of the React component tree are attached to the native view hierarchy.
-To do that, `react-native-screens` provides you with the components documented [here](https://github.com/kmagiera/react-native-screens/tree/master/guides/GUIDE_FOR_LIBRARY_AUTHORS.md).
+To do that, `react-native-screens` provides you with the components documented [here](https://github.com/software-mansion/react-native-screens/tree/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md).
 
 ## Common problems
 
@@ -120,10 +158,11 @@ Use `ScrollView` with prop `contentInsetAdjustmentBehavior=“automatic”` as a
 | [SVG component becomes transparent when goBack](https://github.com/software-mansion/react-native-screens/issues/773)                         | [related PRs](https://github.com/software-mansion/react-native-screens/issues/773#issuecomment-783469792)           |
 | [Memory leak while moving from one screen to another in the same stack](https://github.com/software-mansion/react-native-screens/issues/843) | [explanation](https://github.com/software-mansion/react-native-screens/issues/843#issuecomment-832034119)   |
 | [LargeHeader stays small after pop/goBack/swipe gesture on iOS 14+](https://github.com/software-mansion/react-native-screens/issues/649)     | [potential fix](https://github.com/software-mansion/react-native-screens/issues/649#issuecomment-712199895) |
+| [`onScroll` and `onMomentumScrollEnd` of previous screen triggered in bottom tabs](https://github.com/software-mansion/react-native-screens/issues/1183)     | [explanation](https://github.com/software-mansion/react-native-screens/issues/1183#issuecomment-949313111) |
 
 ## Contributing
 
-There are many ways to contribute to this project. See [CONTRIBUTING](https://github.com/kmagiera/react-native-screens/tree/master/guides/CONTRIBUTING.md) guide for more information. Thank you for your interest in contributing!
+There are many ways to contribute to this project. See [CONTRIBUTING](https://github.com/software-mansion/react-native-screens/tree/main/guides/CONTRIBUTING.md) guide for more information. Thank you for your interest in contributing!
 
 ## License
 
@@ -131,7 +170,8 @@ React native screens library is licensed under [The MIT License](LICENSE).
 
 ## Credits
 
-This project is supported by amazing people from [Expo.io](https://expo.io) and [Software Mansion](https://swmansion.com)
+This project has been build and is maintained thanks to the support from [Shopify](https://shopify.com), [Expo.io](https://expo.io) and [Software Mansion](https://swmansion.com)
 
+[![shopify](https://avatars1.githubusercontent.com/u/8085?v=3&s=100 'Shopify.com')](https://shopify.com)
 [![expo](https://avatars2.githubusercontent.com/u/12504344?v=3&s=100 'Expo.io')](https://expo.io)
-[![swm](https://logo.swmansion.com/logo?color=white&variant=desktop&width=150&tag=react-native-screens-github 'Software Mansion')](https://swmansion.com)
+[![swm](https://logo.swmansion.com/logo?color=white&variant=desktop&width=150&tag=react-native-reanimated-github 'Software Mansion')](https://swmansion.com)

package/android/build.gradle

@@ -4,7 +4,6 @@ buildscript {
     }
     repositories {
         google()
-        jcenter()
         mavenCentral()
     }
     dependencies {
@@ -50,7 +49,6 @@ repositories {
     mavenCentral()
     mavenLocal()
     google()
-    jcenter()
 }
 
 dependencies {
@@ -60,4 +58,5 @@ dependencies {
     implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'
     implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'
     implementation 'com.google.android.material:material:1.1.0'
+    implementation "androidx.core:core-ktx:1.5.0"
 }

package/android/src/main/java/com/swmansion/rnscreens/CustomSearchView.kt

@@ -0,0 +1,71 @@
+package com.swmansion.rnscreens
+
+import android.content.Context
+import androidx.activity.OnBackPressedCallback
+import androidx.appcompat.widget.SearchView
+import androidx.fragment.app.Fragment
+
+class CustomSearchView(context: Context, fragment: Fragment) : SearchView(context) {
+    /*
+        CustomSearchView uses some variables from SearchView. They are listed below with links to documentation
+        isIconified - https://developer.android.com/reference/android/widget/SearchView#setIconified(boolean)
+        maxWidth - https://developer.android.com/reference/android/widget/SearchView#setMaxWidth(int)
+        setOnSearchClickListener - https://developer.android.com/reference/android/widget/SearchView#setOnSearchClickListener(android.view.View.OnClickListener)
+        setOnCloseListener - https://developer.android.com/reference/android/widget/SearchView#setOnCloseListener(android.widget.SearchView.OnCloseListener)
+    */
+    private var mCustomOnCloseListener: OnCloseListener? = null
+    private var mCustomOnSearchClickedListener: OnClickListener? = null
+
+    private var mOnBackPressedCallback: OnBackPressedCallback =
+        object : OnBackPressedCallback(true) {
+            override fun handleOnBackPressed() {
+                isIconified = true
+            }
+        }
+    private val backPressOverrider = FragmentBackPressOverrider(fragment, mOnBackPressedCallback)
+    var overrideBackAction: Boolean
+        set(value) {
+            backPressOverrider.overrideBackAction = value
+        }
+        get() = backPressOverrider.overrideBackAction
+
+    fun focus() {
+        isIconified = false
+        requestFocusFromTouch()
+    }
+
+    override fun setOnCloseListener(listener: OnCloseListener?) {
+        mCustomOnCloseListener = listener
+    }
+
+    override fun setOnSearchClickListener(listener: OnClickListener?) {
+        mCustomOnSearchClickedListener = listener
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        if (!isIconified) {
+            backPressOverrider.maybeAddBackCallback()
+        }
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        backPressOverrider.removeBackCallbackIfAdded()
+    }
+
+    init {
+        super.setOnSearchClickListener { v ->
+            mCustomOnSearchClickedListener?.onClick(v)
+            backPressOverrider.maybeAddBackCallback()
+        }
+
+        super.setOnCloseListener {
+            val result = mCustomOnCloseListener?.onClose() ?: false
+            backPressOverrider.removeBackCallbackIfAdded()
+            result
+        }
+
+        maxWidth = Integer.MAX_VALUE
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt

@@ -0,0 +1,7 @@
+package com.swmansion.rnscreens
+
+import android.content.Context
+import androidx.appcompat.widget.Toolbar
+
+// This class is used to store config closer to search bar
+open class CustomToolbar(context: Context, val config: ScreenStackHeaderConfig) : Toolbar(context)

package/android/src/main/java/com/swmansion/rnscreens/FragmentBackPressOverrider.kt

@@ -0,0 +1,29 @@
+package com.swmansion.rnscreens
+
+import androidx.activity.OnBackPressedCallback
+import androidx.fragment.app.Fragment
+
+class FragmentBackPressOverrider(
+    private val fragment: Fragment,
+    private val mOnBackPressedCallback: OnBackPressedCallback
+) {
+    private var mIsBackCallbackAdded: Boolean = false
+    var overrideBackAction: Boolean = true
+
+    fun maybeAddBackCallback() {
+        if (!mIsBackCallbackAdded && overrideBackAction) {
+            fragment.activity?.onBackPressedDispatcher?.addCallback(
+                fragment,
+                mOnBackPressedCallback
+            )
+            mIsBackCallbackAdded = true
+        }
+    }
+
+    fun removeBackCallbackIfAdded() {
+        if (mIsBackCallbackAdded) {
+            mOnBackPressedCallback.remove()
+            mIsBackCallbackAdded = false
+        }
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/RNScreensPackage.kt

@@ -15,6 +15,7 @@ class RNScreensPackage : ReactPackage {
             ScreenViewManager(),
             ScreenStackViewManager(),
             ScreenStackHeaderConfigViewManager(),
-            ScreenStackHeaderSubviewManager()
+            ScreenStackHeaderSubviewManager(),
+            SearchBarManager()
         )
 }

package/android/src/main/java/com/swmansion/rnscreens/Screen.kt

@@ -1,18 +1,13 @@
 package com.swmansion.rnscreens
 
 import android.annotation.SuppressLint
-import android.content.Context
 import android.content.pm.ActivityInfo
 import android.graphics.Paint
-import android.os.Build
 import android.os.Parcelable
 import android.util.SparseArray
-import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
-import android.view.inputmethod.InputMethodManager
 import android.webkit.WebView
-import android.widget.TextView
 import com.facebook.react.bridge.GuardedRunnable
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerModule
@@ -34,6 +29,8 @@ class Screen constructor(context: ReactContext?) : ViewGroup(context) {
     private var mStatusBarHidden: Boolean? = null
     private var mStatusBarTranslucent: Boolean? = null
     private var mStatusBarColor: Int? = null
+    private var mNavigationBarColor: Int? = null
+    private var mNavigationBarHidden: Boolean? = null
     var isStatusBarAnimated: Boolean? = null
     private var mNativeBackButtonDismissalEnabled = true
 
@@ -51,16 +48,6 @@ class Screen constructor(context: ReactContext?) : ViewGroup(context) {
         layoutParams = WindowManager.LayoutParams(WindowManager.LayoutParams.TYPE_APPLICATION)
     }
 
-    override fun onAnimationStart() {
-        super.onAnimationStart()
-        fragment?.onViewAnimationStart()
-    }
-
-    override fun onAnimationEnd() {
-        super.onAnimationEnd()
-        fragment?.onViewAnimationEnd()
-    }
-
     override fun dispatchSaveInstanceState(container: SparseArray<Parcelable>) {
         // do nothing, react native will keep the view hierarchy so no need to serialize/deserialize
         // view's states. The side effect of restoring is that TextInput components would trigger
@@ -87,28 +74,6 @@ class Screen constructor(context: ReactContext?) : ViewGroup(context) {
         }
     }
 
-    override fun onAttachedToWindow() {
-        super.onAttachedToWindow()
-        // This method implements a workaround for RN's autoFocus functionality. Because of the way
-        // autoFocus is implemented it sometimes gets triggered before native text view is mounted. As
-        // a result Android ignores calls for opening soft keyboard and here we trigger it manually
-        // again after the screen is attached.
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-            var view = focusedChild
-            if (view != null) {
-                while (view is ViewGroup) {
-                    view = view.focusedChild
-                }
-                if (view is TextView) {
-                    val textView = view
-                    if (textView.showSoftInputOnFocus) {
-                        textView.addOnAttachStateChangeListener(sShowSoftKeyboardOnAttach)
-                    }
-                }
-            }
-        }
-    }
-
     val headerConfig: ScreenStackHeaderConfig?
         get() {
             val child = getChildAt(0)
@@ -183,6 +148,13 @@ class Screen constructor(context: ReactContext?) : ViewGroup(context) {
         fragment?.let { ScreenWindowTraits.setOrientation(this, it.tryGetActivity()) }
     }
 
+    // Accepts one of 4 accessibility flags
+    // developer.android.com/reference/android/view/View#attr_android:importantForAccessibility
+    fun changeAccessibilityMode(mode: Int) {
+        this.importantForAccessibility = mode
+        this.headerConfig?.toolbar?.importantForAccessibility = mode
+    }
+
     var statusBarStyle: String?
         get() = mStatusBarStyle
         set(statusBarStyle) {
@@ -229,6 +201,31 @@ class Screen constructor(context: ReactContext?) : ViewGroup(context) {
             fragment?.let { ScreenWindowTraits.setColor(this, it.tryGetActivity(), it.tryGetContext()) }
         }
 
+    var navigationBarColor: Int?
+        get() = mNavigationBarColor
+        set(navigationBarColor) {
+            if (navigationBarColor != null) {
+                ScreenWindowTraits.applyDidSetNavigationBarAppearance()
+            }
+            mNavigationBarColor = navigationBarColor
+            fragment?.let { ScreenWindowTraits.setNavigationBarColor(this, it.tryGetActivity()) }
+        }
+
+    var isNavigationBarHidden: Boolean?
+        get() = mNavigationBarHidden
+        set(navigationBarHidden) {
+            if (navigationBarHidden != null) {
+                ScreenWindowTraits.applyDidSetNavigationBarAppearance()
+            }
+            mNavigationBarHidden = navigationBarHidden
+            fragment?.let {
+                ScreenWindowTraits.setNavigationBarHidden(
+                    this,
+                    it.tryGetActivity(),
+                )
+            }
+        }
+
     var nativeBackButtonDismissalEnabled: Boolean
         get() = mNativeBackButtonDismissalEnabled
         set(enableNativeBackButtonDismissal) {
@@ -252,20 +249,6 @@ class Screen constructor(context: ReactContext?) : ViewGroup(context) {
     }
 
     enum class WindowTraits {
-        ORIENTATION, COLOR, STYLE, TRANSLUCENT, HIDDEN, ANIMATED
-    }
-
-    companion object {
-        private val sShowSoftKeyboardOnAttach: OnAttachStateChangeListener =
-            object : OnAttachStateChangeListener {
-                override fun onViewAttachedToWindow(view: View) {
-                    val inputMethodManager =
-                        view.context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
-                    inputMethodManager.showSoftInput(view, 0)
-                    view.removeOnAttachStateChangeListener(this)
-                }
-
-                override fun onViewDetachedFromWindow(view: View) {}
-            }
+        ORIENTATION, COLOR, STYLE, TRANSLUCENT, HIDDEN, ANIMATED, NAVIGATION_BAR_COLOR, NAVIGATION_BAR_HIDDEN
     }
 }

package/android/src/main/java/com/swmansion/rnscreens/ScreenContainer.kt

@@ -166,7 +166,7 @@ open class ScreenContainer<T : ScreenFragment>(context: Context?) : ViewGroup(co
         while (context !is FragmentActivity && context is ContextWrapper) {
             context = context.baseContext
         }
-        check(context is FragmentActivity) { "In order to use RNScreens components your app's activity need to extend ReactFragmentActivity or ReactCompatActivity" }
+        check(context is FragmentActivity) { "In order to use RNScreens components your app's activity need to extend ReactActivity" }
         setFragmentManager(context.supportFragmentManager)
     }
 

package/android/src/main/java/com/swmansion/rnscreens/ScreenFragment.kt

@@ -2,6 +2,7 @@ package com.swmansion.rnscreens
 
 import android.annotation.SuppressLint
 import android.app.Activity
+import android.content.Context
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
@@ -37,6 +38,17 @@ open class ScreenFragment : Fragment {
     // due to progress value being already 0.0f
     private var mProgress = -1f
 
+    // those 2 vars are needed since sometimes the events would be dispatched twice in child containers
+    // (should only happen if parent has `NONE` animation) and we don't need too complicated logic.
+    // We just check if, after the event was dispatched, its "counter-event" has been also dispatched before sending the same event again.
+    // We do it for 'willAppear' -> 'willDisappear' and 'appear' -> 'disappear'
+    private var canDispatchWillAppear = true
+    private var canDispatchAppear = true
+
+    // we want to know if we are currently transitioning in order not to fire lifecycle events
+    // in nested fragments. See more explanation in dispatchViewAnimationEvent
+    private var isTransitioning = false
+
     constructor() {
         throw IllegalStateException(
             "Screen fragments should never be restored. Follow instructions from https://github.com/software-mansion/react-native-screens/issues/17#issuecomment-424704067 to properly configure your main activity."
@@ -61,7 +73,7 @@ open class ScreenFragment : Fragment {
         container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        val wrapper = context?.let { FrameLayout(it) }
+        val wrapper = context?.let { ScreensFrameLayout(it) }
 
         val params = FrameLayout.LayoutParams(
             ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT
@@ -71,6 +83,23 @@ open class ScreenFragment : Fragment {
         return wrapper
     }
 
+    private class ScreensFrameLayout(
+        context: Context,
+    ) : FrameLayout(context) {
+        /**
+         * This method implements a workaround for RN's autoFocus functionality. Because of the way
+         * autoFocus is implemented it dismisses soft keyboard in fragment transition
+         * due to change of visibility of the view at the start of the transition. Here we override the
+         * call to `clearFocus` when the visibility of view is `INVISIBLE` since `clearFocus` triggers the
+         * hiding of the keyboard in `ReactEditText.java`.
+         */
+        override fun clearFocus() {
+            if (visibility != INVISIBLE) {
+                super.clearFocus()
+            }
+        }
+    }
+
     open fun onContainerUpdate() {
         updateWindowTraits()
     }
@@ -123,33 +152,52 @@ open class ScreenFragment : Fragment {
     val childScreenContainers: List<ScreenContainer<*>>
         get() = mChildScreenContainers
 
-    fun dispatchOnWillAppear() {
+    private fun canDispatchEvent(event: ScreenLifecycleEvent): Boolean {
+        return when (event) {
+            ScreenLifecycleEvent.WillAppear -> canDispatchWillAppear
+            ScreenLifecycleEvent.Appear -> canDispatchAppear
+            ScreenLifecycleEvent.WillDisappear -> !canDispatchWillAppear
+            ScreenLifecycleEvent.Disappear -> !canDispatchAppear
+        }
+    }
+
+    private fun setLastEventDispatched(event: ScreenLifecycleEvent) {
+        when (event) {
+            ScreenLifecycleEvent.WillAppear -> canDispatchWillAppear = false
+            ScreenLifecycleEvent.Appear -> canDispatchAppear = false
+            ScreenLifecycleEvent.WillDisappear -> canDispatchWillAppear = true
+            ScreenLifecycleEvent.Disappear -> canDispatchAppear = true
+        }
+    }
+
+    private fun dispatchOnWillAppear() {
         dispatchEvent(ScreenLifecycleEvent.WillAppear, this)
 
         dispatchTransitionProgress(0.0f, false)
     }
 
-    fun dispatchOnAppear() {
+    private fun dispatchOnAppear() {
         dispatchEvent(ScreenLifecycleEvent.Appear, this)
 
         dispatchTransitionProgress(1.0f, false)
     }
 
-    protected fun dispatchOnWillDisappear() {
+    private fun dispatchOnWillDisappear() {
         dispatchEvent(ScreenLifecycleEvent.WillDisappear, this)
 
         dispatchTransitionProgress(0.0f, true)
     }
 
-    protected fun dispatchOnDisappear() {
+    private fun dispatchOnDisappear() {
         dispatchEvent(ScreenLifecycleEvent.Disappear, this)
 
         dispatchTransitionProgress(1.0f, true)
     }
 
     private fun dispatchEvent(event: ScreenLifecycleEvent, fragment: ScreenFragment) {
-        if (fragment is ScreenStackFragment) {
+        if (fragment is ScreenStackFragment && fragment.canDispatchEvent(event)) {
             fragment.screen.let {
+                fragment.setLastEventDispatched(event)
                 val lifecycleEvent: Event<*> = when (event) {
                     ScreenLifecycleEvent.WillAppear -> ScreenWillAppearEvent(it.id)
                     ScreenLifecycleEvent.Appear -> ScreenAppearEvent(it.id)
@@ -169,12 +217,7 @@ open class ScreenFragment : Fragment {
         for (sc in mChildScreenContainers) {
             if (sc.screenCount > 0) {
                 sc.topScreen?.let {
-                    if (it.stackAnimation !== Screen.StackAnimation.NONE || isRemoving) {
-                        // we do not dispatch events in child when it has `none` animation
-                        // and we are going forward since then they will be dispatched in child via
-                        // `onCreateAnimation` of ScreenStackFragment
-                        sc.topScreen?.fragment?.let { fragment -> dispatchEvent(event, fragment) }
-                    }
+                    sc.topScreen?.fragment?.let { fragment -> dispatchEvent(event, fragment) }
                 }
             }
         }
@@ -220,31 +263,37 @@ open class ScreenFragment : Fragment {
     }
 
     fun onViewAnimationStart() {
-        // onViewAnimationStart is triggered from View#onAnimationStart method of the fragment's root
-        // view. We override Screen#onAnimationStart and an appropriate method of the StackFragment's
-        // root view in order to achieve this.
-        if (isResumed) {
-            // Android dispatches the animation start event for the fragment that is being added first
-            // however we want the one being dismissed first to match iOS. It also makes more sense from
-            // a navigation point of view to have the disappear event first.
-            // Since there are no explicit relationships between the fragment being added / removed the
-            // practical way to fix this is delaying dispatching the appear events at the end of the
-            // frame.
-            UiThreadUtil.runOnUiThread { dispatchOnWillAppear() }
-        } else {
-            dispatchOnWillDisappear()
-        }
+        dispatchViewAnimationEvent(false)
     }
 
     open fun onViewAnimationEnd() {
-        // onViewAnimationEnd is triggered from View#onAnimationEnd method of the fragment's root view.
-        // We override Screen#onAnimationEnd and an appropriate method of the StackFragment's root view
-        // in order to achieve this.
-        if (isResumed) {
-            // See the comment in onViewAnimationStart for why this event is delayed.
-            UiThreadUtil.runOnUiThread { dispatchOnAppear() }
-        } else {
-            dispatchOnDisappear()
+        dispatchViewAnimationEvent(true)
+    }
+
+    private fun dispatchViewAnimationEvent(animationEnd: Boolean) {
+        isTransitioning = !animationEnd
+        // if parent fragment is transitioning, we do not want the events dispatched from the child,
+        // since we subscribe to parent's animation start/end and dispatch events in child from there
+        // check for `isTransitioning` should be enough since the child's animation should take only
+        // 20ms due to always being `StackAnimation.NONE` when nested stack being pushed
+        val parent = parentFragment
+        if (parent == null || (parent is ScreenFragment && !parent.isTransitioning)) {
+            // onViewAnimationStart/End is triggered from View#onAnimationStart/End method of the fragment's root
+            // view. We override an appropriate method of the StackFragment's
+            // root view in order to achieve this.
+            if (isResumed) {
+                // Android dispatches the animation start event for the fragment that is being added first
+                // however we want the one being dismissed first to match iOS. It also makes more sense from
+                // a navigation point of view to have the disappear event first.
+                // Since there are no explicit relationships between the fragment being added / removed the
+                // practical way to fix this is delaying dispatching the appear events at the end of the
+                // frame.
+                UiThreadUtil.runOnUiThread {
+                    if (animationEnd) dispatchOnAppear() else dispatchOnWillAppear()
+                }
+            } else {
+                if (animationEnd) dispatchOnDisappear() else dispatchOnWillDisappear()
+            }
         }
     }