react-native-screens 3.10.0 → 3.11.1

package/lib/typescript/types.d.ts

@@ -3,6 +3,7 @@ export declare type StackPresentationTypes = 'push' | 'modal' | 'transparentModa
 export declare type StackAnimationTypes = 'default' | 'fade' | 'fade_from_bottom' | 'flip' | 'none' | 'simple_push' | 'slide_from_bottom' | 'slide_from_right' | 'slide_from_left';
 export declare type BlurEffectTypes = 'extraLight' | 'light' | 'dark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
 export declare type ScreenReplaceTypes = 'push' | 'pop';
+export declare type SwipeDirectionTypes = 'vertical' | 'horizontal';
 export declare type ScreenOrientationTypes = 'default' | 'all' | 'portrait' | 'portrait_up' | 'portrait_down' | 'landscape' | 'landscape_left' | 'landscape_right';
 export declare type HeaderSubviewTypes = 'back' | 'right' | 'left' | 'center' | 'searchBar';
 export declare type TransitionProgressEventType = {
@@ -42,6 +43,12 @@ export interface ScreenProps extends ViewProps {
      * @platform ios
      */
     gestureEnabled?: boolean;
+    /**
+     * Whether the home indicator should be hidden on this screen. Defaults to `false`.
+     *
+     * @platform ios
+     */
+    homeIndicatorHidden?: boolean;
     /**
      * Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it.
      * Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there.
@@ -50,6 +57,18 @@ export interface ScreenProps extends ViewProps {
      * @platform android
      */
     nativeBackButtonDismissalEnabled?: boolean;
+    /**
+     * Sets the navigation bar color. Defaults to initial status bar color.
+     *
+     * @platform android
+     */
+    navigationBarColor?: string;
+    /**
+     * Sets the visibility of the navigation bar. Defaults to `false`.
+     *
+     * @platform android
+     */
+    navigationBarHidden?: boolean;
     /**
      * A callback that gets called when the current screen appears.
      */
@@ -155,6 +174,23 @@ export interface ScreenProps extends ViewProps {
      * @platform android
      */
     statusBarTranslucent?: boolean;
+    /**
+     * Sets the direction in which you should swipe to dismiss the screen.
+     * When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
+     * The following values are supported:
+     * - `vertical` – dismiss screen vertically
+     * - `horizontal` – dismiss screen horizontally (default)
+     *
+     * @platform ios
+     */
+    swipeDirection?: SwipeDirectionTypes;
+    /**
+     * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+     * The duration of `default` and `flip` transitions isn't customizable.
+     *
+     * @platform ios
+     */
+    transitionDuration?: number;
 }
 export interface ScreenContainerProps extends ViewProps {
     children?: React.ReactNode;
@@ -375,17 +411,17 @@ export interface SearchBarProps {
      */
     onChangeText?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
     /**
-     * A callback that gets called when search bar has received focus
+     * A callback that gets called when search bar is closed
+     *
+     * @platform android
      */
     onClose?: () => void;
     /**
-     * A callback that gets called when search bar is opened
-     *
-     * @platform android
+     * A callback that gets called when search bar has received focus
      */
     onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
     /**
-     * A callback that gets called when search bar is closed
+     * A callback that gets called when search bar is opened
      *
      * @platform android
      */
@@ -402,4 +438,23 @@ export interface SearchBarProps {
      * The search field text color
      */
     textColor?: string;
+    /**
+     * The search hint text color
+     *
+     * @plaform android
+     */
+    hintTextColor?: string;
+    /**
+     * The search and close icon color shown in the header
+     *
+     * @plaform android
+     */
+    headerIconColor?: string;
+    /**
+     * Show the search hint icon when search bar is focused
+     *
+     * @plaform android
+     * @default true
+     */
+    shouldShowHintSearchIcon?: boolean;
 }

package/native-stack/README.md

@@ -182,6 +182,10 @@ A Boolean to that lets you opt out of insetting the header. You may want to * se
 
 Boolean indicating whether the navigation bar is translucent.
 
+#### `homeIndicatorHidden` (iOS only)
+
+Whether the home indicator should be hidden on this screen. Defaults to `false`.
+
 #### `nativeBackButtonDismissalEnabled` (Android only)
 
 Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it.
@@ -189,6 +193,14 @@ Unfortunately the same behavior is not available on iOS since the behavior of na
 
 Defaults to `false`.
 
+#### `navigationBarColor` (Android only)
+
+Sets the navigation bar color. Defaults to initial status bar color.
+
+#### `navigationBarHidden` (Android only)
+
+Sets the visibility of the navigation bar. Defaults to `false`.
+
 #### `replaceAnimation`
 
 How should the screen replacing another screen animate.
@@ -230,10 +242,24 @@ Defaults to `push`.
 
 Using `containedModal` and `containedTransparentModal` with other types of modals in one native stack navigator is not recommended and can result in a freeze or a crash of the application.
 
+#### `swipeDirection` (iOS only)
+
+Sets the direction in which you should swipe to dismiss the screen. The following values are supported:
+- `vertical` – dismiss screen vertically
+- `horizontal` – dismiss screen horizontally (default)
+
+When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
+
 #### `title`
 
 A string that can be used as a fallback for `headerTitle`.
 
+#### `transitionDuration` (iOS only)
+
+Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+
+The duration of `default` and `flip` transitions isn't customizable.
+
 #### `useTransitionProgress`
 
 Hook providing context value of transition progress of the current screen to be used with `react-native` `Animated`. It consists of 2 values:
@@ -353,12 +379,10 @@ Defaults to `auto`.
 
 Sets the translucency of the status bar (similar to the `StatusBar` component). Defaults to `false`.
 
-### Search bar (iOS only)
+### Search bar
 
 The search bar is just a `searchBar` property that can be specified in the navigator's `screenOptions` or an individual screen's `options`. 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
@@ -485,6 +509,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)
+
 ### Events
 
 The navigator can [emit events](https://reactnavigation.org/docs/navigation-events) on certain actions. Supported events are:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "3.10.0",
+  "version": "3.11.1",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "check-types": "tsc --noEmit",

package/reanimated/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/reanimated/index",
+  "module": "../lib/module/reanimated/index",
+  "react-native": "../src/reanimated/index",
+  "types": "../lib/typescript/reanimated/index"
+}

package/src/native-stack/types.tsx

@@ -243,6 +243,12 @@ export type NativeStackNavigationOptions = {
    * Boolean indicating whether the navigation bar is translucent.
    */
   headerTranslucent?: boolean;
+  /**
+   * Whether the home indicator should be hidden on this screen. Defaults to `false`.
+   *
+   * @platform ios
+   */
+  homeIndicatorHidden?: boolean;
   /**
    * Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it.
    * Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there.
@@ -251,6 +257,18 @@ export type NativeStackNavigationOptions = {
    * @platform android
    */
   nativeBackButtonDismissalEnabled?: boolean;
+  /**
+   * Sets the navigation bar color. Defaults to initial status bar color.
+   *
+   * @platform android
+   */
+  navigationBarColor?: string;
+  /**
+   * Sets the visibility of the navigation bar. Defaults to `false`.
+   *
+   * @platform android
+   */
+  navigationBarHidden?: boolean;
   /**
    * How should the screen replacing another screen animate. Defaults to `pop`.
    * The following values are currently supported:
@@ -325,10 +343,26 @@ export type NativeStackNavigationOptions = {
    * @platform android
    */
   statusBarTranslucent?: boolean;
+  /**
+   * Sets the direction in which you should swipe to dismiss the screen.
+   * When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
+   * The following values are supported:
+   * - `vertical` – dismiss screen vertically
+   * - `horizontal` – dismiss screen horizontally (default)
+   * @platform ios
+   */
+  swipeDirection?: ScreenProps['swipeDirection'];
   /**
    * String that can be displayed in the header as a fallback for `headerTitle`.
    */
   title?: string;
+  /**
+   * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+   * The duration of `default` and `flip` transitions isn't customizable.
+   *
+   * @platform ios
+   */
+  transitionDuration?: number;
 };
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<

package/src/native-stack/views/NativeStackView.tsx

@@ -149,22 +149,46 @@ const RouteView = ({
 }) => {
   const { options, render: renderScene } = descriptors[route.key];
   const {
-    customAnimationOnSwipe,
-    fullScreenSwipeEnabled,
     gestureEnabled,
     headerShown,
+    homeIndicatorHidden,
     nativeBackButtonDismissalEnabled = false,
+    navigationBarColor,
+    navigationBarHidden,
     replaceAnimation = 'pop',
     screenOrientation,
-    stackAnimation,
     statusBarAnimation,
     statusBarColor,
     statusBarHidden,
     statusBarStyle,
     statusBarTranslucent,
+    swipeDirection = 'horizontal',
+    transitionDuration,
+  } = options;
+
+  let {
+    customAnimationOnSwipe,
+    fullScreenSwipeEnabled,
+    stackAnimation,
+    stackPresentation = 'push',
   } = options;
 
-  let { stackPresentation = 'push' } = options;
+  if (swipeDirection === 'vertical') {
+    // for `vertical` direction to work, we need to set `fullScreenSwipeEnabled` to `true`
+    // so the screen can be dismissed from any point on screen.
+    // `customAnimationOnSwipe` needs to be set to `true` so the `stackAnimation` set by user can be used,
+    // otherwise `simple_push` will be used.
+    // Also, the default animation for this direction seems to be `slide_from_bottom`.
+    if (fullScreenSwipeEnabled === undefined) {
+      fullScreenSwipeEnabled = true;
+    }
+    if (customAnimationOnSwipe === undefined) {
+      customAnimationOnSwipe = true;
+    }
+    if (stackAnimation === undefined) {
+      stackAnimation = 'slide_from_bottom';
+    }
+  }
 
   if (index === 0) {
     // first screen should always be treated as `push`, it resolves problems with no header animation
@@ -194,8 +218,11 @@ const RouteView = ({
       style={StyleSheet.absoluteFill}
       customAnimationOnSwipe={customAnimationOnSwipe}
       fullScreenSwipeEnabled={fullScreenSwipeEnabled}
+      homeIndicatorHidden={homeIndicatorHidden}
       gestureEnabled={isAndroid ? false : gestureEnabled}
       nativeBackButtonDismissalEnabled={nativeBackButtonDismissalEnabled}
+      navigationBarColor={navigationBarColor}
+      navigationBarHidden={navigationBarHidden}
       replaceAnimation={replaceAnimation}
       screenOrientation={screenOrientation}
       stackAnimation={stackAnimation}
@@ -205,6 +232,8 @@ const RouteView = ({
       statusBarHidden={statusBarHidden}
       statusBarStyle={statusBarStyle}
       statusBarTranslucent={statusBarTranslucent}
+      swipeDirection={swipeDirection}
+      transitionDuration={transitionDuration}
       onHeaderBackButtonClicked={() => {
         navigation.dispatch({
           ...StackActions.pop(),

package/src/types.tsx

@@ -47,6 +47,7 @@ export type BlurEffectTypes =
   | 'systemThickMaterialDark'
   | 'systemChromeMaterialDark';
 export type ScreenReplaceTypes = 'push' | 'pop';
+export type SwipeDirectionTypes = 'vertical' | 'horizontal';
 export type ScreenOrientationTypes =
   | 'default'
   | 'all'
@@ -101,6 +102,12 @@ export interface ScreenProps extends ViewProps {
    * @platform ios
    */
   gestureEnabled?: boolean;
+  /**
+   * Whether the home indicator should be hidden on this screen. Defaults to `false`.
+   *
+   * @platform ios
+   */
+  homeIndicatorHidden?: boolean;
   /**
    * Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it.
    * Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there.
@@ -109,6 +116,18 @@ export interface ScreenProps extends ViewProps {
    * @platform android
    */
   nativeBackButtonDismissalEnabled?: boolean;
+  /**
+   * Sets the navigation bar color. Defaults to initial status bar color.
+   *
+   * @platform android
+   */
+  navigationBarColor?: string;
+  /**
+   * Sets the visibility of the navigation bar. Defaults to `false`.
+   *
+   * @platform android
+   */
+  navigationBarHidden?: boolean;
   /**
    * A callback that gets called when the current screen appears.
    */
@@ -214,6 +233,23 @@ export interface ScreenProps extends ViewProps {
    * @platform android
    */
   statusBarTranslucent?: boolean;
+  /**
+   * Sets the direction in which you should swipe to dismiss the screen.
+   * When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
+   * The following values are supported:
+   * - `vertical` – dismiss screen vertically
+   * - `horizontal` – dismiss screen horizontally (default)
+   *
+   * @platform ios
+   */
+  swipeDirection?: SwipeDirectionTypes;
+  /**
+   * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+   * The duration of `default` and `flip` transitions isn't customizable.
+   *
+   * @platform ios
+   */
+  transitionDuration?: number;
 }
 
 export interface ScreenContainerProps extends ViewProps {
@@ -441,17 +477,17 @@ export interface SearchBarProps {
   onChangeText?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
 
   /**
-   * A callback that gets called when search bar has received focus
+   * A callback that gets called when search bar is closed
+   *
+   * @platform android
    */
   onClose?: () => void;
   /**
-   * A callback that gets called when search bar is opened
-   *
-   * @platform android
+   * A callback that gets called when search bar has received focus
    */
   onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
   /**
-   * A callback that gets called when search bar is closed
+   * A callback that gets called when search bar is opened
    *
    * @platform android
    */
@@ -470,4 +506,23 @@ export interface SearchBarProps {
    * The search field text color
    */
   textColor?: string;
+  /**
+   * The search hint text color
+   *
+   * @plaform android
+   */
+  hintTextColor?: string;
+  /**
+   * The search and close icon color shown in the header
+   *
+   * @plaform android
+   */
+  headerIconColor?: string;
+  /**
+   * Show the search hint icon when search bar is focused
+   *
+   * @plaform android
+   * @default true
+   */
+  shouldShowHintSearchIcon?: boolean;
 }