react-native-screens 3.19.0 → 3.21.0

package/lib/typescript/fabric/ScreenStackHeaderConfigNativeComponent.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react-native/types/modules/codegen" />
+import type { ViewProps, ColorValue } from 'react-native';
+import type { Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+declare type DirectionType = 'rtl' | 'ltr';
+export interface NativeProps extends ViewProps {
+    backgroundColor?: ColorValue;
+    backTitle?: string;
+    backTitleFontFamily?: string;
+    backTitleFontSize?: Int32;
+    backTitleVisible?: WithDefault<boolean, 'true'>;
+    color?: ColorValue;
+    direction?: WithDefault<DirectionType, 'ltr'>;
+    hidden?: boolean;
+    hideShadow?: boolean;
+    largeTitle?: boolean;
+    largeTitleFontFamily?: string;
+    largeTitleFontSize?: Int32;
+    largeTitleFontWeight?: string;
+    largeTitleBackgroundColor?: ColorValue;
+    largeTitleHideShadow?: boolean;
+    largeTitleColor?: ColorValue;
+    translucent?: boolean;
+    title?: string;
+    titleFontFamily?: string;
+    titleFontSize?: Int32;
+    titleFontWeight?: string;
+    titleColor?: ColorValue;
+    disableBackButtonMenu?: boolean;
+    hideBackButton?: boolean;
+    backButtonInCustomView?: boolean;
+    topInsetEnabled?: boolean;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

package/lib/typescript/fabric/ScreenStackHeaderSubviewNativeComponent.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react-native/types/modules/codegen" />
+import type { ViewProps } from 'react-native';
+import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+export declare type HeaderSubviewTypes = 'back' | 'right' | 'left' | 'title' | 'center' | 'searchBar';
+export interface NativeProps extends ViewProps {
+    type?: WithDefault<HeaderSubviewTypes, 'left'>;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

package/lib/typescript/fabric/ScreenStackNativeComponent.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react-native/types/modules/codegen" />
+import type { ViewProps } from 'react-native';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+declare type FinishTransitioningEvent = Readonly<{}>;
+interface NativeProps extends ViewProps {
+    onFinishTransitioning?: DirectEventHandler<FinishTransitioningEvent>;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

package/lib/typescript/fabric/SearchBarNativeComponent.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+/// <reference types="react-native/types/modules/codegen" />
+import type { ViewProps, ColorValue, HostComponent } from 'react-native';
+import type { WithDefault, BubblingEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+declare type SearchBarEvent = Readonly<{}>;
+declare type SearchButtonPressedEvent = Readonly<{
+    text?: string;
+}>;
+declare type ChangeTextEvent = Readonly<{
+    text?: string;
+}>;
+declare 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;
+    barTintColor?: ColorValue;
+    tintColor?: ColorValue;
+    textColor?: ColorValue;
+    disableBackButtonOverride?: boolean;
+    inputType?: string;
+    onClose?: BubblingEventHandler<SearchBarEvent> | null;
+    onOpen?: BubblingEventHandler<SearchBarEvent> | null;
+    hintTextColor?: ColorValue;
+    headerIconColor?: ColorValue;
+    shouldShowHintSearchIcon?: WithDefault<boolean, true>;
+}
+declare 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 declare const Commands: NativeCommands;
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

package/lib/typescript/index.d.ts

@@ -24,8 +24,8 @@ export declare const ScreenStackHeaderBackButtonImage: (props: ImageProps) => JS
 export declare const ScreenStackHeaderRightView: (props: React.PropsWithChildren<ViewProps>) => JSX.Element;
 export declare const ScreenStackHeaderLeftView: (props: React.PropsWithChildren<ViewProps>) => JSX.Element;
 export declare const ScreenStackHeaderCenterView: (props: React.PropsWithChildren<ViewProps>) => JSX.Element;
-export declare const ScreenStackHeaderSearchBarView: (props: React.PropsWithChildren<SearchBarProps>) => JSX.Element;
-export declare const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps>;
+export declare const ScreenStackHeaderSearchBarView: (props: React.PropsWithChildren<Omit<SearchBarProps, 'ref'>>) => JSX.Element;
+export declare const ScreenStackHeaderConfig: (props: React.PropsWithChildren<ScreenStackHeaderConfigProps>) => JSX.Element;
 export declare const SearchBar: React.ComponentType<SearchBarProps>;
 export declare const ScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<ViewProps & {
     type?: HeaderSubviewTypes;

package/lib/typescript/native-stack/navigators/createNativeStackNavigator.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { StackNavigationState } from '@react-navigation/native';
+import { StackNavigationState, ParamListBase } from '@react-navigation/native';
 import { NativeStackNavigationEventMap, NativeStackNavigationOptions, NativeStackNavigatorProps } from '../types';
 declare function NativeStackNavigator({ initialRouteName, children, screenOptions, ...rest }: NativeStackNavigatorProps): JSX.Element;
-declare const _default: <ParamList extends Record<string, object | undefined>>() => import("@react-navigation/native").TypedNavigator<ParamList, StackNavigationState<Record<string, object | undefined>>, NativeStackNavigationOptions, NativeStackNavigationEventMap, typeof NativeStackNavigator>;
+declare const _default: <ParamList extends Record<string, object | undefined>>() => import("@react-navigation/native").TypedNavigator<ParamList, StackNavigationState<ParamListBase>, NativeStackNavigationOptions, NativeStackNavigationEventMap, typeof NativeStackNavigator>;
 export default _default;

package/lib/typescript/native-stack/types.d.ts

@@ -1,7 +1,7 @@
 import { DefaultNavigatorOptions, Descriptor, NavigationHelpers, NavigationProp, ParamListBase, StackNavigationState, StackRouterOptions, StackActionHelpers, RouteProp } from '@react-navigation/native';
 import * as React from 'react';
 import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
-import { ScreenProps, ScreenStackHeaderConfigProps, SearchBarProps } from 'react-native-screens';
+import { ScreenProps, ScreenStackHeaderConfigProps, SearchBarProps, SheetDetentTypes } from 'react-native-screens';
 export declare type NativeStackNavigationEventMap = {
     /**
      * Event which fires when the screen appears.
@@ -290,6 +290,60 @@ export declare 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/lib/typescript/reanimated/ReanimatedNativeStackScreen.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ScreenProps } from 'react-native-screens';
 import Animated from 'react-native-reanimated';
-declare const ReanimatedNativeStackScreen: React.ForwardRefExoticComponent<Pick<ScreenProps, "children" | "active" | "activityState" | "customAnimationOnSwipe" | "enabled" | "isNativeStack" | "freezeOnBlur" | "fullScreenSwipeEnabled" | "gestureEnabled" | "gestureResponseDistance" | "homeIndicatorHidden" | "hideKeyboardOnSwipe" | "nativeBackButtonDismissalEnabled" | "navigationBarColor" | "navigationBarHidden" | "onAppear" | "onComponentRef" | "onDisappear" | "onDismissed" | "onHeaderBackButtonClicked" | "onNativeDismissCancelled" | "onTransitionProgress" | "onWillAppear" | "onWillDisappear" | "preventNativeDismiss" | "replaceAnimation" | "screenOrientation" | "stackAnimation" | "stackPresentation" | "statusBarAnimation" | "statusBarColor" | "statusBarHidden" | "statusBarStyle" | "statusBarTranslucent" | "swipeDirection" | "transitionDuration" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors"> & React.RefAttributes<React.ComponentClass<Animated.AnimateProps<{}>, any>>>;
+declare const ReanimatedNativeStackScreen: React.ForwardRefExoticComponent<Omit<ScreenProps, "ref"> & React.RefAttributes<React.ComponentClass<Animated.AnimateProps<{}>, any>>>;
 export default ReanimatedNativeStackScreen;

package/lib/typescript/reanimated/ReanimatedScreen.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ScreenProps } from 'react-native-screens';
 import Animated from 'react-native-reanimated';
-declare const ReanimatedScreen: React.ForwardRefExoticComponent<Pick<ScreenProps, "children" | "active" | "activityState" | "customAnimationOnSwipe" | "enabled" | "isNativeStack" | "freezeOnBlur" | "fullScreenSwipeEnabled" | "gestureEnabled" | "gestureResponseDistance" | "homeIndicatorHidden" | "hideKeyboardOnSwipe" | "nativeBackButtonDismissalEnabled" | "navigationBarColor" | "navigationBarHidden" | "onAppear" | "onComponentRef" | "onDisappear" | "onDismissed" | "onHeaderBackButtonClicked" | "onNativeDismissCancelled" | "onTransitionProgress" | "onWillAppear" | "onWillDisappear" | "preventNativeDismiss" | "replaceAnimation" | "screenOrientation" | "stackAnimation" | "stackPresentation" | "statusBarAnimation" | "statusBarColor" | "statusBarHidden" | "statusBarStyle" | "statusBarTranslucent" | "swipeDirection" | "transitionDuration" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors"> & React.RefAttributes<React.ComponentClass<Animated.AnimateProps<{}>, any>>>;
+declare const ReanimatedScreen: React.ForwardRefExoticComponent<Omit<ScreenProps, "ref"> & React.RefAttributes<React.ComponentClass<Animated.AnimateProps<{}>, any>>>;
 export default ReanimatedScreen;

package/lib/typescript/types.d.ts

@@ -1,5 +1,12 @@
 /// <reference types="react" />
 import { Animated, NativeSyntheticEvent, ViewProps, View, TargetedEvent, TextInputFocusEventData } from 'react-native';
+export declare type SearchBarCommands = {
+    focus: () => void;
+    blur: () => void;
+    clearText: () => void;
+    toggleCancelButton: (show: boolean) => void;
+    setText: (text: string) => void;
+};
 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';
@@ -18,9 +25,10 @@ export declare type GestureResponseDistanceType = {
     top?: number;
     bottom?: number;
 };
+export declare 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`.
@@ -163,6 +171,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:
@@ -273,6 +335,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
@@ -387,6 +454,18 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
     translucent?: boolean;
 }
 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
      */

package/lib/typescript/useTransitionProgress.d.ts

@@ -1,5 +1,5 @@
 export default function useTransitionProgress(): {
-    progress: import("react-native").Animated.Value;
-    closing: import("react-native").Animated.Value;
-    goingForward: import("react-native").Animated.Value;
+    progress: import("react-native/types").Animated.Value;
+    closing: import("react-native/types").Animated.Value;
+    goingForward: import("react-native/types").Animated.Value;
 };

package/native-stack/README.md

@@ -102,7 +102,7 @@ gestureResponseDistance: {
 
 #### `headerBackTitle`
 
-Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
+Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle` when not set or set to whitespace only value.
 
 #### `headerBackTitleStyle`
 
@@ -227,6 +227,54 @@ The following values are currently supported:
 
 Defaults to `pop`.
 
+#### `sheetAllowedDetents` (iOS only)
+
+Describes heights where a sheet can rest. 
+Works only when `stackPresentation` is set to `formSheet`.
+
+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
+
+Defaults to `large`.
+
+#### `sheetExpandsWhenScrolledToEdge` (iOS only)
+
+Whether the sheet should expand to larger detent when scrolling.
+Works only when `stackPresentation` is set to `formSheet`.
+
+Defaults to `true`.
+
+#### `sheetCornerRadius (iOS only)
+
+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 it will apply system default.
+
+Defaults to system default.
+
+#### `sheetGrabberVisible` (iOS only)
+
+Boolean indicating whether the sheet shows a grabber at the top.
+Works only when `stackPresentation` is set to `formSheet`.
+Defaults to `false`.
+
+#### `sheetLargestUndimmedDetent` (iOS only)
+
+ 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`.
+
 #### `stackAnimation`
 
 How the given screen should appear/disappear when pushed or popped at the top of the stack. Possible values:
@@ -548,6 +596,16 @@ The search and close icon color shown in the header. (Android only)
 
 Show the search hint icon when search bar is focused. (Android only)
 
+#### `ref`
+
+A React ref to imperatively modify search bar. Supported actions:
+
+*  `focus` - focus on search bar
+*  `blur` - remove focus from search bar
+*  `clearText` - clear text in search bar
+*  `setText` - set search bar's content to given string
+*  `toggleCancelButton` (iOS only) - toggle cancel button display near search bar.
+
 ### 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.19.0",
+  "version": "3.21.0",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "check-types": "tsc --noEmit",
@@ -26,7 +26,6 @@
     "common/",
     "lib/",
     "native-stack/",
-    "createNativeStackNavigator/",
     "reanimated/",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
@@ -71,11 +70,10 @@
     "@react-navigation/native": "^5.8.0",
     "@react-navigation/stack": "^5.10.0",
     "@types/jest": "^26.0.8",
-    "@types/react": "^16.9.44",
-    "@types/react-native": "^0.63.2",
+    "@types/react": "^18.0.24",
     "@types/react-test-renderer": "^16.9.2",
-    "@typescript-eslint/eslint-plugin": "^3.7.1",
-    "@typescript-eslint/parser": "^3.7.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
     "@react-native-community/cli": "^9.0.0",
     "@react-native-community/cli-platform-android": "^9.0.0",
     "@react-native-community/cli-platform-ios": "^9.0.0",
@@ -99,22 +97,21 @@
     "lint-staged": "^11.1.2",
     "metro-react-native-babel-preset": "^0.61.0",
     "prettier": "^2.0.4",
-    "react": "^16.13.1",
+    "react": "18.2.0",
     "react-dom": "^16.13.1",
-    "react-native": "^0.63.2",
+    "react-native": "0.71.0",
     "react-native-reanimated": "^2.2.0",
-    "react-native-safe-area-context": "^4.0.1-rc.5",
+    "react-native-safe-area-context": "^4.4.1",
     "react-native-windows": "^0.64.8",
-    "react-navigation": "^4.4.3",
-    "react-navigation-stack": "^2.9.0",
     "react-test-renderer": "^16.13.1",
-    "release-it": "^13.5.2",
-    "typescript": "^3.9.7"
+    "release-it": "^15.6.0",
+    "typescript": "4.8.4"
   },
   "resolutions": {
     "@react-native-community/cli-platform-android": "^9.0.0",
     "@react-native-community/cli": "^9.0.0",
-    "@react-native-community/cli-platform-ios": "^9.0.0"
+    "@react-native-community/cli-platform-ios": "^9.0.0",
+    "@types/react": "^18.0.24"
   },
   "lint-staged": {
     "{src,Example}/**/*.{js,ts,tsx}": "yarn format-js",

package/src/fabric/FullWindowOverlayNativeComponent.ts

@@ -0,0 +1,6 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+
+interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('RNSFullWindowOverlay', {});

package/src/fabric/ScreenContainerNativeComponent.ts

@@ -0,0 +1,6 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+
+interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('RNSScreenContainer', {});

package/src/fabric/ScreenNativeComponent.ts

@@ -0,0 +1,97 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps, ColorValue } from 'react-native';
+import type {
+  BubblingEventHandler,
+  WithDefault,
+  Int32,
+  Float,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type ScreenEvent = Readonly<{}>;
+
+type ScreenDismissedEvent = Readonly<{
+  dismissCount: Int32;
+}>;
+
+type TransitionProgressEvent = Readonly<{
+  progress: Double;
+  closing: Int32;
+  goingForward: Int32;
+}>;
+
+type GestureResponseDistanceType = Readonly<{
+  start: Float;
+  end: Float;
+  top: Float;
+  bottom: Float;
+}>;
+
+type StackPresentation =
+  | 'push'
+  | 'modal'
+  | 'transparentModal'
+  | 'fullScreenModal'
+  | 'formSheet'
+  | 'containedModal'
+  | 'containedTransparentModal';
+
+type StackAnimation =
+  | 'default'
+  | 'flip'
+  | 'simple_push'
+  | 'none'
+  | 'fade'
+  | 'slide_from_right'
+  | 'slide_from_left'
+  | 'slide_from_bottom'
+  | 'fade_from_bottom';
+
+type SwipeDirection = 'vertical' | 'horizontal';
+
+type ReplaceAnimation = 'pop' | 'push';
+
+type SheetDetentTypes = 'large' | 'medium' | 'all';
+
+export interface NativeProps extends ViewProps {
+  onAppear?: BubblingEventHandler<ScreenEvent>;
+  onDisappear?: BubblingEventHandler<ScreenEvent>;
+  onDismissed?: BubblingEventHandler<ScreenDismissedEvent>;
+  onNativeDismissCancelled?: BubblingEventHandler<ScreenDismissedEvent>;
+  onWillAppear?: BubblingEventHandler<ScreenEvent>;
+  onWillDisappear?: BubblingEventHandler<ScreenEvent>;
+  onTransitionProgress?: BubblingEventHandler<TransitionProgressEvent>;
+  sheetAllowedDetents?: WithDefault<SheetDetentTypes, 'large'>;
+  sheetLargestUndimmedDetent?: WithDefault<SheetDetentTypes, 'all'>;
+  sheetGrabberVisible?: WithDefault<boolean, false>;
+  sheetCornerRadius?: WithDefault<Float, -1.0>;
+  sheetExpandsWhenScrolledToEdge?: WithDefault<boolean, false>;
+  customAnimationOnSwipe?: boolean;
+  fullScreenSwipeEnabled?: boolean;
+  homeIndicatorHidden?: boolean;
+  preventNativeDismiss?: boolean;
+  gestureEnabled?: WithDefault<boolean, true>;
+  statusBarColor?: ColorValue;
+  statusBarHidden?: boolean;
+  screenOrientation?: string;
+  statusBarAnimation?: string;
+  statusBarStyle?: string;
+  statusBarTranslucent?: boolean;
+  gestureResponseDistance?: GestureResponseDistanceType;
+  stackPresentation?: WithDefault<StackPresentation, 'push'>;
+  stackAnimation?: WithDefault<StackAnimation, 'default'>;
+  transitionDuration?: WithDefault<Int32, 350>;
+  replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
+  swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
+  hideKeyboardOnSwipe?: boolean;
+  activityState?: WithDefault<Float, -1.0>;
+  navigationBarColor?: ColorValue;
+  navigationBarHidden?: boolean;
+  nativeBackButtonDismissalEnabled?: boolean;
+  onHeaderBackButtonClicked?: BubblingEventHandler<ScreenEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSScreen', {
+  interfaceOnly: true,
+});

package/src/fabric/ScreenNavigationContainerNativeComponent.ts

@@ -0,0 +1,9 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+
+interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNSScreenNavigationContainer',
+  {}
+);

package/src/fabric/ScreenStackHeaderConfigNativeComponent.ts

@@ -0,0 +1,43 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps, ColorValue } from 'react-native';
+import type {
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+type DirectionType = 'rtl' | 'ltr';
+
+export interface NativeProps extends ViewProps {
+  backgroundColor?: ColorValue;
+  backTitle?: string;
+  backTitleFontFamily?: string;
+  backTitleFontSize?: Int32;
+  backTitleVisible?: WithDefault<boolean, 'true'>;
+  color?: ColorValue;
+  direction?: WithDefault<DirectionType, 'ltr'>;
+  hidden?: boolean;
+  hideShadow?: boolean;
+  largeTitle?: boolean;
+  largeTitleFontFamily?: string;
+  largeTitleFontSize?: Int32;
+  largeTitleFontWeight?: string;
+  largeTitleBackgroundColor?: ColorValue;
+  largeTitleHideShadow?: boolean;
+  largeTitleColor?: ColorValue;
+  translucent?: boolean;
+  title?: string;
+  titleFontFamily?: string;
+  titleFontSize?: Int32;
+  titleFontWeight?: string;
+  titleColor?: ColorValue;
+  disableBackButtonMenu?: boolean;
+  hideBackButton?: boolean;
+  backButtonInCustomView?: boolean;
+  // TODO: implement this props on iOS
+  topInsetEnabled?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNSScreenStackHeaderConfig',
+  {}
+);