react-native-screens 3.9.0 → 3.11.0

package/src/native-stack/utils/useBackPressSubscription.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { BackHandler, NativeEventSubscription } from 'react-native';
+
+interface Args {
+  onBackPress: () => boolean;
+  isDisabled: boolean;
+}
+
+interface UseBackPressSubscription {
+  handleAttached: () => void;
+  handleDetached: () => void;
+  createSubscription: () => void;
+  clearSubscription: () => void;
+}
+
+/**
+ * This hook is an abstraction for keeping back press subscription
+ * logic in one place.
+ */
+export function useBackPressSubscription({
+  onBackPress,
+  isDisabled,
+}: Args): UseBackPressSubscription {
+  const [isActive, setIsActive] = React.useState(false);
+  const subscription = React.useRef<NativeEventSubscription | undefined>();
+
+  const clearSubscription = React.useCallback((shouldSetActive = true) => {
+    subscription.current?.remove();
+    subscription.current = undefined;
+    if (shouldSetActive) setIsActive(false);
+  }, []);
+
+  const createSubscription = React.useCallback(() => {
+    if (!isDisabled) {
+      subscription.current?.remove();
+      subscription.current = BackHandler.addEventListener(
+        'hardwareBackPress',
+        onBackPress
+      );
+      setIsActive(true);
+    }
+  }, [isDisabled, onBackPress]);
+
+  const handleAttached = React.useCallback(() => {
+    if (isActive) {
+      createSubscription();
+    }
+  }, [createSubscription, isActive]);
+
+  const handleDetached = React.useCallback(() => {
+    clearSubscription(false);
+  }, [clearSubscription]);
+
+  React.useEffect(() => {
+    if (isDisabled) {
+      clearSubscription();
+    }
+  }, [isDisabled, clearSubscription]);
+
+  return {
+    handleAttached,
+    handleDetached,
+    createSubscription,
+    clearSubscription,
+  };
+}

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

@@ -9,8 +9,12 @@ import {
   ScreenStackHeaderRightView,
   ScreenStackHeaderSearchBarView,
   SearchBar,
+  SearchBarProps,
+  isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress,
 } from 'react-native-screens';
 import { NativeStackNavigationOptions } from '../types';
