react-native-screens 3.10.0 → 3.11.1

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

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

@@ -65,7 +65,9 @@ class SearchBarManager : ViewGroupManager<SearchBarView>() {
 
     @ReactProp(name = "placeholder")
     fun setPlaceholder(view: SearchBarView, placeholder: String?) {
-        view.placeholder = placeholder
+        if (placeholder != null) {
+            view.placeholder = placeholder
+        }
     }
 
     @ReactProp(name = "textColor", customType = "Color")
@@ -73,6 +75,21 @@ class SearchBarManager : ViewGroupManager<SearchBarView>() {
         view.textColor = color
     }
 
+    @ReactProp(name = "headerIconColor", customType = "Color")
+    fun setHeaderIconColor(view: SearchBarView, color: Int?) {
+        view.headerIconColor = color
+    }
+
+    @ReactProp(name = "hintTextColor", customType = "Color")
+    fun setHintTextColor(view: SearchBarView, color: Int?) {
+        view.hintTextColor = color
+    }
+
+    @ReactProp(name = "shouldShowHintSearchIcon")
+    fun setShouldShowHintSearchIcon(view: SearchBarView, shouldShowHintSearchIcon: Boolean?) {
+        view.shouldShowHintSearchIcon = shouldShowHintSearchIcon ?: true
+    }
+
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
         return MapBuilder.builder<String, Any>()
             .put("onChangeText", MapBuilder.of("registrationName", "onChangeText"))

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

@@ -15,9 +15,12 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)
     var autoCapitalize: SearchBarAutoCapitalize = SearchBarAutoCapitalize.NONE
     var textColor: Int? = null
     var tintColor: Int? = null
-    var placeholder: String? = null
+    var headerIconColor: Int? = null
+    var hintTextColor: Int? = null
+    var placeholder: String = ""
     var shouldOverrideBackButton: Boolean = true
     var autoFocus: Boolean = false
+    var shouldShowHintSearchIcon: Boolean = true
 
     private var mSearchViewFormatter: SearchViewFormatter? = null
 
@@ -45,9 +48,11 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)
             }
 
             searchView.inputType = inputType.toAndroidInputType(autoCapitalize)
-            searchView.queryHint = placeholder
             mSearchViewFormatter?.setTextColor(textColor)
             mSearchViewFormatter?.setTintColor(tintColor)
+            mSearchViewFormatter?.setHeaderIconColor(headerIconColor)
+            mSearchViewFormatter?.setHintTextColor(hintTextColor)
+            mSearchViewFormatter?.setPlaceholder(placeholder, shouldShowHintSearchIcon)
             searchView.overrideBackAction = shouldOverrideBackButton
         }
     }

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

@@ -3,6 +3,8 @@ package com.swmansion.rnscreens
 import android.graphics.drawable.Drawable
 import android.view.View
 import android.widget.EditText
