react-native-screens 3.10.2 → 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

@@ -123,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)
 
@@ -132,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
 
@@ -158,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
 
@@ -169,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

@@ -58,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/Screen.kt

@@ -29,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
 
@@ -46,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
@@ -209,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) {
@@ -232,6 +249,6 @@ class Screen constructor(context: ReactContext?) : ViewGroup(context) {
     }
 
     enum class WindowTraits {
-        ORIENTATION, COLOR, STYLE, TRANSLUCENT, HIDDEN, ANIMATED
+        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

@@ -38,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."
@@ -141,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)
@@ -187,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) }
                 }
             }
         }
@@ -238,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()
+            }
         }
     }
 

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

@@ -3,7 +3,6 @@ package com.swmansion.rnscreens
 import android.content.Context
 import android.graphics.Canvas
 import android.view.View
-import androidx.fragment.app.FragmentTransaction
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerModule
 import com.swmansion.rnscreens.Screen.StackAnimation
@@ -110,7 +109,6 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
             }
         }
         var shouldUseOpenAnimation = true
-        var transition = FragmentTransaction.TRANSIT_FRAGMENT_OPEN
         var stackAnimation: StackAnimation? = null
         if (!mStack.contains(newTop)) {
             // if new top screen wasn't on stack we do "open animation" so long it is not the very first
@@ -127,17 +125,9 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
                 stackAnimation = if (shouldUseOpenAnimation) newTop.screen.stackAnimation else mTopScreen?.screen?.stackAnimation
             } else if (mTopScreen == null && newTop != null) {
                 // mTopScreen was not present before so newTop is the first screen added to a stack
-                // and we don't want the animation when it is entering, but we want to send the
-                // willAppear and Appear events to the user, which won't be sent by default if Screen's
-                // stack animation is not NONE (see check for stackAnimation in onCreateAnimation in
-                // ScreenStackFragment).
-                // We don't do it if the stack is nested since the parent will trigger these events in child
+                // and we don't want the animation when it is entering
                 stackAnimation = StackAnimation.NONE
-                if (newTop.screen.stackAnimation !== StackAnimation.NONE && !isNested) {
-                    goingForward = true
-                    newTop.dispatchOnWillAppear()
-                    newTop.dispatchOnAppear()
-                }
+                goingForward = true
             }
         } else if (mTopScreen != null && mTopScreen != newTop) {
             // otherwise if we are performing top screen change we do "close animation"
@@ -149,40 +139,32 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
             // animation logic start
             if (stackAnimation != null) {
                 if (shouldUseOpenAnimation) {
-                    transition = FragmentTransaction.TRANSIT_FRAGMENT_OPEN
                     when (stackAnimation) {
+                        StackAnimation.DEFAULT -> it.setCustomAnimations(R.anim.rns_default_enter_in, R.anim.rns_default_enter_out)
+                        StackAnimation.NONE -> it.setCustomAnimations(R.anim.rns_no_animation_20, R.anim.rns_no_animation_20)
+                        StackAnimation.FADE -> it.setCustomAnimations(R.anim.rns_fade_in, R.anim.rns_fade_out)
                         StackAnimation.SLIDE_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_slide_in_from_right, R.anim.rns_slide_out_to_left)
                         StackAnimation.SLIDE_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_slide_in_from_left, R.anim.rns_slide_out_to_right)
                         StackAnimation.SLIDE_FROM_BOTTOM -> it.setCustomAnimations(
                             R.anim.rns_slide_in_from_bottom, R.anim.rns_no_animation_medium
                         )
                         StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_fade_from_bottom, R.anim.rns_no_animation_350)
-                        else -> {
-                        }
                     }
                 } else {
-                    transition = FragmentTransaction.TRANSIT_FRAGMENT_CLOSE
                     when (stackAnimation) {
+                        StackAnimation.DEFAULT -> it.setCustomAnimations(R.anim.rns_default_exit_in, R.anim.rns_default_exit_out)
+                        StackAnimation.NONE -> it.setCustomAnimations(R.anim.rns_no_animation_20, R.anim.rns_no_animation_20)
+                        StackAnimation.FADE -> it.setCustomAnimations(R.anim.rns_fade_in, R.anim.rns_fade_out)
                         StackAnimation.SLIDE_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_slide_in_from_left, R.anim.rns_slide_out_to_right)
                         StackAnimation.SLIDE_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_slide_in_from_right, R.anim.rns_slide_out_to_left)
                         StackAnimation.SLIDE_FROM_BOTTOM -> it.setCustomAnimations(
                             R.anim.rns_no_animation_medium, R.anim.rns_slide_out_to_bottom
                         )
                         StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_no_animation_250, R.anim.rns_fade_to_bottom)
-                        else -> {
-                        }
                     }
                 }
             }
-            if (stackAnimation === StackAnimation.NONE) {
-                transition = FragmentTransaction.TRANSIT_NONE
-            }
-            if (stackAnimation === StackAnimation.FADE) {
-                transition = FragmentTransaction.TRANSIT_FRAGMENT_FADE
-            }
-            if (stackAnimation != null && isSystemAnimation(stackAnimation)) {
-                it.setTransition(transition)
-            }
+
             // animation logic end
             goingForward = shouldUseOpenAnimation
 