+import { useBackPressSubscription } from '../utils/useBackPressSubscription';
 import { processFonts } from './FontProcessor';
 
 type Props = NativeStackNavigationOptions & {
@@ -48,6 +52,19 @@ export default function HeaderConfig({
   const { colors } = useTheme();
   const tintColor = headerTintColor ?? colors.primary;
 
+  // We need to use back press subscription here to override back button behavior on JS side.
+  // Because screens are usually used with react-navigation and this library overrides back button
+  // we need to handle it first in case when search bar is open
+  const {
+    handleAttached,
+    handleDetached,
+    clearSubscription,
+    createSubscription,
+  } = useBackPressSubscription({
+    onBackPress: executeNativeBackPress,
+    isDisabled: !searchBar || !!searchBar.disableBackButtonOverride,
+  });
+
   const [
     backTitleFontFamily,
     largeTitleFontFamily,
@@ -58,6 +75,29 @@ export default function HeaderConfig({
     headerTitleStyle.fontFamily,
   ]);
 
+  // We want to clear clearSubscription only when components unmounts or search bar changes
+  React.useEffect(() => clearSubscription, [searchBar]);
+
+  const processedSearchBarOptions = React.useMemo(() => {
+    if (
+      Platform.OS === 'android' &&
+      searchBar &&
+      !searchBar.disableBackButtonOverride
+    ) {
+      const onFocus: SearchBarProps['onFocus'] = (...args) => {
+        createSubscription();
+        searchBar.onFocus?.(...args);
+      };
+      const onClose: SearchBarProps['onClose'] = (...args) => {
+        clearSubscription();
+        searchBar.onClose?.(...args);
+      };
+
+      return { ...searchBar, onFocus, onClose };
+    }
+    return searchBar;
+  }, [searchBar, createSubscription, clearSubscription]);
+
   return (
     <ScreenStackHeaderConfig
       backButtonInCustomView={backButtonInCustomView}
@@ -99,7 +139,9 @@ export default function HeaderConfig({
       titleFontSize={headerTitleStyle.fontSize}
       titleFontWeight={headerTitleStyle.fontWeight}
       topInsetEnabled={headerTopInsetEnabled}
-      translucent={headerTranslucent === true}>
+      translucent={headerTranslucent === true}
+      onAttached={handleAttached}
+      onDetached={handleDetached}>
       {headerRight !== undefined ? (
         <ScreenStackHeaderRightView>
           {headerRight({ tintColor })}
@@ -121,9 +163,10 @@ export default function HeaderConfig({
           {headerCenter({ tintColor })}
         </ScreenStackHeaderCenterView>
       ) : null}
-      {Platform.OS === 'ios' && searchBar !== undefined ? (
+      {isSearchBarAvailableForCurrentPlatform &&
+      processedSearchBarOptions !== undefined ? (
         <ScreenStackHeaderSearchBarView>
-          <SearchBar {...searchBar} />
+          <SearchBar {...processedSearchBarOptions} />
         </ScreenStackHeaderSearchBarView>
       ) : null}
     </ScreenStackHeaderConfig>

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/reanimated/ReanimatedNativeStackScreen.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import {
+  Screen,
+  ScreenProps,
+  TransitionProgressEventType,
+} from 'react-native-screens';
+
+// @ts-ignore file to be used only if `react-native-reanimated` available in the project
+import Animated, { useEvent, useSharedValue } from 'react-native-reanimated';
+import ReanimatedTransitionProgressContext from './ReanimatedTransitionProgressContext';
+
+const AnimatedScreen = Animated.createAnimatedComponent(
+  (Screen as unknown) as React.ComponentClass
+);
+
+const ReanimatedNativeStackScreen = React.forwardRef<
+  typeof AnimatedScreen,
+  ScreenProps
+>((props, ref) => {
+  const { children, ...rest } = props;
+
+  const progress = useSharedValue(0);
+  const closing = useSharedValue(0);
+  const goingForward = useSharedValue(0);
+
+  return (
+    <AnimatedScreen
+      // @ts-ignore some problems with ref and onTransitionProgressReanimated being "fake" prop for parsing of `useEvent` return value
+      ref={ref}
+      onTransitionProgressReanimated={useEvent(
+        (event: TransitionProgressEventType) => {
+          'worklet';
+          progress.value = event.progress;
+          closing.value = event.closing;
+          goingForward.value = event.goingForward;
+        },
+        [
+          // This should not be necessary, but is not properly managed by `react-native-reanimated`
+          // @ts-ignore wrong type
+          Platform.OS === 'android'
+            ? 'onTransitionProgress'
+            : 'topTransitionProgress',
+        ]
+      )}
+      {...rest}>
+      <ReanimatedTransitionProgressContext.Provider
+        value={{
+          progress: progress,
+          closing: closing,
+          goingForward: goingForward,
+        }}>
+        {children}
+      </ReanimatedTransitionProgressContext.Provider>
+    </AnimatedScreen>
+  );
+});
+
+ReanimatedNativeStackScreen.displayName = 'ReanimatedNativeStackScreen';
+
+export default ReanimatedNativeStackScreen;

package/src/reanimated/ReanimatedScreen.tsx

@@ -1,103 +1,25 @@
-import React, { PropsWithChildren } from 'react';
-import { Platform, View } from 'react-native';
-import {
-  Screen,
-  ScreenProps,
-  ScreenContext,
-  TransitionProgressEventType,
-} from 'react-native-screens';
+import React from 'react';
+import { Screen, ScreenProps } from 'react-native-screens';
 
 // @ts-ignore file to be used only if `react-native-reanimated` available in the project
-import Animated, { useEvent, useSharedValue } from 'react-native-reanimated';
-import ReanimatedTransitionProgressContext from './ReanimatedTransitionProgressContext';
+import Animated from 'react-native-reanimated';
 
 const AnimatedScreen = Animated.createAnimatedComponent(
   (Screen as unknown) as React.ComponentClass
 );
 
-class ReanimatedScreenWrapper extends React.Component<ScreenProps> {
-  private ref: React.ElementRef<typeof View> | null = null;
-
-  setNativeProps(props: ScreenProps): void {
-    this.ref?.setNativeProps(props);
-  }
-
-  setRef = (ref: React.ElementRef<typeof View> | null): void => {
-    this.ref = ref;
-    this.props.onComponentRef?.(ref);
-  };
-
-  render() {
-    return (
-      <ReanimatedScreen
-        {...this.props}
-        // @ts-ignore some problems with ref
-        ref={this.setRef}
-      />
-    );
-  }
-}
-
 const ReanimatedScreen = React.forwardRef<typeof AnimatedScreen, ScreenProps>(
   (props, ref) => {
-    const { children, ...rest } = props;
-
-    const progress = useSharedValue(0);
-    const closing = useSharedValue(0);
-    const goingForward = useSharedValue(0);
-
     return (
       <AnimatedScreen
         // @ts-ignore some problems with ref and onTransitionProgressReanimated being "fake" prop for parsing of `useEvent` return value
         ref={ref}
-        // ReanimatedScreen.tsx should only be used by Screens of native-stack, but it always better to check
-        onTransitionProgressReanimated={
-          !props.isNativeStack
-            ? undefined
-            : useEvent(
-                (event: TransitionProgressEventType) => {
-                  'worklet';
-                  progress.value = event.progress;
-                  closing.value = event.closing;
-                  goingForward.value = event.goingForward;
-                },
-                [
-                  // This should not be necessary, but is not properly managed by `react-native-reanimated`
-                  // @ts-ignore wrong type
-                  Platform.OS === 'android'
-                    ? 'onTransitionProgress'
-                    : 'topTransitionProgress',
-                ]
-              )
-        }
-        {...rest}>
-        {!props.isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
-          children
-        ) : (
-          <ReanimatedTransitionProgressContext.Provider
-            value={{
-              progress: progress,
-              closing: closing,
-              goingForward: goingForward,
-            }}>
-            {children}
-          </ReanimatedTransitionProgressContext.Provider>
-        )}
-      </AnimatedScreen>
+        {...props}
+      />
     );
   }
 );
 
-// used to silence error "Component definition is missing display name"
 ReanimatedScreen.displayName = 'ReanimatedScreen';
 
-export default function ReanimatedScreenProvider(
-  props: PropsWithChildren<unknown>
-) {
-  return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    <ScreenContext.Provider value={ReanimatedScreenWrapper as any}>
-      {props.children}
-    </ScreenContext.Provider>
-  );
-}
+export default ReanimatedScreen;

package/src/reanimated/ReanimatedScreenProvider.tsx

@@ -0,0 +1,42 @@
+import React, { PropsWithChildren } from 'react';
+import { View } from 'react-native';
+import { ScreenProps, ScreenContext } from 'react-native-screens';
+import ReanimatedNativeStackScreen from './ReanimatedNativeStackScreen';
+import AnimatedScreen from './ReanimatedScreen';
+
+class ReanimatedScreenWrapper extends React.Component<ScreenProps> {
+  private ref: React.ElementRef<typeof View> | null = null;
+
+  setNativeProps(props: ScreenProps): void {
+    this.ref?.setNativeProps(props);
+  }
+
+  setRef = (ref: React.ElementRef<typeof View> | null): void => {
+    this.ref = ref;
+    this.props.onComponentRef?.(ref);
+  };
+
+  render() {
+    const ReanimatedScreen = this.props.isNativeStack
+      ? ReanimatedNativeStackScreen
+      : AnimatedScreen;
+    return (
+      <ReanimatedScreen
+        {...this.props}
+        // @ts-ignore some problems with ref
+        ref={this.setRef}
+      />
+    );
+  }
+}
+
+export default function ReanimatedScreenProvider(
+  props: PropsWithChildren<unknown>
+) {
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <ScreenContext.Provider value={ReanimatedScreenWrapper as any}>
+      {props.children}
+    </ScreenContext.Provider>
+  );
+}

package/src/reanimated/index.tsx

@@ -1,2 +1,2 @@
-export { default as ReanimatedScreenProvider } from './ReanimatedScreen';
+export { default as ReanimatedScreenProvider } from './ReanimatedScreenProvider';
 export { default as useReanimatedTransitionProgress } from './useReanimatedTransitionProgress';

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 {
@@ -331,6 +367,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`.
    */
@@ -371,24 +415,47 @@ 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
    */
@@ -399,6 +466,8 @@ 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;
 
@@ -407,10 +476,22 @@ export interface SearchBarProps {
    */
   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.
    */
@@ -425,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;
 }

package/src/utils.ts

@@ -0,0 +1,12 @@
+import { BackHandler, Platform } from 'react-native';
+
+export const isSearchBarAvailableForCurrentPlatform = [
+  'ios',
+  'android',
+].includes(Platform.OS);
+
+export function executeNativeBackPress() {
+  // This function invokes the native back press event
+  BackHandler.exitApp();
+  return true;
+}