react-native-screens 3.9.0 → 3.11.0

package/lib/typescript/types.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { Animated, NativeSyntheticEvent, ViewProps, View, TargetedEvent, TextInputFocusEventData } from 'react-native';
 export declare type StackPresentationTypes = 'push' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal' | 'fullScreenModal' | 'formSheet';
 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 = {
@@ -43,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.
@@ -51,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.
      */
@@ -156,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;
@@ -270,6 +305,14 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
      * Boolean that allows for disabling drop shadow under navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar.
      */
     largeTitleHideShadow?: boolean;
+    /**
+     * Callback which is executed when screen header is attached
+     */
+    onAttached?: () => void;
+    /**
+     * Callback which is executed when screen header is detached
+     */
+    onDetached?: () => void;
     /**
      * String that can be displayed in the header as a fallback for `headerTitle`.
      */
@@ -309,22 +352,46 @@ export interface SearchBarProps {
      * The auto-capitalization behavior
      */
     autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters';
+    /**
+     * Automatically focuses search bar on mount
+     *
+     * @platform android
+     */
+    autoFocus?: boolean;
     /**
      * The search field background color
      */
     barTintColor?: string;
     /**
      * The text to be used instead of default `Cancel` button text
+     *
+     * @platform ios
      */
     cancelButtonText?: string;
+    /**
+     * Specifies whether the back button should close search bar's text input or not.
+     *
+     * @platform android
+     */
+    disableBackButtonOverride?: boolean;
     /**
      * Indicates whether to hide the navigation bar
+     *
+     * @platform ios
      */
     hideNavigationBar?: boolean;
     /**
      * Indicates whether to hide the search bar when scrolling
+     *
+     * @platform ios
      */
     hideWhenScrolling?: boolean;
+    /**
+     * Sets type of the input. Defaults to `text`.
+     *
+     * @platform android
+     */
+    inputType?: 'text' | 'phone' | 'number' | 'email';
     /**
      * Indicates whether to to obscure the underlying content
      */
@@ -335,16 +402,30 @@ export interface SearchBarProps {
     onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
     /**
      * A callback that gets called when the cancel button is pressed
+     *
+     * @platform ios
      */
     onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
     /**
      * A callback that gets called when the text changes. It receives the current text value of the search bar.
      */
     onChangeText?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+    /**
+     * A callback that gets called when search bar is closed
+     *
+     * @platform android
+     */
+    onClose?: () => void;
     /**
      * 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 opened
+     *
+     * @platform android
+     */
+    onOpen?: () => void;
     /**
      * A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
      */
@@ -357,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/lib/typescript/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isSearchBarAvailableForCurrentPlatform: boolean;
+export declare function executeNativeBackPress(): 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
@@ -385,7 +409,11 @@ Possible values:
 - `sentences`
 - `characters`
 
-Defaults to `sentences`.
+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`.
 
 #### `barTintColor`
 
@@ -393,23 +421,37 @@ The search field background color.
 
 By default bar tint color is translucent.
 
-#### `cancelButtonText`
+#### `cancelButtonText` (iOS only)
 
 The text to be used instead of default `Cancel` button text.
 
-#### `hideNavigationBar`
+#### `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)
 
 Boolean indicating whether to hide the navigation bar during searching.
 
 Defaults to `true`.
 
-#### `hideWhenScrolling`
+#### `hideWhenScrolling` (iOS only)
 
 Boolean indicating whether to hide the search bar when scrolling.
 
 Defaults to `true`.
 
-####  `obscureBackground`
+#### `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)
 
 Boolean indicating whether to obscure the underlying content with semi-transparent overlay.
 
@@ -440,11 +482,19 @@ React.useLayoutEffect(() => {
   });
 }, [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.
@@ -459,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.9.0",
+  "version": "3.11.0",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "check-types": "tsc --noEmit",
@@ -82,6 +82,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react-native": "^3.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "husky": "^7.0.1",

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/index.native.tsx

@@ -14,6 +14,7 @@ import { Freeze } from 'react-freeze';
 // @ts-ignore Getting private component
 // eslint-disable-next-line import/default
 import processColor from 'react-native/Libraries/StyleSheet/processColor';
+import { version } from 'react-native/package.json';
 
 import TransitionProgressContext from './TransitionProgressContext';
 import useTransitionProgress from './useTransitionProgress';
@@ -30,6 +31,10 @@ import {
   ScreenStackHeaderConfigProps,
   SearchBarProps,
 } from './types';
+import {
+  isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress,
+} from './utils';
 
 // web implementation is taken from `index.tsx`
 const isPlatformSupported =
@@ -51,6 +56,15 @@ function enableScreens(shouldEnableScreens = true): void {
 let ENABLE_FREEZE = false;
 
 function enableFreeze(shouldEnableReactFreeze = true): void {
+  const minor = parseInt(version.split('.')[1]); // eg. takes 66 from '0.66.0'
+
+  // react-freeze requires react-native >=0.64, react-native from main is 0.0.0
+  if (!(minor === 0 || minor >= 64) && shouldEnableReactFreeze) {
+    console.warn(
+      'react-freeze library requires at least react-native 0.64. Please upgrade your react-native version in order to use this feature.'
+    );
+  }
+
   ENABLE_FREEZE = shouldEnableReactFreeze;
 }
 
@@ -130,15 +144,31 @@ const ScreensNativeModules = {
   },
 };
 
-function MaybeFreeze({
-  freeze,
-  children,
-}: {
+interface FreezeWrapperProps {
   freeze: boolean;
   children: React.ReactNode;
-}) {
+}
+
+// This component allows one more render before freezing the screen.
+// Allows activityState to reach the native side and useIsFocused to work correctly.
+function DelayedFreeze({ freeze, children }: FreezeWrapperProps) {
+  // flag used for determining whether freeze should be enabled
+  const [freezeState, setFreezeState] = React.useState(false);
+
+  if (freeze !== freezeState) {
+    // setImmediate is executed at the end of the JS execution block.
+    // Used here for changing the state right after the render.
+    setImmediate(() => {
+      setFreezeState(freeze);
+    });
+  }
+
+  return <Freeze freeze={freeze ? freezeState : false}>{children}</Freeze>;
+}
+
+function MaybeFreeze({ freeze, children }: FreezeWrapperProps) {
   if (ENABLE_FREEZE) {
-    return <Freeze freeze={freeze}>{children}</Freeze>;
+    return <DelayedFreeze freeze={freeze}>{children}</DelayedFreeze>;
   } else {
     return <>{children}</>;
   }
@@ -147,19 +177,32 @@ function MaybeFreeze({
 function ScreenStack(props: ScreenStackProps) {
   if (ENABLE_FREEZE) {
     const { children, ...rest } = props;
-    const count = React.Children.count(children);
-    const childrenWithProps = React.Children.map(children, (child, index) => {
-      return <Freeze freeze={count - index > 2}>{child}</Freeze>;
-    });
+    const size = React.Children.count(children);
+    // freezes all screens except the top one
+    const childrenWithFreeze = React.Children.map(children, (child, index) => (
+      <DelayedFreeze freeze={size - index > 1}>{child}</DelayedFreeze>
+    ));
     return (
       <ScreensNativeModules.NativeScreenStack {...rest}>
-        {childrenWithProps}
+        {childrenWithFreeze}
       </ScreensNativeModules.NativeScreenStack>
     );
   }
   return <ScreensNativeModules.NativeScreenStack {...props} />;
 }
 
+// Incomplete type, all accessible properties available at:
+// react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
+interface ViewConfig extends View {
+  viewConfig: {
+    validAttributes: {
+      style: {
+        display: boolean;
+      };
+    };
+  };
+}
+
 class Screen extends React.Component<ScreenProps> {
   private ref: React.ElementRef<typeof View> | null = null;
   private closing = new Animated.Value(0);
@@ -205,28 +248,38 @@ class Screen extends React.Component<ScreenProps> {
       const processedColor = processColor(statusBarColor);
 
       return (
-        <AnimatedNativeScreen
-          {...props}
-          statusBarColor={processedColor}
-          activityState={activityState}
-          ref={this.setRef}
-          onTransitionProgress={
-            !isNativeStack
-              ? undefined
-              : Animated.event(
-                  [
-                    {
-                      nativeEvent: {
-                        progress: this.progress,
-                        closing: this.closing,
-                        goingForward: this.goingForward,
+        <MaybeFreeze freeze={activityState === 0}>
+          <AnimatedNativeScreen
+            {...props}
+            statusBarColor={processedColor}
+            activityState={activityState}
+            // This prevents showing blank screen when navigating between multiple screens with freezing
+            // https://github.com/software-mansion/react-native-screens/pull/1208
+            ref={(ref: ViewConfig) => {
+              if (ref?.viewConfig?.validAttributes?.style) {
+                ref.viewConfig.validAttributes.style = {
+                  ...ref.viewConfig.validAttributes.style,
+                  display: false,
+                };
+              }
+              this.setRef(ref);
+            }}
+            onTransitionProgress={
+              !isNativeStack
+                ? undefined
+                : Animated.event(
+                    [
+                      {
+                        nativeEvent: {
+                          progress: this.progress,
+                          closing: this.closing,
+                          goingForward: this.goingForward,
+                        },
                       },
-                    },
-                  ],
-                  { useNativeDriver: true }
-                )
-          }>
-          <MaybeFreeze freeze={activityState === 0}>
+                    ],
+                    { useNativeDriver: true }
+                  )
+            }>
             {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
               children
             ) : (
@@ -239,8 +292,8 @@ class Screen extends React.Component<ScreenProps> {
                 {children}
               </TransitionProgressContext.Provider>
             )}
-          </MaybeFreeze>
-        </AnimatedNativeScreen>
+          </AnimatedNativeScreen>
+        </MaybeFreeze>
       );
     } else {
       // same reason as above
@@ -383,8 +436,10 @@ module.exports = {
     return ScreensNativeModules.NativeScreenStackHeaderSubview;
   },
   get SearchBar() {
-    if (Platform.OS !== 'ios') {
-      console.warn('Importing SearchBar is only valid on iOS devices.');
+    if (!isSearchBarAvailableForCurrentPlatform) {
+      console.warn(
+        'Importing SearchBar is only valid on iOS and Android devices.'
+      );
       return View;
     }
 
@@ -411,4 +466,7 @@ module.exports = {
   screensEnabled,
   shouldUseActivityState,
   useTransitionProgress,
+
+  isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress,
 };

package/src/index.tsx

@@ -11,6 +11,10 @@ import {
 
 export * from './types';
 export { default as useTransitionProgress } from './useTransitionProgress';
+export {
+  isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress,
+} from './utils';
 
 let ENABLE_SCREENS = true;
 

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:
@@ -273,8 +291,6 @@ export type NativeStackNavigationOptions = {
   screenOrientation?: ScreenProps['screenOrientation'];
   /**
    * Object in which you should pass props in order to render native iOS searchBar.
-   *
-   * @platform ios
    */
   searchBar?: SearchBarProps;
   /**
@@ -327,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<