+import android.widget.ImageView
+import androidx.appcompat.R
 import androidx.appcompat.widget.SearchView
 
 class SearchViewFormatter(var searchView: SearchView) {
@@ -10,9 +12,13 @@ class SearchViewFormatter(var searchView: SearchView) {
     private var mDefaultTintBackground: Drawable? = null
 
     private val searchEditText
-        get() = searchView.findViewById<View>(androidx.appcompat.R.id.search_src_text) as? EditText
+        get() = searchView.findViewById<View>(R.id.search_src_text) as? EditText
     private val searchTextPlate
-        get() = searchView.findViewById<View>(androidx.appcompat.R.id.search_plate)
+        get() = searchView.findViewById<View>(R.id.search_plate)
+    private val searchIcon
+        get() = searchView.findViewById<ImageView>(R.id.search_button)
+    private val searchCloseIcon
+        get() = searchView.findViewById<ImageView>(R.id.search_close_btn)
 
     fun setTextColor(textColor: Int?) {
         val currentDefaultTextColor = mDefaultTextColor
@@ -37,4 +43,25 @@ class SearchViewFormatter(var searchView: SearchView) {
             searchTextPlate.background = currentDefaultTintColor
         }
     }
+
+    fun setHeaderIconColor(headerIconColor: Int?) {
+        headerIconColor?.let {
+            searchIcon.setColorFilter(it)
+            searchCloseIcon.setColorFilter(it)
+        }
+    }
+
+    fun setHintTextColor(hintTextColor: Int?) {
+        hintTextColor?.let {
+            searchEditText?.setHintTextColor(it)
+        }
+    }
+
+    fun setPlaceholder(placeholder: String, shouldShowHintSearchIcon: Boolean) {
+        if (shouldShowHintSearchIcon) {
+            searchView.queryHint = placeholder
+        } else {
+            searchEditText?.hint = placeholder
+        }
+    }
 }

package/android/src/main/res/anim/rns_default_enter_in.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <alpha
+        android:interpolator="@android:interpolator/accelerate_decelerate"
+        android:fromAlpha="0"
+        android:toAlpha="1.0"
+        android:startOffset="100"
+        android:duration="100"/>
+    <scale
+        android:interpolator="@android:interpolator/accelerate_decelerate"
+        android:fromXScale="0.85"
+        android:toXScale="1"
+        android:fromYScale="0.85"
+        android:toYScale="1"
+        android:pivotX="50%"
+        android:pivotY="50%"
+        android:duration="200"/>
+</set>

package/android/src/main/res/anim/rns_default_enter_out.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <alpha
+        android:fromAlpha="1"
+        android:toAlpha="0.4"
+        android:startOffset="100"
+        android:duration="100"
+        android:interpolator="@android:interpolator/accelerate_decelerate" />
+
+    <scale
+        android:interpolator="@android:interpolator/accelerate_decelerate"
+        android:fromXScale="1"
+        android:toXScale="1.15"
+        android:fromYScale="1"
+        android:toYScale="1.15"
+        android:pivotX="50%"
+        android:pivotY="50%"
+        android:duration="200"/>
+</set>

package/android/src/main/res/anim/rns_default_exit_in.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shareInterpolator="false">
+    <alpha
+        android:fromAlpha="0.0"
+        android:toAlpha="1"
+        android:startOffset="50"
+        android:duration="100"/>
+    <scale
+        android:fromXScale="1.15"
+        android:toXScale="1"
+        android:fromYScale="1.15"
+        android:toYScale="1"
+        android:pivotX="50%"
+        android:pivotY="50%"
+        android:duration="200"/>
+</set>

package/android/src/main/res/anim/rns_default_exit_out.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shareInterpolator="false"
+    android:zAdjustment="top">
+    <alpha
+        android:fromAlpha="1"
+        android:toAlpha="0.0"
+        android:startOffset="50"
+        android:duration="100"/>
+    <scale
+        android:fromXScale="1"
+        android:toXScale="0.85"
+        android:fromYScale="1"
+        android:toYScale="0.85"
+        android:pivotX="50%"
+        android:pivotY="50%"
+        android:duration="200"/>
+</set>

package/android/src/main/res/anim/rns_fade_in.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--Duration taken from debugging source code-->
+<alpha xmlns:android="http://schemas.android.com/apk/res/android"
+    android:fromAlpha="0.0"
+    android:toAlpha="1.0"
+    android:duration="150"
+    />  <!--Remember to change duration in the corresponding xml when modifying it-->

package/android/src/main/res/anim/rns_fade_out.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--Duration taken from debugging source code-->
+<alpha xmlns:android="http://schemas.android.com/apk/res/android"
+    android:fromAlpha="1.0"
+    android:toAlpha="0.0"
+    android:duration="150"
+    />  <!--Remember to change duration in the corresponding xml when modifying it-->

package/android/src/main/res/anim/rns_no_animation_20.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<alpha xmlns:android="http://schemas.android.com/apk/res/android"
+    android:fromAlpha="1.0"
+    android:toAlpha="1.0"
+    android:duration="20"
+    />  <!-- non-zero duration ensures transition events are triggered correctly -->

package/createNativeStackNavigator/README.md

@@ -360,10 +360,12 @@ Defaults to `auto`.
 
 Sets the translucency of the status bar (similar to the `StatusBar` component). Defaults to `false`.
 
-### Search bar
+### Search bar (iOS only)
 
 The search bar is just a `searchBar` property that can be specified in the navigator's `defaultNavigationOptions` prop or an individual screen's `navigationOptions`. Search bars are rarely static so normally it is controlled by passing an object to `searchBar` navigation option in the component's body.
 
+Search bar is only supported on iOS.
+
 Example: 
 
 ```js
@@ -388,11 +390,7 @@ Possible values:
 - `sentences`
 - `characters`
 
-Defaults to `sentences` on iOS and `'none'` on Android.
-
-#### `autoFocus` (Android only)
-
-When set to `true` focuses search bar automatically when screen is appearing. Default value is `false`.
+Defaults to `sentences`.
 
 #### `barTintColor`
 
@@ -400,37 +398,23 @@ The search field background color.
 
 By default bar tint color is translucent.
 
-#### `cancelButtonText` (iOS only)
+#### `cancelButtonText`
 
 The text to be used instead of default `Cancel` button text.
 
-#### `disableBackButtonOverride` (Android only)
-
-Default behavior is to prevent screen from going back when search bar is open (`disableBackButtonOverride: false`). If you don't want this to happen set `disableBackButtonOverride` to `true` 
-
-#### `hideNavigationBar` (iOS only)
+#### `hideNavigationBar`
 
 Boolean indicating whether to hide the navigation bar during searching.
 
 Defaults to `true`.
 
-#### `hideWhenScrolling` (iOS only)
+#### `hideWhenScrolling`
 
 Boolean indicating whether to hide the search bar when scrolling.
 
 Defaults to `true`.
 
-#### `inputType` (Android only)
-
-This prop is used to change type of the input and keyboard. Default value is `'text'`.
-
-All values:
-- `'text'` - normal text input
-- `'number'` - number input
-- `'email'` - email input
-- `'phone'` - phone input
-
-####  `obscureBackground` (iOS only)
+####  `obscureBackground`
 
 Boolean indicating whether to obscure the underlying content with semi-transparent overlay.
 
@@ -440,7 +424,7 @@ Defaults to `true`.
 
 A callback that gets called when search bar has lost focus.
 
-#### `onCancelButtonPress` (iOS only)
+#### `onCancelButtonPress`
 
 A callback that gets called when the cancel button is pressed.
 
@@ -462,18 +446,10 @@ static navigationOptions = ({navigation}) => {
 };
 ```
 
-#### `onClose` (Android only)
-
-A callback that gets called when search bar is closing
-
 #### `onFocus`
 
 A callback that gets called when search bar has received focus.
 
-#### `onOpen` (Android only)
-
-A callback that gets called when search bar is expanding
-
 #### `onSearchButtonPress`
 
 A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
@@ -488,6 +464,18 @@ Defaults to an empty string.
 
 The search field text color.
 
+#### `hintTextColor`
+
+The search hint text color. (Android only)
+
+#### `headerIconColor`
+
+The search and close icon color shown in the header. (Android only)
+
+#### `shouldShowHintSearchIcon`
+
+Show the search hint icon when search bar is focused. (Android only)
+
 ### Helpers
 
 The stack navigator adds the following methods to the navigation prop:

package/ios/RNSScreen.h

@@ -29,6 +29,11 @@ typedef NS_ENUM(NSInteger, RNSScreenReplaceAnimation) {
   RNSScreenReplaceAnimationPush,
 };
 
+typedef NS_ENUM(NSInteger, RNSScreenSwipeDirection) {
+  RNSScreenSwipeDirectionHorizontal,
+  RNSScreenSwipeDirectionVertical,
+};
+
 typedef NS_ENUM(NSInteger, RNSActivityState) {
   RNSActivityStateInactive = 0,
   RNSActivityStateTransitioningOrBelowTop = 1,
@@ -47,6 +52,7 @@ typedef NS_ENUM(NSInteger, RNSWindowTrait) {
   RNSWindowTraitAnimation,
   RNSWindowTraitHidden,
   RNSWindowTraitOrientation,
+  RNSWindowTraitHomeIndicatorHidden,
 };
 
 @interface RCTConvert (RNSScreen)
@@ -91,19 +97,23 @@ typedef NS_ENUM(NSInteger, RNSWindowTrait) {
 @property (nonatomic) RNSScreenStackAnimation stackAnimation;
 @property (nonatomic) RNSScreenStackPresentation stackPresentation;
 @property (nonatomic) RNSScreenReplaceAnimation replaceAnimation;
+@property (nonatomic) RNSScreenSwipeDirection swipeDirection;
 @property (nonatomic) BOOL preventNativeDismiss;
 @property (nonatomic) BOOL hasOrientationSet;
 @property (nonatomic) BOOL hasStatusBarStyleSet;
 @property (nonatomic) BOOL hasStatusBarAnimationSet;
 @property (nonatomic) BOOL hasStatusBarHiddenSet;
+@property (nonatomic) BOOL hasHomeIndicatorHiddenSet;
 @property (nonatomic) BOOL customAnimationOnSwipe;
 @property (nonatomic) BOOL fullScreenSwipeEnabled;
+@property (nonatomic, retain) NSNumber *transitionDuration;
 
 #if !TARGET_OS_TV
 @property (nonatomic) RNSStatusBarStyle statusBarStyle;
 @property (nonatomic) UIStatusBarAnimation statusBarAnimation;
 @property (nonatomic) BOOL statusBarHidden;
 @property (nonatomic) UIInterfaceOrientationMask screenOrientation;
+@property (nonatomic) BOOL homeIndicatorHidden;
 #endif
 
 - (void)notifyFinishTransitioning;

package/ios/RNSScreen.m

@@ -34,6 +34,7 @@
     _hasStatusBarAnimationSet = NO;
     _hasStatusBarHiddenSet = NO;
     _hasOrientationSet = NO;
+    _hasHomeIndicatorHiddenSet = NO;
   }
 
   return self;
@@ -206,6 +207,13 @@
   _screenOrientation = screenOrientation;
   [RNSScreenWindowTraits enforceDesiredDeviceOrientation];
 }
+
+- (void)setHomeIndicatorHidden:(BOOL)homeIndicatorHidden
+{
+  _hasHomeIndicatorHiddenSet = YES;
+  _homeIndicatorHidden = homeIndicatorHidden;
+  [RNSScreenWindowTraits updateHomeIndicatorAutoHidden];
+}
 #endif
 
 - (UIView *)reactSuperview
@@ -436,6 +444,17 @@
   return UIInterfaceOrientationMaskAllButUpsideDown;
 }
 