@@ -348,10 +330,6 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
     }
 
     companion object {
-        private fun isSystemAnimation(stackAnimation: StackAnimation): Boolean {
-            return stackAnimation === StackAnimation.DEFAULT || stackAnimation === StackAnimation.FADE || stackAnimation === StackAnimation.NONE
-        }
-
         private fun isTransparent(fragment: ScreenStackFragment): Boolean {
             return (
                 fragment.screen.stackPresentation

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

@@ -16,7 +16,6 @@ import android.view.animation.Transformation
 import android.widget.LinearLayout
 import androidx.appcompat.widget.Toolbar
 import androidx.coordinatorlayout.widget.CoordinatorLayout
-import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.uimanager.PixelUtil
 import com.google.android.material.appbar.AppBarLayout
 import com.google.android.material.appbar.AppBarLayout.ScrollingViewBehavior
@@ -86,35 +85,6 @@ class ScreenStackFragment : ScreenFragment {
         notifyViewAppearTransitionEnd()
     }
 
-    override fun onCreateAnimation(transit: Int, enter: Boolean, nextAnim: Int): Animation? {
-        // this means that the fragment will appear with a custom transition, in the case
-        // of animation: 'none', onViewAnimationStart and onViewAnimationEnd
-        // won't be called and we need to notify stack directly from here.
-        // When using the Toolbar back button this is called an extra time with transit = 0 but in
-        // this case we don't want to notify. The way I found to detect is case is check isHidden.
-        if (transit == 0 && !isHidden &&
-            screen.stackAnimation === Screen.StackAnimation.NONE
-        ) {
-            if (enter) {
-                // 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()
-                    dispatchOnAppear()
-                }
-            } else {
-                dispatchOnWillDisappear()
-                dispatchOnDisappear()
-                notifyViewAppearTransitionEnd()
-            }
-        }
-        return null
-    }
-
     private fun notifyViewAppearTransitionEnd() {
         val screenStack = view?.parent
         if (screenStack is ScreenStack) {

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

@@ -24,6 +24,7 @@ import com.facebook.react.views.text.ReactTypefaceUtils
 class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
     private val mConfigSubviews = ArrayList<ScreenStackHeaderSubview>(3)
     val toolbar: CustomToolbar
+    private var headerTopInset: Int? = null
     private var mTitle: String? = null
     private var mTitleColor = 0
     private var mTitleFontFamily: String? = null
@@ -81,6 +82,15 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
         super.onAttachedToWindow()
         mIsAttachedToWindow = true
         sendEvent("onAttached", null)
+        // we want to save the top inset before the status bar can be hidden, which would resolve in
+        // inset being 0
+        if (headerTopInset == null) {
+            headerTopInset = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M)
+                rootWindowInsets.systemWindowInsetTop
+            else
+            // Hacky fallback for old android. Before Marshmallow, the status bar height was always 25
+                (25 * resources.displayMetrics.density).toInt()
+        }
         onUpdate()
     }
 
@@ -159,11 +169,8 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
             screenFragment?.setToolbar(toolbar)
         }
         if (mIsTopInsetEnabled) {
-            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-                toolbar.setPadding(0, rootWindowInsets.systemWindowInsetTop, 0, 0)
-            } else {
-                // Hacky fallback for old android. Before Marshmallow, the status bar height was always 25
-                toolbar.setPadding(0, (25 * resources.displayMetrics.density).toInt(), 0, 0)
+            headerTopInset.let {
+                toolbar.setPadding(0, it ?: 0, 0, 0)
             }
         } else {
             if (toolbar.paddingTop > 0) {

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

@@ -112,6 +112,16 @@ class ScreenViewManager : ViewGroupManager<Screen>() {
         view.isStatusBarHidden = statusBarHidden
     }
 
+    @ReactProp(name = "navigationBarColor", customType = "Color")
+    fun setNavigationBarColor(view: Screen, navigationBarColor: Int) {
+        view.navigationBarColor = navigationBarColor
+    }
+
+    @ReactProp(name = "navigationBarHidden")
+    fun setNavigationBarHidden(view: Screen, navigationBarHidden: Boolean?) {
+        view.isNavigationBarHidden = navigationBarHidden
+    }
+
     @ReactProp(name = "nativeBackButtonDismissalEnabled")
     fun setNativeBackButtonDismissalEnabled(
         view: Screen,

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

@@ -6,11 +6,15 @@ import android.annotation.SuppressLint
 import android.annotation.TargetApi
 import android.app.Activity
 import android.content.pm.ActivityInfo
+import android.graphics.Color
 import android.os.Build
 import android.view.View
 import android.view.ViewParent
 import android.view.WindowManager
 import androidx.core.view.ViewCompat
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.WindowInsetsControllerCompat
 import com.facebook.react.bridge.GuardedRunnable
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.UiThreadUtil
@@ -21,6 +25,7 @@ object ScreenWindowTraits {
     // https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.java
     private var mDidSetOrientation = false
     private var mDidSetStatusBarAppearance = false
+    private var mDidSetNavigationBarAppearance = false
     private var mDefaultStatusBarColor: Int? = null
     internal fun applyDidSetOrientation() {
         mDidSetOrientation = true
@@ -30,6 +35,10 @@ object ScreenWindowTraits {
         mDidSetStatusBarAppearance = true
     }
 
+    internal fun applyDidSetNavigationBarAppearance() {
+        mDidSetNavigationBarAppearance = true
+    }
+
     internal fun setOrientation(screen: Screen, activity: Activity?) {
         if (activity == null) {
             return
@@ -72,23 +81,21 @@ object ScreenWindowTraits {
     }
 
     internal fun setStyle(screen: Screen, activity: Activity?, context: ReactContext?) {
-        if (activity == null || context == null) {
+        if (activity == null || context == null || Build.VERSION.SDK_INT < Build.VERSION_CODES.M) {
             return
         }
         val screenForStyle = findScreenForTrait(screen, WindowTraits.STYLE)
         val style = screenForStyle?.statusBarStyle ?: "light"
 
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-            UiThreadUtil.runOnUiThread {
-                val decorView = activity.window.decorView
-                var systemUiVisibilityFlags = decorView.systemUiVisibility
-                systemUiVisibilityFlags = if ("dark" == style) {
-                    systemUiVisibilityFlags or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
-                } else {
-                    systemUiVisibilityFlags and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()
-                }
-                decorView.systemUiVisibility = systemUiVisibilityFlags
+        UiThreadUtil.runOnUiThread {
+            val decorView = activity.window.decorView
+            var systemUiVisibilityFlags = decorView.systemUiVisibility
+            systemUiVisibilityFlags = if ("dark" == style) {
+                systemUiVisibilityFlags or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
+            } else {
+                systemUiVisibilityFlags and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()
             }
+            decorView.systemUiVisibility = systemUiVisibilityFlags
         }
     }
 
@@ -144,6 +151,48 @@ object ScreenWindowTraits {
         }
     }
 
+    // Methods concerning navigationBar management were taken from `react-native-navigation`'s repo:
+    // https://github.com/wix/react-native-navigation/blob/9bb70d81700692141a2c505c081c2d86c7f9c66e/lib/android/app/src/main/java/com/reactnativenavigation/utils/SystemUiUtils.kt
+    internal fun setNavigationBarColor(screen: Screen, activity: Activity?) {
+        if (activity == null) {
+            return
+        }
+
+        val window = activity.window
+
+        val screenForNavBarColor = findScreenForTrait(screen, WindowTraits.NAVIGATION_BAR_COLOR)
+        val color = screenForNavBarColor?.navigationBarColor ?: window.navigationBarColor
+
+        WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightNavigationBars =
+            isColorLight(color)
+        window.navigationBarColor = color
+    }
+
+    internal fun setNavigationBarHidden(screen: Screen, activity: Activity?) {
+        if (activity == null) {
+            return
+        }
+
+        val window = activity.window
+
+        val screenForNavBarHidden = findScreenForTrait(screen, WindowTraits.NAVIGATION_BAR_HIDDEN)
+        val hidden = screenForNavBarHidden?.isNavigationBarHidden ?: false
+
+        WindowCompat.setDecorFitsSystemWindows(window, hidden)
+        if (hidden) {
+            WindowInsetsControllerCompat(window, window.decorView).let { controller ->
+                controller.hide(WindowInsetsCompat.Type.navigationBars())
+                controller.systemBarsBehavior =
+                    WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
+            }
+        } else {
+            WindowInsetsControllerCompat(
+                window,
+                window.decorView
+            ).show(WindowInsetsCompat.Type.navigationBars())
+        }
+    }
+
     internal fun trySetWindowTraits(screen: Screen, activity: Activity?, context: ReactContext?) {
         if (mDidSetOrientation) {
             setOrientation(screen, activity)
@@ -154,6 +203,10 @@ object ScreenWindowTraits {
             setTranslucent(screen, activity, context)
             setHidden(screen, activity)
         }
+        if (mDidSetNavigationBarAppearance) {
+            setNavigationBarColor(screen, activity)
+            setNavigationBarHidden(screen, activity)
+        }
     }
 
     private fun findScreenForTrait(screen: Screen, trait: WindowTraits): Screen? {
@@ -211,6 +264,14 @@ object ScreenWindowTraits {
             WindowTraits.TRANSLUCENT -> screen.isStatusBarTranslucent != null
             WindowTraits.HIDDEN -> screen.isStatusBarHidden != null
             WindowTraits.ANIMATED -> screen.isStatusBarAnimated != null
+            WindowTraits.NAVIGATION_BAR_COLOR -> screen.navigationBarColor != null
+            WindowTraits.NAVIGATION_BAR_HIDDEN -> screen.isNavigationBarHidden != null
         }
     }
+
+    private fun isColorLight(color: Int): Boolean {
+        val darkness: Double =
+            1 - (0.299 * Color.red(color) + 0.587 * Color.green(color) + 0.114 * Color.blue(color)) / 255
+        return darkness < 0.5
+    }
 }