react-native-screens 3.19.0 → 3.21.0

package/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts

@@ -0,0 +1,20 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+
+export type HeaderSubviewTypes =
+  | 'back'
+  | 'right'
+  | 'left'
+  | 'title'
+  | 'center'
+  | 'searchBar';
+
+export interface NativeProps extends ViewProps {
+  type?: WithDefault<HeaderSubviewTypes, 'left'>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNSScreenStackHeaderSubview',
+  {}
+);

package/src/fabric/ScreenStackNativeComponent.ts

@@ -0,0 +1,12 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type FinishTransitioningEvent = Readonly<{}>;
+
+interface NativeProps extends ViewProps {
+  onFinishTransitioning?: DirectEventHandler<FinishTransitioningEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSScreenStack', {});

package/src/fabric/SearchBarNativeComponent.ts

@@ -0,0 +1,73 @@
+/* eslint-disable */
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps, ColorValue, HostComponent } from 'react-native';
+import type {
+  WithDefault,
+  BubblingEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+
+type SearchBarEvent = Readonly<{}>;
+
+type SearchButtonPressedEvent = Readonly<{
+  text?: string;
+}>;
+
+type ChangeTextEvent = Readonly<{
+  text?: string;
+}>;
+
+type AutoCapitalizeType = 'none' | 'words' | 'sentences' | 'characters';
+
+interface NativeProps extends ViewProps {
+  onFocus?: BubblingEventHandler<SearchBarEvent> | null;
+  onBlur?: BubblingEventHandler<SearchBarEvent> | null;
+  onSearchButtonPress?: BubblingEventHandler<SearchButtonPressedEvent> | null;
+  onCancelButtonPress?: BubblingEventHandler<SearchBarEvent> | null;
+  onChangeText?: BubblingEventHandler<ChangeTextEvent> | null;
+  hideWhenScrolling?: boolean;
+  autoCapitalize?: WithDefault<AutoCapitalizeType, 'none'>;
+  placeholder?: string;
+  obscureBackground?: boolean;
+  hideNavigationBar?: boolean;
+  cancelButtonText?: string;
+  // TODO: implement these on iOS
+  barTintColor?: ColorValue;
+  tintColor?: ColorValue;
+  textColor?: ColorValue;
+
+  // Android only
+  disableBackButtonOverride?: boolean;
+  // TODO: consider creating enum here
+  inputType?: string;
+  onClose?: BubblingEventHandler<SearchBarEvent> | null;
+  onOpen?: BubblingEventHandler<SearchBarEvent> | null;
+  hintTextColor?: ColorValue;
+  headerIconColor?: ColorValue;
+  shouldShowHintSearchIcon?: WithDefault<boolean, true>;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  blur: (viewRef: React.ElementRef<ComponentType>) => void;
+  focus: (viewRef: React.ElementRef<ComponentType>) => void;
+  clearText: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleCancelButton: (
+    viewRef: React.ElementRef<ComponentType>,
+    flag: boolean
+  ) => void;
+  setText: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    'blur',
+    'focus',
+    'clearText',
+    'toggleCancelButton',
+    'setText',
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>('RNSSearchBar', {});

package/src/index.native.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import React, { PropsWithChildren, ReactNode } from 'react';
 import {
   Animated,
@@ -29,6 +30,7 @@ import {
   ScreenStackProps,
   ScreenStackHeaderConfigProps,
   SearchBarProps,
+  SearchBarCommands,
 } from './types';
 import {
   isSearchBarAvailableForCurrentPlatform,
@@ -74,6 +76,26 @@ function screensEnabled(): boolean {
   return ENABLE_SCREENS;
 }
 
+type SearchBarCommandsType = {
+  blur: (
+    viewRef: React.ElementRef<typeof ScreensNativeModules.NativeSearchBar>
+  ) => void;
+  focus: (
+    viewRef: React.ElementRef<typeof ScreensNativeModules.NativeSearchBar>
+  ) => void;
+  clearText: (
+    viewRef: React.ElementRef<typeof ScreensNativeModules.NativeSearchBar>
+  ) => void;
+  toggleCancelButton: (
+    viewRef: React.ElementRef<typeof ScreensNativeModules.NativeSearchBar>,
+    flag: boolean
+  ) => void;
+  setText: (
+    viewRef: React.ElementRef<typeof ScreensNativeModules.NativeSearchBar>,
+    text: string
+  ) => void;
+};
+
 // We initialize these lazily so that importing the module doesn't throw error when not linked
 // This is necessary coz libraries such as React Navigation import the library where it may not be enabled
 let NativeScreenValue: React.ComponentType<ScreenProps>;
@@ -85,7 +107,11 @@ let NativeScreenStackHeaderSubview: React.ComponentType<
   React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
 >;
 let AnimatedNativeScreen: React.ComponentType<ScreenProps>;
-let NativeSearchBar: React.ComponentType<SearchBarProps>;
+
+let NativeSearchBar: React.ComponentType<SearchBarProps> &
+  typeof NativeSearchBarCommands;
+let NativeSearchBarCommands: SearchBarCommandsType;
+
 let NativeFullWindowOverlay: React.ComponentType<
   PropsWithChildren<{
     style: StyleProp<ViewStyle>;
@@ -95,14 +121,14 @@ let NativeFullWindowOverlay: React.ComponentType<
 const ScreensNativeModules = {
   get NativeScreen() {
     NativeScreenValue =
-      NativeScreenValue || requireNativeComponent('RNSScreen');
+      NativeScreenValue || require('./fabric/ScreenNativeComponent').default;
     return NativeScreenValue;
   },
 
   get NativeScreenContainer() {
     NativeScreenContainerValue =
       NativeScreenContainerValue ||
-      requireNativeComponent('RNSScreenContainer');
+      require('./fabric/ScreenContainerNativeComponent').default;
     return NativeScreenContainerValue;
   },
 
@@ -136,9 +162,16 @@ const ScreensNativeModules = {
   },
 
   get NativeSearchBar() {
-    NativeSearchBar = NativeSearchBar || requireNativeComponent('RNSSearchBar');
+    NativeSearchBar =
+      NativeSearchBar || require('./fabric/SearchBarNativeComponent').default;
     return NativeSearchBar;
   },
+  get NativeSearchBarCommands() {
+    NativeSearchBarCommands =
+      NativeSearchBarCommands ||
+      require('./fabric/SearchBarNativeComponent').Commands;
+    return NativeSearchBarCommands;
+  },
 
   get NativeFullWindowOverlay() {
     NativeFullWindowOverlay =
@@ -379,6 +412,72 @@ const ScreenStackHeaderBackButtonImage = (props: ImageProps): JSX.Element => (
   </ScreensNativeModules.NativeScreenStackHeaderSubview>
 );
 
+class SearchBar extends React.Component<SearchBarProps> {
+  nativeSearchBarRef: React.RefObject<SearchBarCommands>;
+
+  constructor(props: SearchBarProps) {
+    super(props);
+    this.nativeSearchBarRef = React.createRef();
+  }
+
+  _callMethodWithRef(method: (ref: SearchBarCommands) => void) {
+    const ref = this.nativeSearchBarRef.current;
+    if (ref) {
+      method(ref);
+    } else {
+      console.warn(
+        'Reference to native search bar component has not been updated yet'
+      );
+    }
+  }
+
+  blur() {
+    this._callMethodWithRef((ref) =>
+      ScreensNativeModules.NativeSearchBarCommands.blur(ref)
+    );
+  }
+
+  focus() {
+    this._callMethodWithRef((ref) =>
+      ScreensNativeModules.NativeSearchBarCommands.focus(ref)
+    );
+  }
+
+  toggleCancelButton(flag: boolean) {
+    this._callMethodWithRef((ref) =>
+      ScreensNativeModules.NativeSearchBarCommands.toggleCancelButton(ref, flag)
+    );
+  }
+
+  clearText() {
+    this._callMethodWithRef((ref) =>
+      ScreensNativeModules.NativeSearchBarCommands.clearText(ref)
+    );
+  }
+
+  setText(text: string) {
+    this._callMethodWithRef((ref) =>
+      ScreensNativeModules.NativeSearchBarCommands.setText(ref, text)
+    );
+  }
+
+  render() {
+    if (!isSearchBarAvailableForCurrentPlatform) {
+      console.warn(
+        'Importing SearchBar is only valid on iOS and Android devices.'
+      );
+      return View as any as ReactNode;
+    }
+
+    return (
+      <ScreensNativeModules.NativeSearchBar
+        {...this.props}
+        ref={this.nativeSearchBarRef}
+      />
+    );
+  }
+}
+
 const ScreenStackHeaderRightView = (
   props: React.PropsWithChildren<ViewProps>
 ): JSX.Element => (
@@ -441,7 +540,7 @@ class Screen extends React.Component<ScreenProps> {
   static contextType = ScreenContext;
 
   render() {
-    const ScreenWrapper = this.context || InnerScreen;
+    const ScreenWrapper = (this.context || InnerScreen) as React.ElementType;
     return <ScreenWrapper {...this.props} />;
   }
 }
@@ -454,6 +553,7 @@ module.exports = {
   ScreenContext,
   ScreenStack,
   InnerScreen,
+  SearchBar,
   FullWindowOverlay,
 
   get NativeScreen() {
@@ -474,15 +574,8 @@ module.exports = {
   get ScreenStackHeaderSubview() {
     return ScreensNativeModules.NativeScreenStackHeaderSubview;
   },
-  get SearchBar() {
-    if (!isSearchBarAvailableForCurrentPlatform) {
-      console.warn(
-        'Importing SearchBar is only valid on iOS and Android devices.'
-      );
-      return View;
-    }
-
-    return ScreensNativeModules.NativeSearchBar;
+  get SearchBarCommands() {
+    return ScreensNativeModules.NativeSearchBarCommands;
   },
   // these are functions and will not be evaluated until used
   // so no need to use getters for them

package/src/index.tsx

@@ -101,11 +101,12 @@ export const ScreenStackHeaderCenterView = (
 ): JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderSearchBarView = (
-  props: React.PropsWithChildren<SearchBarProps>
+  props: React.PropsWithChildren<Omit<SearchBarProps, 'ref'>>
 ): JSX.Element => <View {...props} />;
 
-export const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> =
-  View;
+export const ScreenStackHeaderConfig = (
+  props: React.PropsWithChildren<ScreenStackHeaderConfigProps>
+): JSX.Element => <View {...props} />;
 
 // @ts-expect-error: search bar props have no common props with View
 export const SearchBar: React.ComponentType<SearchBarProps> = View;

package/src/native-stack/navigators/createNativeStackNavigator.tsx

@@ -48,26 +48,30 @@ function NativeStackNavigator({
 
   React.useEffect(
     () =>
-      navigation?.addListener?.('tabPress', (e) => {
-        const isFocused = navigation.isFocused();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (navigation as typeof navigation & { addListener: any })?.addListener?.(
+        'tabPress',
+        (e: any) => {
+          const isFocused = navigation.isFocused();
 
-        // Run the operation in the next frame so we're sure all listeners have been run
-        // This is necessary to know if preventDefault() has been called
-        requestAnimationFrame(() => {
-          if (
-            state.index > 0 &&
-            isFocused &&
-            !(e as EventArg<'tabPress', true>).defaultPrevented
-          ) {
-            // When user taps on already focused tab and we're inside the tab,
-            // reset the stack to replicate native behaviour
-            navigation.dispatch({
-              ...StackActions.popToTop(),
-              target: state.key,
-            });
-          }
-        });
-      }),
+          // Run the operation in the next frame so we're sure all listeners have been run
+          // This is necessary to know if preventDefault() has been called
+          requestAnimationFrame(() => {
+            if (
+              state.index > 0 &&
+              isFocused &&
+              !(e as EventArg<'tabPress', true>).defaultPrevented
+            ) {
+              // When user taps on already focused tab and we're inside the tab,
+              // reset the stack to replicate native behaviour
+              navigation.dispatch({
+                ...StackActions.popToTop(),
+                target: state.key,
+              });
+            }
+          });
+        }
+      ),
     [navigation, state.index, state.key]
   );
 

package/src/native-stack/types.tsx

@@ -15,6 +15,7 @@ import {
   ScreenProps,
   ScreenStackHeaderConfigProps,
   SearchBarProps,
+  SheetDetentTypes,
 } from 'react-native-screens';
 
 export type NativeStackNavigationEventMap = {
@@ -310,6 +311,60 @@ export type NativeStackNavigationOptions = {
    * Object in which you should pass props in order to render native iOS searchBar.
    */
   searchBar?: SearchBarProps;
+  /**
+   * Describes heights where a sheet can rest.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   * Defaults to `large`.
+   *
+   * Available values:
+   *
+   * - `large` - only large detent level will be allowed
+   * - `medium` - only medium detent level will be allowed
+   * - `all` - all detent levels will be allowed
+   *
+   * @platform ios
+   */
+  sheetAllowedDetents?: SheetDetentTypes;
+  /**
+   * Whether the sheet should expand to larger detent when scrolling.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   * Defaults to `true`.
+   */
+  sheetExpandsWhenScrolledToEdge?: boolean;
+  /**
+   * The corner radius that the sheet will try to render with.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   *
+   * If set to non-negative value it will try to render sheet with provided radius, else ti will apply system default.
+   *
+   * If left unset system default is used.
+   *
+   * @platform ios
+   */
+  sheetCornerRadius?: number;
+  /**
+   * Boolean indicating whether the sheet shows a grabber at the top.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   * Defaults to `false`.
+   *
+   * @platform ios
+   */
+  sheetGrabberVisible?: boolean;
+  /**
+   * The largest sheet detent for which a view underneath won't be dimmed.
+   * Works only when `stackPresentation` is se tto `formSheet`.
+   *
+   * If this prop is set to:
+   *
+   * - `large` - the view underneath won't be dimmed at any detent level
+   * - `medium` - the view underneath will be dimmed only when detent level is `large`
+   * - `all` - the view underneath will be dimmed for any detent level
+   *
+   * Defaults to `all`.
+   *
+   * @platform ios
+   */
+  sheetLargestUndimmedDetent?: SheetDetentTypes;
   /**
    * How the screen should appear/disappear when pushed or popped at the top of the stack.
    * The following values are currently supported:

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

@@ -1,4 +1,5 @@
 // @ts-ignore: No declaration available
+// eslint-disable-next-line import/no-named-as-default, import/default, import/no-named-as-default-member, import/namespace
 import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
 
 export function processFonts(

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

@@ -73,6 +73,7 @@ export default function HeaderConfig({
     ]);
 
   // We want to clear clearSubscription only when components unmounts or search bar changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(() => clearSubscription, [searchBar]);
 
   const processedSearchBarOptions = React.useMemo(() => {
@@ -101,9 +102,10 @@ export default function HeaderConfig({
       backgroundColor={
         headerStyle.backgroundColor ? headerStyle.backgroundColor : colors.card
       }
-      backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
+      backTitle={headerBackTitle}
       backTitleFontFamily={backTitleFontFamily}
       backTitleFontSize={headerBackTitleStyle.fontSize}
+      backTitleVisible={headerBackTitleVisible}
       blurEffect={headerStyle.blurEffect}
       color={tintColor}
       direction={direction}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View, ViewProps } from 'react-native';
 // @ts-ignore Getting private component
+// eslint-disable-next-line import/no-named-as-default, import/default, import/no-named-as-default-member, import/namespace
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 import warnOnce from 'warn-once';
 import {
@@ -124,7 +125,6 @@ const MaybeNestedStack = ({
       </ScreenStack>
     );
   }
-
   return content;
 };
 
@@ -154,6 +154,11 @@ const RouteView = ({
     headerShown,
     hideKeyboardOnSwipe,
     homeIndicatorHidden,
+    sheetAllowedDetents = 'large',
+    sheetLargestUndimmedDetent = 'all',
+    sheetGrabberVisible = false,
+    sheetCornerRadius = -1.0,
+    sheetExpandsWhenScrolledToEdge = true,
     nativeBackButtonDismissalEnabled = false,
     navigationBarColor,
     navigationBarHidden,
@@ -214,12 +219,19 @@ const RouteView = ({
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
   const Screen = React.useContext(ScreenContext);
 
+  const { dark } = useTheme();
+
   return (
     <Screen
       key={route.key}
       enabled
       isNativeStack
       style={StyleSheet.absoluteFill}
+      sheetAllowedDetents={sheetAllowedDetents}
+      sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
+      sheetGrabberVisible={sheetGrabberVisible}
+      sheetCornerRadius={sheetCornerRadius}
+      sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
       customAnimationOnSwipe={customAnimationOnSwipe}
       freezeOnBlur={freezeOnBlur}
       fullScreenSwipeEnabled={fullScreenSwipeEnabled}
@@ -237,7 +249,7 @@ const RouteView = ({
       statusBarAnimation={statusBarAnimation}
       statusBarColor={statusBarColor}
       statusBarHidden={statusBarHidden}
-      statusBarStyle={statusBarStyle}
+      statusBarStyle={statusBarStyle ?? (dark ? 'light' : 'dark')}
       statusBarTranslucent={statusBarTranslucent}
       swipeDirection={swipeDirection}
       transitionDuration={transitionDuration}

package/src/types.tsx

@@ -7,6 +7,14 @@ import {
   TextInputFocusEventData,
 } from 'react-native';
 
+export type SearchBarCommands = {
+  focus: () => void;
+  blur: () => void;
+  clearText: () => void;
+  toggleCancelButton: (show: boolean) => void;
+  setText: (text: string) => void;
+};
+
 export type StackPresentationTypes =
   | 'push'
   | 'modal'
@@ -77,9 +85,11 @@ export type GestureResponseDistanceType = {
   bottom?: number;
 };
 
+export type SheetDetentTypes = 'medium' | 'large' | 'all';
+
 export interface ScreenProps extends ViewProps {
-  active?: 0 | 1 | Animated.AnimatedInterpolation;
-  activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation;
+  active?: 0 | 1 | Animated.AnimatedInterpolation<number>;
+  activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation<number>;
   children?: React.ReactNode;
   /**
    * Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`.
@@ -222,6 +232,60 @@ export interface ScreenProps extends ViewProps {
    * - "landscape_right" – landscape-right orientation is permitted
    */
   screenOrientation?: ScreenOrientationTypes;
+  /**
+   * Describes heights where a sheet can rest.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   * Defaults to `large`.
+   *
+   * Available values:
+   *
+   * - `large` - only large detent level will be allowed
+   * - `medium` - only medium detent level will be allowed
+   * - `all` - all detent levels will be allowed
+   *
+   * @platform ios
+   */
+  sheetAllowedDetents?: SheetDetentTypes;
+  /**
+   * Whether the sheet should expand to larger detent when scrolling.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   * Defaults to `true`.
+   */
+  sheetExpandsWhenScrolledToEdge?: boolean;
+  /**
+   * The corner radius that the sheet will try to render with.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   *
+   * If set to non-negative value it will try to render sheet with provided radius, else ti will apply system default.
+   *
+   * If left unset system default is used.
+   *
+   * @platform ios
+   */
+  sheetCornerRadius?: number;
+  /**
+   * Boolean indicating whether the sheet shows a grabber at the top.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   * Defaults to `false`.
+   *
+   * @platform ios
+   */
+  sheetGrabberVisible?: boolean;
+  /**
+   * The largest sheet detent for which a view underneath won't be dimmed.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   *
+   * If this prop is set to:
+   *
+   * - `large` - the view underneath won't be dimmed at any detent level
+   * - `medium` - the view underneath will be dimmed only when detent level is `large`
+   * - `all` - the view underneath will be dimmed for any detent level
+   *
+   * Defaults to `all`.
+   *
+   * @platform ios
+   */
+  sheetLargestUndimmedDetent?: SheetDetentTypes;
   /**
    * How the screen should appear/disappear when pushed or popped at the top of the stack.
    * The following values are currently supported:
@@ -335,6 +399,11 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
    * @platform ios
    */
   backTitleFontSize?: number;
+  /**
+   * Whether the back button title should be visible or not. Defaults to `true`.
+   * @platform ios
+   */
+  backTitleVisible?: boolean;
   /**
    * Blur effect to be applied to the header. Works with backgroundColor's alpha < 1.
    * @platform ios
@@ -450,6 +519,19 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
 }
 
 export interface SearchBarProps {
+  /**
+   * Reference to imperatively modify search bar.
+   *
+   * Currently supported operations are:
+   *
+   * * `focus` - focuses the search bar
+   * * `blur` - removes focus from the search bar
+   * * `clearText` - removes any text present in the search bar input field
+   * * `setText` - sets the search bar's content to given value
+   * * `toggleCancelButton` - depending on passed boolean value, hides or shows cancel button (iOS only)
+   */
+  ref?: React.RefObject<SearchBarCommands>;
+
   /**
    * The auto-capitalization behavior
    */