+- (UIViewController *)childViewControllerForHomeIndicatorAutoHidden
+{
+  UIViewController *vc = [self findChildVCForConfigAndTrait:RNSWindowTraitHomeIndicatorHidden includingModals:YES];
+  return vc == self ? nil : vc;
+}
+
+- (BOOL)prefersHomeIndicatorAutoHidden
+{
+  return ((RNSScreenView *)self.view).homeIndicatorHidden;
+}
+
 // if the returned vc is a child, it means that it can provide config;
 // if the returned vc is self, it means that there is no child for config and self has config to provide,
 // so we return self which results in asking self for preferredStatusBarStyle/Animation etc.;
@@ -495,6 +514,9 @@
     case RNSWindowTraitOrientation: {
       return ((RNSScreenView *)self.view).hasOrientationSet;
     }
+    case RNSWindowTraitHomeIndicatorHidden: {
+      return ((RNSScreenView *)self.view).hasHomeIndicatorHiddenSet;
+    }
     default: {
       RCTLogError(@"Unknown trait passed: %d", (int)trait);
     }
@@ -771,6 +793,8 @@ RCT_EXPORT_VIEW_PROPERTY(preventNativeDismiss, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(replaceAnimation, RNSScreenReplaceAnimation)
 RCT_EXPORT_VIEW_PROPERTY(stackPresentation, RNSScreenStackPresentation)
 RCT_EXPORT_VIEW_PROPERTY(stackAnimation, RNSScreenStackAnimation)
+RCT_EXPORT_VIEW_PROPERTY(swipeDirection, RNSScreenSwipeDirection)
+RCT_EXPORT_VIEW_PROPERTY(transitionDuration, NSNumber)
 
 RCT_EXPORT_VIEW_PROPERTY(onAppear, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onDisappear, RCTDirectEventBlock);
@@ -785,6 +809,7 @@ RCT_EXPORT_VIEW_PROPERTY(screenOrientation, UIInterfaceOrientationMask)
 RCT_EXPORT_VIEW_PROPERTY(statusBarAnimation, UIStatusBarAnimation)
 RCT_EXPORT_VIEW_PROPERTY(statusBarHidden, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(statusBarStyle, RNSStatusBarStyle)
+RCT_EXPORT_VIEW_PROPERTY(homeIndicatorHidden, BOOL)
 #endif
 
 - (UIView *)view
@@ -835,6 +860,15 @@ RCT_ENUM_CONVERTER(
     RNSScreenReplaceAnimationPop,
     integerValue)
 
+RCT_ENUM_CONVERTER(
+    RNSScreenSwipeDirection,
+    (@{
+      @"vertical" : @(RNSScreenSwipeDirectionVertical),
+      @"horizontal" : @(RNSScreenSwipeDirectionHorizontal),
+    }),
+    RNSScreenSwipeDirectionHorizontal,
+    integerValue)
+
 #if !TARGET_OS_TV
 RCT_ENUM_CONVERTER(
     RNSStatusBarStyle,

package/ios/RNSScreenContainer.m

@@ -23,6 +23,11 @@
 {
   return [self findActiveChildVC].supportedInterfaceOrientations;
 }
+
+- (UIViewController *)childViewControllerForHomeIndicatorAutoHidden
+{
+  return [self findActiveChildVC];
+}
 #endif
 
 - (UIViewController *)findActiveChildVC

package/ios/RNSScreenStack.m

@@ -45,6 +45,11 @@
 {
   return [self topViewController].supportedInterfaceOrientations;
 }
+
+- (UIViewController *)childViewControllerForHomeIndicatorAutoHidden
+{
+  return [self topViewController];
+}
 #endif
 
 @end
@@ -645,13 +650,23 @@
 
 - (void)handleSwipe:(UIPanGestureRecognizer *)gestureRecognizer
 {
-  float translation = [gestureRecognizer translationInView:gestureRecognizer.view].x;
-  float velocity = [gestureRecognizer velocityInView:gestureRecognizer.view].x;
-  float distance = gestureRecognizer.view.bounds.size.width;
-  BOOL isRTL = _controller.view.semanticContentAttribute == UISemanticContentAttributeForceRightToLeft;
-  if (isRTL) {
-    translation = -translation;
-    velocity = -velocity;
+  RNSScreenView *topScreen = (RNSScreenView *)_controller.viewControllers.lastObject.view;
+  float translation;
+  float velocity;
+  float distance;
+  if (topScreen.swipeDirection == RNSScreenSwipeDirectionVertical) {
+    translation = [gestureRecognizer translationInView:gestureRecognizer.view].y;
+    velocity = [gestureRecognizer velocityInView:gestureRecognizer.view].y;
+    distance = gestureRecognizer.view.bounds.size.height;
+  } else {
+    translation = [gestureRecognizer translationInView:gestureRecognizer.view].x;
+    velocity = [gestureRecognizer velocityInView:gestureRecognizer.view].x;
+    distance = gestureRecognizer.view.bounds.size.width;
+    BOOL isRTL = _controller.view.semanticContentAttribute == UISemanticContentAttributeForceRightToLeft;
+    if (isRTL) {
+      translation = -translation;
+      velocity = -velocity;
+    }
   }
 
   float transitionProgress = (translation / distance);