react-native-screens 3.9.0 → 3.11.0

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
@@ -121,21 +119,15 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
                 // before, probably replace or reset was called, so we play the "close animation".
                 // Otherwise it's open animation
                 val containsTopScreen = mTopScreen?.let { mScreenFragments.contains(it) } == true
-                shouldUseOpenAnimation = containsTopScreen || newTop.screen.replaceAnimation !== Screen.ReplaceAnimation.POP
-                stackAnimation = newTop.screen.stackAnimation
+                val isPushReplace = newTop.screen.replaceAnimation === Screen.ReplaceAnimation.PUSH
+                shouldUseOpenAnimation = containsTopScreen || isPushReplace
+                // if the replace animation is `push`, the new top screen provides the animation, otherwise the previous one
+                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"
@@ -147,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
 
@@ -236,10 +220,35 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
             mTopScreen = newTop
             mStack.clear()
             mStack.addAll(mScreenFragments)
+
+            turnOffA11yUnderTransparentScreen(visibleBottom)
+
             it.commitNowAllowingStateLoss()
         }
     }
 
+    // only top visible screen should be accessible
+    private fun turnOffA11yUnderTransparentScreen(visibleBottom: ScreenStackFragment?) {
+        if (mScreenFragments.size > 1 && visibleBottom != null) {
+            mTopScreen?.let {
+                if (isTransparent(it)) {
+                    val screenFragmentsBeneathTop = mScreenFragments.slice(0 until mScreenFragments.size - 1).asReversed()
+                    // go from the top of the stack excluding the top screen
+                    for (screenFragment in screenFragmentsBeneathTop) {
+                        screenFragment.screen.changeAccessibilityMode(IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS)
+
+                        // don't change a11y below non-transparent screens
+                        if (screenFragment == visibleBottom) {
+                            break
+                        }
+                    }
+                }
+            }
+        }
+
+        topScreen?.changeAccessibilityMode(IMPORTANT_FOR_ACCESSIBILITY_AUTO)
+    }
+
     override fun notifyContainerUpdate() {
         for (screen in mStack) {
             screen.onContainerUpdate()
@@ -321,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

@@ -5,6 +5,9 @@ import android.content.Context
 import android.graphics.Color
 import android.os.Bundle
 import android.view.LayoutInflater
+import android.view.Menu
+import android.view.MenuInflater
+import android.view.MenuItem
 import android.view.View
 import android.view.ViewGroup
 import android.view.animation.Animation
@@ -13,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
@@ -24,6 +26,9 @@ class ScreenStackFragment : ScreenFragment {
     private var mShadowHidden = false
     private var mIsTranslucent = false
 
+    var searchView: CustomSearchView? = null
+    var onSearchViewCreate: ((searchView: CustomSearchView) -> Unit)? = null
+
     @SuppressLint("ValidFragment")
     constructor(screenView: Screen) : super(screenView)
 
@@ -64,7 +69,8 @@ class ScreenStackFragment : ScreenFragment {
     fun setToolbarTranslucent(translucent: Boolean) {
         if (mIsTranslucent != translucent) {
             val params = screen.layoutParams
-            (params as CoordinatorLayout.LayoutParams).behavior = if (translucent) null else ScrollingViewBehavior()
+            (params as CoordinatorLayout.LayoutParams).behavior =
+                if (translucent) null else ScrollingViewBehavior()
             mIsTranslucent = translucent
         }
     }
@@ -79,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) {
@@ -120,7 +97,8 @@ class ScreenStackFragment : ScreenFragment {
         container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        val view: NotifyingCoordinatorLayout? = context?.let { NotifyingCoordinatorLayout(it, this) }
+        val view: ScreensCoordinatorLayout? =
+            context?.let { ScreensCoordinatorLayout(it, this) }
         val params = CoordinatorLayout.LayoutParams(
             LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT
         )
@@ -142,9 +120,49 @@ class ScreenStackFragment : ScreenFragment {
             mAppBarLayout?.targetElevation = 0f
         }
         mToolbar?.let { mAppBarLayout?.addView(recycleView(it)) }
+        setHasOptionsMenu(true)
         return view
     }
 
+    override fun onPrepareOptionsMenu(menu: Menu) {
+        updateToolbarMenu(menu)
+        return super.onPrepareOptionsMenu(menu)
+    }
+
+    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
+        updateToolbarMenu(menu)
+        return super.onCreateOptionsMenu(menu, inflater)
+    }
+
+    private fun shouldShowSearchBar(): Boolean {
+        val config = screen.headerConfig
+        val numberOfSubViews = config?.configSubviewsCount ?: 0
+        if (config != null && numberOfSubViews > 0) {
+            for (i in 0 until numberOfSubViews) {
+                val subView = config.getConfigSubview(i)
+                if (subView.type == ScreenStackHeaderSubview.Type.SEARCH_BAR) {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+
+    private fun updateToolbarMenu(menu: Menu) {
+        menu.clear()
+        if (shouldShowSearchBar()) {
+            val currentContext = context
+            if (searchView == null && currentContext != null) {
+                val newSearchView = CustomSearchView(currentContext, this)
+                searchView = newSearchView
+                onSearchViewCreate?.invoke(newSearchView)
+            }
+            val item = menu.add("")
+            item.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)
+            item.actionView = searchView
+        }
+    }
+
     fun canNavigateBack(): Boolean {
         val container: ScreenContainer<*>? = screen.container
         check(container is ScreenStack) { "ScreenStackFragment added into a non-stack container" }
@@ -168,18 +186,22 @@ class ScreenStackFragment : ScreenFragment {
         container.dismiss(this)
     }
 
-    private class NotifyingCoordinatorLayout(context: Context, private val mFragment: ScreenFragment) : CoordinatorLayout(context) {
-        private val mAnimationListener: Animation.AnimationListener = object : Animation.AnimationListener {
-            override fun onAnimationStart(animation: Animation) {
-                mFragment.onViewAnimationStart()
-            }
+    private class ScreensCoordinatorLayout(
+        context: Context,
+        private val mFragment: ScreenFragment
+    ) : CoordinatorLayout(context) {
+        private val mAnimationListener: Animation.AnimationListener =
+            object : Animation.AnimationListener {
+                override fun onAnimationStart(animation: Animation) {
+                    mFragment.onViewAnimationStart()
+                }
 
-            override fun onAnimationEnd(animation: Animation) {
-                mFragment.onViewAnimationEnd()
-            }
+                override fun onAnimationEnd(animation: Animation) {
+                    mFragment.onViewAnimationEnd()
+                }
 
-            override fun onAnimationRepeat(animation: Animation) {}
-        }
+                override fun onAnimationRepeat(animation: Animation) {}
+            }
 
         override fun startAnimation(animation: Animation) {
             // For some reason View##onAnimationEnd doesn't get called for
@@ -205,6 +227,19 @@ class ScreenStackFragment : ScreenFragment {
                 super.startAnimation(set)
             }
         }
+
+        /**
+         * 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()
+            }
+        }
     }
 
     private class ScreensAnimation(private val mFragment: ScreenFragment) : Animation() {

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

@@ -17,11 +17,14 @@ import androidx.fragment.app.Fragment
 import com.facebook.react.ReactApplication
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException
 import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.facebook.react.views.text.ReactTypefaceUtils
 
 class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
     private val mConfigSubviews = ArrayList<ScreenStackHeaderSubview>(3)
-    val toolbar: Toolbar
+    val toolbar: CustomToolbar
+    private var headerTopInset: Int? = null
     private var mTitle: String? = null
     private var mTitleColor = 0
     private var mTitleFontFamily: String? = null
@@ -62,6 +65,11 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
         }
     }
 
+    private fun sendEvent(eventName: String, eventContent: WritableMap?) {
+        (context as ReactContext).getJSModule(RCTEventEmitter::class.java)
+            ?.receiveEvent(id, eventName, eventContent)
+    }
+
     override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
         // no-op
     }
@@ -73,12 +81,23 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
     override fun onAttachedToWindow() {
         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()
     }
 
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
         mIsAttachedToWindow = false
+        sendEvent("onDetached", null)
     }
 
     private val screen: Screen?
@@ -99,7 +118,7 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
             }
             return null
         }
-    private val screenFragment: ScreenStackFragment?
+    val screenFragment: ScreenStackFragment?
         get() {
             val screen = parent
             if (screen is Screen) {
@@ -150,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) {
@@ -369,7 +385,7 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
         mDirection = direction
     }
 
-    private class DebugMenuToolbar(context: Context) : Toolbar(context) {
+    private class DebugMenuToolbar(context: Context, config: ScreenStackHeaderConfig) : CustomToolbar(context, config) {
         override fun showOverflowMenu(): Boolean {
             (context.applicationContext as ReactApplication)
                 .reactNativeHost
@@ -381,7 +397,7 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
 
     init {
         visibility = GONE
-        toolbar = if (BuildConfig.DEBUG) DebugMenuToolbar(context) else Toolbar(context)
+        toolbar = if (BuildConfig.DEBUG) DebugMenuToolbar(context, this) else CustomToolbar(context, this)
         mDefaultStartInset = toolbar.contentInsetStart
         mDefaultStartInsetWithNavigation = toolbar.contentInsetStartWithNavigation
 

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

@@ -2,6 +2,7 @@ package com.swmansion.rnscreens
 
 import android.view.View
 import com.facebook.react.bridge.JSApplicationCausedNativeException
+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
@@ -129,6 +130,13 @@ class ScreenStackHeaderConfigViewManager : ViewGroupManager<ScreenStackHeaderCon
         config.setDirection(direction)
     }
 
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
+        return MapBuilder.builder<String, Any>()
+            .put("onAttached", MapBuilder.of("registrationName", "onAttached"))
+            .put("onDetached", MapBuilder.of("registrationName", "onDetached"))
+            .build()
+    }
+
     companion object {
         const val REACT_CLASS = "RNSScreenStackHeaderConfig"
     }

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

@@ -10,6 +10,12 @@ class ScreenStackHeaderSubview(context: ReactContext?) : ReactViewGroup(context)
     private var mReactWidth = 0
     private var mReactHeight = 0
     var type = Type.RIGHT
+
+    val config: ScreenStackHeaderConfig?
+        get() {
+            return (parent as? CustomToolbar)?.config
+        }
+
     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
         if (MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY &&
             MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY
@@ -31,6 +37,6 @@ class ScreenStackHeaderSubview(context: ReactContext?) : ReactViewGroup(context)
     }
 
     enum class Type {
-        LEFT, CENTER, RIGHT, BACK
+        LEFT, CENTER, RIGHT, BACK, SEARCH_BAR
     }
 }

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

@@ -24,6 +24,7 @@ class ScreenStackHeaderSubviewManager : ReactViewManager() {
             "center" -> ScreenStackHeaderSubview.Type.CENTER
             "right" -> ScreenStackHeaderSubview.Type.RIGHT
             "back" -> ScreenStackHeaderSubview.Type.BACK
+            "searchBar" -> ScreenStackHeaderSubview.Type.SEARCH_BAR
             else -> throw JSApplicationIllegalArgumentException("Unknown type $type")
         }
     }

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
+    }
 }