react-native-screens 3.20.0 → 3.21.0

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

@@ -1,8 +1,8 @@
 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';
-export type NativeStackNavigationEventMap = {
+import { ScreenProps, ScreenStackHeaderConfigProps, SearchBarProps, SheetDetentTypes } from 'react-native-screens';
+export declare type NativeStackNavigationEventMap = {
     /**
      * Event which fires when the screen appears.
      *
@@ -34,14 +34,14 @@ export type NativeStackNavigationEventMap = {
         };
     };
 };
-export type NativeStackNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = string> = NavigationProp<ParamList, RouteName, StackNavigationState<ParamList>, NativeStackNavigationOptions, NativeStackNavigationEventMap> & StackActionHelpers<ParamList>;
-export type NativeStackScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = string> = {
+export declare type NativeStackNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = string> = NavigationProp<ParamList, RouteName, StackNavigationState<ParamList>, NativeStackNavigationOptions, NativeStackNavigationEventMap> & StackActionHelpers<ParamList>;
+export declare type NativeStackScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = string> = {
     navigation: NativeStackNavigationProp<ParamList, RouteName>;
     route: RouteProp<ParamList, RouteName>;
 };
-export type NativeStackNavigationHelpers = NavigationHelpers<ParamListBase, NativeStackNavigationEventMap>;
-export type NativeStackNavigationConfig = {};
-export type NativeStackNavigationOptions = {
+export declare type NativeStackNavigationHelpers = NavigationHelpers<ParamListBase, NativeStackNavigationEventMap>;
+export declare type NativeStackNavigationConfig = {};
+export declare type NativeStackNavigationOptions = {
     /**
      * Image to display in the header as the back button.
      * Defaults to back icon image for the platform (a chevron on iOS and an arrow on Android).
@@ -290,6 +290,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:
@@ -361,8 +415,8 @@ export type NativeStackNavigationOptions = {
      */
     transitionDuration?: number;
 };
-export type NativeStackNavigatorProps = DefaultNavigatorOptions<NativeStackNavigationOptions> & StackRouterOptions & NativeStackNavigationConfig;
-export type NativeStackDescriptor = Descriptor<ParamListBase, string, StackNavigationState<ParamListBase>, NativeStackNavigationOptions>;
-export type NativeStackDescriptorMap = {
+export declare type NativeStackNavigatorProps = DefaultNavigatorOptions<NativeStackNavigationOptions> & StackRouterOptions & NativeStackNavigationConfig;
+export declare type NativeStackDescriptor = Descriptor<ParamListBase, string, StackNavigationState<ParamListBase>, NativeStackNavigationOptions>;
+export declare type NativeStackDescriptorMap = {
     [key: string]: NativeStackDescriptor;
 };

package/lib/typescript/native-stack/utils/SafeAreaProviderCompat.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-type Props = {
+declare type Props = {
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 };

package/lib/typescript/native-stack/utils/getDefaultHeaderHeight.d.ts

@@ -1,5 +1,5 @@
 import { StackPresentationTypes } from 'react-native-screens';
-type Layout = {
+declare type Layout = {
     width: number;
     height: number;
 };

package/lib/typescript/native-stack/views/HeaderConfig.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Route } from '@react-navigation/native';
 import { NativeStackNavigationOptions } from '../types';
-type Props = NativeStackNavigationOptions & {
+declare type Props = NativeStackNavigationOptions & {
     route: Route<string>;
 };
 export default function HeaderConfig({ backButtonImage, backButtonInCustomView, direction, disableBackButtonMenu, headerBackTitle, headerBackTitleStyle, headerBackTitleVisible, headerCenter, headerHideBackButton, headerHideShadow, headerLargeStyle, headerLargeTitle, headerLargeTitleHideShadow, headerLargeTitleStyle, headerLeft, headerRight, headerShown, headerStyle, headerTintColor, headerTitle, headerTitleStyle, headerTopInsetEnabled, headerTranslucent, route, searchBar, title, }: Props): JSX.Element;

package/lib/typescript/native-stack/views/NativeStackView.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ParamListBase, StackNavigationState } from '@react-navigation/native';
 import { NativeStackDescriptorMap, NativeStackNavigationHelpers } from '../types';
-type Props = {
+declare type Props = {
     state: StackNavigationState<ParamListBase>;
     navigation: NativeStackNavigationHelpers;
     descriptors: NativeStackDescriptorMap;

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, "active" | "activityState" | "children" | "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, "active" | "activityState" | "children" | "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/reanimated/ReanimatedTransitionProgressContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
-type ReanimatedTransitionProgressContextBody = {
+declare type ReanimatedTransitionProgressContextBody = {
     progress: Animated.SharedValue<number>;
     closing: Animated.SharedValue<number>;
     goingForward: Animated.SharedValue<number>;

package/lib/typescript/types.d.ts

@@ -1,26 +1,34 @@
 /// <reference types="react" />
 import { Animated, NativeSyntheticEvent, ViewProps, View, TargetedEvent, TextInputFocusEventData } from 'react-native';
-export type StackPresentationTypes = 'push' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal' | 'fullScreenModal' | 'formSheet';
-export type StackAnimationTypes = 'default' | 'fade' | 'fade_from_bottom' | 'flip' | 'none' | 'simple_push' | 'slide_from_bottom' | 'slide_from_right' | 'slide_from_left';
-export type BlurEffectTypes = 'extraLight' | 'light' | 'dark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
-export type ScreenReplaceTypes = 'push' | 'pop';
-export type SwipeDirectionTypes = 'vertical' | 'horizontal';
-export type ScreenOrientationTypes = 'default' | 'all' | 'portrait' | 'portrait_up' | 'portrait_down' | 'landscape' | 'landscape_left' | 'landscape_right';
-export type HeaderSubviewTypes = 'back' | 'right' | 'left' | 'center' | 'searchBar';
-export type TransitionProgressEventType = {
+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';
+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 = {
     progress: number;
     closing: number;
     goingForward: number;
 };
-export type GestureResponseDistanceType = {
+export declare type GestureResponseDistanceType = {
     start?: number;
     end?: number;
     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.20.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": "^4.8.4"
+    "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',
+  {}
+);

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',
+  {}
+);