@amazon-devices/react-native-screens 2.0.1759135970 → 3.0.9000000000

package/native-stack/README.md

@@ -1,6 +1,7 @@
 # Native Stack Navigator
 
-> **_NOTE:_**  This README is dedicated for using `native-stack` with React Navigation **v5**. For using `native-stack` in React Navigation **v6** please refer to the [Native Stack Navigator part of React Navigation documentation](https://reactnavigation.org/docs/native-stack-navigator).
+> [!CAUTION]
+> NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
 
 Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
 
@@ -79,17 +80,31 @@ String that applies `rtl` or `ltr` form to the stack. On Android, you have to ad
 
 Boolean indicating whether to show the menu on longPress of iOS >= 14 back button.
 
+#### `backButtonDisplayMode` (iOS only)
+
+Enum value indicating display mode of **default** back button. It works on iOS >= 14, and is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu` or `backTitle` is set. Otherwise, when the button is customized, under the hood we use iOS native `backButtonItem` which overrides `backButtonDisplayMode`. Read more [#2123](https://github.com/software-mansion/react-native-screens/pull/2123). Possible options:
+
+- `default` – show given back button previous controller title, system generic or just icon based on available space
+- `generic` – show given system generic or just icon based on available space
+- `minimal` – show just an icon
+
 #### `fullScreenSwipeEnabled` (iOS only)
 
 Boolean indicating whether the swipe gesture should work on whole screen. Swiping with this option results in the same transition animation as `simple_push` by default. It can be changed to other custom animations with `customAnimationOnSwipe` prop, but default iOS swipe animation is not achievable due to usage of custom recognizer. Defaults to `false`.
 
+### `fullScreenSwipeShadowEnabled` (iOS only)
+
+Boolean indicating whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
+doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the
+default iOS shadow. Defaults to `true`.
+
 #### `gestureEnabled` (iOS only)
 
 Whether you can use gestures to dismiss this screen. Defaults to `true`.
 
 #### `gestureResponseDistance` (iOS only)
 
-Use it to restrict the distance from the edges of screen in which the gesture should be recognized. To be used alongside `fullScreenSwipeEnabled`. The responsive area is covered with 4 values: `start`, `end`, `top`, `bottom`. Example usage: 
+Use it to restrict the distance from the edges of screen in which the gesture should be recognized. To be used alongside `fullScreenSwipeEnabled`. The responsive area is covered with 4 values: `start`, `end`, `top`, `bottom`. Example usage:
 
 ```tsx
 gestureResponseDistance: {
@@ -189,13 +204,13 @@ Style object for header title. Supported properties:
 
 #### `headerTopInsetEnabled` (Android only)
 
-A Boolean to that lets you opt out of insetting the header. You may want to * set this to `false` if you use an opaque status bar. Defaults to `true`. Insets are always applied on iOS because the header cannot be opaque.
+A Boolean to that lets you opt out of insetting the header. You may want to \* set this to `false` if you use an opaque status bar. Defaults to `true`. Insets are always applied on iOS because the header cannot be opaque.
 
 #### `headerTranslucent`
 
 Boolean indicating whether the navigation bar is translucent.
 
-####  `hideKeyboardOnSwipe` (iOS only)
+#### `hideKeyboardOnSwipe` (iOS only)
 
 Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
 
@@ -222,23 +237,38 @@ Sets the visibility of the navigation bar. Defaults to `false`.
 
 How should the screen replacing another screen animate.
 The following values are currently supported:
-  - `push` – the new screen will perform push animation.
-  - `pop` – the new screen will perform pop animation.
+
+- `push` – the new screen will perform push animation.
+- `pop` – the new screen will perform pop animation.
 
 Defaults to `pop`.
 
-#### `sheetAllowedDetents` (iOS only)
+#### `sheetAllowedDetents`
 
-Describes heights where a sheet can rest. 
+Describes heights where a sheet can rest.
 Works only when `stackPresentation` is set to `formSheet`.
 
-Available values:
+Heights should be described as fraction (a number from `[0, 1]` interval) of screen height / maximum detent height.
+There is also possibility to specify `[-1]` literal array with single element, which intets to set the sheet height
+to the height of its contents.
+
+Please note that the array **must** be sorted in ascending order.
+
+There are also legacy & **deprecated** options available:
+
+* 'medium' - corresponds to `[0.5]` detent value, around half of the screen height,
+* 'large' - corresponds to `[1.0]` detent value, maximum height,
+* 'all' - corresponds to `[0.5, 1.0]` value, the name is deceiving due to compatibility reasons.
+
+Defaults to `[1.0]` literal.
+
+#### `sheetElevation` (Android only)
+
+Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet.
 
-- `large` - only large detent level will be allowed
-- `medium` - only medium detent level will be allowed
-- `all` - all detent levels will be allowed
+Not dynamic - changing it after the component is rendered won't have an effect.
 
-Defaults to `large`.
+Defaults to `24`.
 
 #### `sheetExpandsWhenScrolledToEdge` (iOS only)
 
@@ -247,7 +277,7 @@ Works only when `stackPresentation` is set to `formSheet`.
 
 Defaults to `true`.
 
-#### `sheetCornerRadius (iOS only)
+#### `sheetCornerRadius`
 
 The corner radius that the sheet will try to render with.
 Works only when `stackPresentation` is set to `formSheet`.
@@ -256,24 +286,36 @@ If set to non-negative value it will try to render sheet with provided radius, e
 
 Defaults to system default.
 
+#### `sheetInitialDetent`
+
+Index of the detent the sheet should expand to after being opened.
+Works only when `presentation` is set to `formSheet`.
+
+Defaults to `0` - which represents first detent in the detents array.
+
 #### `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)
+#### `sheetLargestUndimmedDetent`
+
+The largest sheet detent for which a view underneath won't be dimmed.
+Works only when `stackPresentation` is set to `formSheet`.
+
+This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
+there won't be a dimming view beneath the sheet.
 
- The largest sheet detent for which a view underneath won't be dimmed.
- Works only when `stackPresentation` is set to `formSheet`.
+Additionaly there are following options available:
 
- If this prop is set to:
+* `none` - there will be dimming view for all detents levels,
+* `largest` - there won't be a dimming view for any detent level.
 
- - `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
+There also legacy & **deprecated** prop values available: `medium`, `large` (don't confuse with `largest`), `all`, which work in tandem with
+corresponding legacy prop values for `sheetAllowedDetents` prop.
 
- Defaults to `all`.
+Defaults to `none`, indicating that the dimming view should be always present.
 
 #### `stackAnimation`
 
@@ -283,10 +325,12 @@ How the given screen should appear/disappear when pushed or popped at the top of
 - `fade` - fades screen in or out.
 - `fade_from_bottom` – performs a fade from bottom animation
 - `flip` – flips the screen, requires stackPresentation: `modal` (iOS only)
-- `simple_push` – performs a default animation, but without shadow and native header transition (iOS only)
+- `simple_push` – performs a default animation, but without native header transition (iOS only)
 - `slide_from_bottom` – performs a slide from bottom animation
 - `slide_from_right` - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
-- `slide_from_left` - slide in the new screen from left to right (Android only, resolves to default transition on iOS)
+- `slide_from_left` - slide in the new screen from left to right
+- `"ios_from_right"` - iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS)
+- `"ios_from_left"` - iOS like slide in animation. pushes in the new screen from left to right (Android only, resolves to default transition on iOS)
 - `none` - the screen appears/disappears without an animation.
 
 Defaults to `default`.
@@ -310,6 +354,7 @@ Using `containedModal` and `containedTransparentModal` with other types of modal
 #### `swipeDirection` (iOS only)
 
 Sets the direction in which you should swipe to dismiss the screen. The following values are supported:
+
 - `vertical` – dismiss screen vertically
 - `horizontal` – dismiss screen horizontally (default)
 
@@ -321,7 +366,7 @@ A string that can be used as a fallback for `headerTitle`.
 
 #### `transitionDuration` (iOS only)
 
-Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `500`.
 
 The duration of `default` and `flip` transitions isn't customizable.
 
@@ -334,25 +379,28 @@ Defaults to `false`. When `enableFreeze()` is run at the top of the application
 #### `useTransitionProgress`
 
 Hook providing context value of transition progress of the current screen to be used with `react-native` `Animated`. It consists of 2 values:
+
 - `progress` - `Animated.Value` between `0.0` and `1.0` with the progress of the current transition.
 - `closing` - `Animated.Value` of `1` or `0` indicating if the current screen is being navigated into or from.
 - `goingForward` - `Animated.Value` of `1` or `0` indicating if the current transition is pushing or removing screens.
 
 ```jsx
-import {Animated} from 'react-native';
-import {useTransitionProgress} from 'react-native-screens';
+import { Animated } from 'react-native';
+import { useTransitionProgress } from 'react-native-screens';
 
 function Home() {
-  const {progress} = useTransitionProgress();
+  const { progress } = useTransitionProgress();
 
   const opacity = progress.interpolate({
     inputRange: [0, 0.5, 1],
-    outputRange: [1.0, 0.0 ,1.0],
+    outputRange: [1.0, 0.0, 1.0],
     extrapolate: 'clamp',
   });
 
   return (
-    <Animated.View style={{opacity, height: 50, width: '100%', backgroundColor: 'green'}} />
+    <Animated.View
+      style={{ opacity, height: 50, width: '100%', backgroundColor: 'green' }}
+    />
   );
 }
 ```
@@ -360,14 +408,15 @@ function Home() {
 #### `useReanimatedTransitionProgress`
 
 A callback called every frame during the transition of screens to be used with `react-native-reanimated` version `2.x`. It consists of 2 shared values:
+
 - `progress` - between `0.0` and `1.0` with the progress of the current transition.
-- `closing` -  `1` or `0` indicating if the current screen is being navigated into or from.
+- `closing` - `1` or `0` indicating if the current screen is being navigated into or from.
 - `goingForward` - `1` or `0` indicating if the current transition is pushing or removing screens.
 
 In order to use it, you need to have `react-native-reanimated` version `2.x` installed in your project and wrap your code with `ReanimatedScreenProvider`, like this:
 
 ```jsx
-import {ReanimatedScreenProvider} from 'react-native-screens/reanimated';
+import { ReanimatedScreenProvider } from 'react-native-screens/reanimated';
 
 export default function App() {
   return (
@@ -381,12 +430,20 @@ export default function App() {
 Then you can use `useReanimatedTransitionProgress` to get the shared values:
 
 ```jsx
-import {useReanimatedTransitionProgress} from 'react-native-screens/reanimated';
-import Animated, {useAnimatedStyle, useDerivedValue} from 'react-native-reanimated';
+import { useReanimatedTransitionProgress } from 'react-native-screens/reanimated';
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+} from 'react-native-reanimated';
 
 function Home() {
   const reaProgress = useReanimatedTransitionProgress();
-  const sv = useDerivedValue(() => (reaProgress.progress.value < 0.5 ? (reaProgress.progress.value * 50) : ((1 - reaProgress.progress.value) * 50)) + 50);
+  const sv = useDerivedValue(
+    () =>
+      (reaProgress.progress.value < 0.5
+        ? reaProgress.progress.value * 50
+        : (1 - reaProgress.progress.value) * 50) + 50,
+  );
   const reaStyle = useAnimatedStyle(() => {
     return {
       width: sv.value,
@@ -395,9 +452,7 @@ function Home() {
     };
   });
 
-  return (
-    <Animated.View style={reaStyle} />
-  );
+  return <Animated.View style={reaStyle} />;
 }
 ```
 
@@ -405,10 +460,11 @@ function Home() {
 
 With `native-stack`, the status bar and screen orientation can be managed by `UIViewController` on iOS. On Android, the status bar and screen orientation can be managed by `FragmentActivity`. On iOS, it requires:
 
-1. For status bar managment: enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file (it disables the option to use React Native's `StatusBar` component). 
+1. For status bar managment: enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file (it disables the option to use React Native's `StatusBar` component).
 2. For both status bar and orientation managment: adding `#import <RNScreens/UIViewController+RNScreens.h>` in your project's `AppDelegate.m` (you can see this change applied in the `AppDelegate.m` of `Example` project).
 
 On Android, no additional setup is required, although, you should keep in mind that once you set the orientation or status bar props, `react-native-screens` will manage them on every screen, so you shouldn't use other methods of manipulating them then.
+
 #### `screenOrientation`
 
 Sets the current screen's available orientations and forces rotation if current orientation is not included. On iOS, if you have supported orientations set in `info.plist`, they will take precedence over this prop. Possible values:
@@ -454,14 +510,14 @@ Sets the translucency of the status bar (similar to the `StatusBar` component).
 
 The search bar is just a `searchBar` property that can be specified in the navigator's `screenOptions` or an individual screen's `options`. Search bars are rarely static so normally it is controlled by passing an object to `searchBar` navigation option in the component's body.
 
-Example: 
+Example:
 
 ```js
 React.useLayoutEffect(() => {
   navigation.setOptions({
     searchBar: {
       // search bar options
-    }
+    },
   });
 }, [navigation]);
 ```
@@ -502,7 +558,7 @@ The text to be used instead of default `Cancel` button text.
 
 #### `disableBackButtonOverride` (Android only)
 
-Default behavior is to prevent screen from going back when search bar is open (`disableBackButtonOverride: false`). If you don't want this to happen set `disableBackButtonOverride` to `true` 
+Default behavior is to prevent screen from going back when search bar is open (`disableBackButtonOverride: false`). If you don't want this to happen set `disableBackButtonOverride` to `true`
 
 #### `hideNavigationBar` (iOS only)
 
@@ -521,12 +577,13 @@ Defaults to `true`.
 This prop is used to change type of the input and keyboard. Default value is `'text'`.
 
 All values:
+
 - `'text'` - normal text input
 - `'number'` - number input
 - `'email'` - email input
 - `'phone'` - phone input
 
-####  `obscureBackground` (iOS only)
+#### `obscureBackground` (iOS only)
 
 Boolean indicating whether to obscure the underlying content with semi-transparent overlay.
 
@@ -552,11 +609,12 @@ const [search, setSearch] = React.useState('');
 React.useLayoutEffect(() => {
   navigation.setOptions({
     searchBar: {
-      onChangeText: (event) => setSearch(event.nativeEvent.text),
-    }
+      onChangeText: event => setSearch(event.nativeEvent.text),
+    },
   });
 }, [navigation]);
 ```
+
 #### `onClose` (Android only)
 
 A callback that gets called when search bar is closing
@@ -582,15 +640,15 @@ Defaults to an empty string.
 #### `placement` (iOS only)
 
 Position of the search bar
-   
+
 Supported values:
- 
-* `automatic` - the search bar is placed according to current layout
-* `inline` - the search bar is placed on the trailing edge of navigation bar
-* `stacked` - the search bar is placed below the other content in navigation bar
+
+- `automatic` - the search bar is placed according to current layout
+- `inline` - the search bar is placed on the trailing edge of navigation bar
+- `stacked` - the search bar is placed below the other content in navigation bar
 
 Defaults to `stacked`
-  
+
 #### `textColor`
 
 The search field text color.
@@ -611,11 +669,12 @@ Show the search hint icon when search bar is focused. (Android only)
 
 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.
+- `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
+- `cancelSearch` - cancel search in search bar.
+- `toggleCancelButton` (iOS only) - toggle cancel button display near search bar.
 
 ### Events
 
@@ -630,16 +689,13 @@ Event which fires when the screen appears.
 Example:
 
 ```js
-React.useEffect(
-  () => {
-    const unsubscribe = navigation.addListener('appear', e => {
-      // Do something
-    });
-
-    return unsubscribe;
-  },
-  [navigation]
-);
+React.useEffect(() => {
+  const unsubscribe = navigation.addListener('appear', e => {
+    // Do something
+  });
+
+  return unsubscribe;
+}, [navigation]);
 ```
 
 #### `dismiss`
@@ -649,16 +705,13 @@ Event which fires when the current screen is dismissed by hardware back (on Andr
 Example:
 
 ```js
-React.useEffect(
-  () => {
-    const unsubscribe = navigation.addListener('dismiss', e => {
-      // Do something
-    });
-
-    return unsubscribe;
-  },
-  [navigation]
-);
+React.useEffect(() => {
+  const unsubscribe = navigation.addListener('dismiss', e => {
+    // Do something
+  });
+
+  return unsubscribe;
+}, [navigation]);
 ```
 
 #### `transitionStart`
@@ -672,20 +725,17 @@ Event data:
 Example:
 
 ```js
-React.useEffect(
-  () => {
-    const unsubscribe = navigation.addListener('transitionStart', e => {
-      if (e.data.closing) {
-        // Will be dismissed
-      } else {
-        // Will appear
-      }
-    });
-
-    return unsubscribe;
-  },
-  [navigation]
-);
+React.useEffect(() => {
+  const unsubscribe = navigation.addListener('transitionStart', e => {
+    if (e.data.closing) {
+      // Will be dismissed
+    } else {
+      // Will appear
+    }
+  });
+
+  return unsubscribe;
+}, [navigation]);
 ```
 
 #### `transitionEnd`
@@ -699,20 +749,17 @@ Event data:
 Example:
 
 ```js
-React.useEffect(
-  () => {
-    const unsubscribe = navigation.addListener('transitionEnd', e => {
-      if (e.data.closing) {
-        // Was dismissed
-      } else {
-        // Did appear
-      }
-    });
-
-    return unsubscribe;
-  },
-  [navigation]
-);
+React.useEffect(() => {
+  const unsubscribe = navigation.addListener('transitionEnd', e => {
+    if (e.data.closing) {
+      // Was dismissed
+    } else {
+      // Did appear
+    }
+  });
+
+  return unsubscribe;
+}, [navigation]);
 ```
 
 ### Helpers
@@ -751,9 +798,10 @@ navigation.popToTop();
 ### Measuring header's height
 
 To measure header's height, you can use the `useHeaderHeight`, `useAnimatedHeaderHeight` or `useReanimatedHeaderHeight` hook.
+
 - `useHeaderHeight` returns the static header's height. The value provided by this hook changes when screen appears, when there's a change in header options or screen orientation.
   Use this hook if you're sure your header height won't change dynamically, or when the screen is heavy.
-- `useAnimatedHeaderHeight` dynamically calculates the header's height. The value provided by this hook changes with every view layout (such as shrinking a large header into small one with a ScrollView). It returns an Animated.Value. 
+- `useAnimatedHeaderHeight` dynamically calculates the header's height. The value provided by this hook changes with every view layout (such as shrinking a large header into small one with a ScrollView). It returns an Animated.Value.
   Please beware of using this hook in heavy components, as it may result in performance issues.
 - `useReanimatedHeaderHeight` also dynamically calculates the header's height but uses React Native Reanimated under the hood. It returns an Animated.SharedValue.
   Make sure to wrap your Stack.Navigator with `ReanimatedScreenProvider` before using this hook.
@@ -762,13 +810,13 @@ We recommend using `useReanimatedHeaderHeight` rather than `useAnimatedHeaderHei
 
 ```tsx
 // for using useHeaderHeight
-import {useHeaderHeight} from 'react-native-screens/native-stack';
+import { useHeaderHeight } from 'react-native-screens/native-stack';
 
 // for using useAnimatedHeaderHeight
-import {useAnimatedHeaderHeight} from 'react-native-screens/native-stack';
+import { useAnimatedHeaderHeight } from 'react-native-screens/native-stack';
 
 // for using useReanimatedHeaderHeight
-import {useReanimatedHeaderHeight} from 'react-native-screens/reanimated';
+import { useReanimatedHeaderHeight } from 'react-native-screens/reanimated';
 ```
 
 ## Example

package/native-stack/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "../lib/commonjs/native-stack/index",
-  "module": "../lib/module/native-stack/index",
-  "react-native": "../src/native-stack/index",
-  "types": "../lib/typescript/native-stack/index"
+   "main": "../lib/commonjs/native-stack/index",
+   "module": "../lib/module/native-stack/index",
+   "react-native": "../src/native-stack/index",
+   "types": "../lib/typescript/native-stack/index.d.ts"
 }

package/package.json

@@ -1 +1 @@
-{"name": "@amazon-devices/react-native-screens", "version": "2.0.1759135970+3.25.0", "description": "Native navigation primitives for your React Native app.", "scripts": {"check-types": "tsc --noEmit", "start": "react-native start", "test:unit": "jest --passWithNoTests", "format-js": "prettier --write --list-different './{src,Example}/**/*.{js,ts,tsx}'", "format-android": "node ./scripts/format-android.js", "format-ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i", "format": "yarn format-js && yarn format-android && yarn format-ios", "lint-js": "eslint --ext '.js,.ts,.tsx' --fix src", "lint-android": "./android/gradlew -p android spotlessCheck -q", "lint": "yarn lint-js && yarn lint-android", "release": "npm login && release-it", "build:release": "npm run prepare"}, "main": "lib/commonjs/index", "module": "lib/module/index", "react-native": "src/index", "source": "src/index", "types": "lib/typescript/index", "files": ["src/", "common/", "lib/", "native-stack/", "reanimated/", "android/src/main/AndroidManifest.xml", "android/src/main/java/", "android/src/main/jni/", "android/src/main/res", "android/src/fabric/", "android/src/paper/", "android/build.gradle", "ios/", "windows/", "RNScreens.podspec", "react-native.config.js", "README.md", "!**/__tests__", "kepler-compatibility.json", "SystemModules", "SystemBundles", "!android/src/main/java/com/swmansion/rnscreens/LifecycleHelper.kt", "THIRD_PARTY_NOTICES.txt", "kepler-transformed-package-info.json"], "kepler": {"temporary-alias-for-package": {"name": "react-native-screens", "version": "3.25.0"}}, "repository": {"type": "git", "url": "git+https://github.com/software-mansion/react-native-screens.git"}, "author": {"email": "krzys.magiera@gmail.com", "name": "Krzysztof Magiera"}, "license": "See license in LICENSE", "readmeFilename": "README.md", "bugs": {"url": "https://github.com/software-mansion/react-native-screens/issues"}, "homepage": "https://github.com/software-mansion/react-native-screens#readme", "dependencies": {"react-freeze": "^1.0.0", "warn-once": "^0.1.0"}, "peerDependencies": {"react": "*", "react-native": "*"}, "devDependencies": {"@babel/core": "^7.20.0", "@babel/eslint-parser": "7.22.15", "@react-native-community/bob": "^0.17.1", "@types/jest": "^29.3.1", "@types/react": "^18.2.21", "@types/react-native": "0.72.5", "@types/react-test-renderer": "^18.0.0", "@typescript-eslint/eslint-plugin": "^6.5.0", "@typescript-eslint/parser": "^6.5.0", "@react-native-community/cli": "^11.3.6", "@react-native-community/cli-platform-android": "^11.3.6", "@react-native-community/cli-platform-ios": "^11.3.6", "babel-jest": "^29.6.4", "clang-format": "^1.8.0", "eslint": "^8.19.0", "eslint-config-prettier": "^8.10.0", "eslint-config-standard": "^17.1.0", "eslint-plugin-import": "^2.28.1", "eslint-plugin-jest": "^27.2.3", "eslint-plugin-n": "^16.0.2", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-native": "^4.0.0", "husky": "^8.0.3", "jest": "^29.3.1", "lint-staged": "^14.0.1", "metro-react-native-babel-preset": "^0.76.8", "prettier": "^2.8.8", "react": "^18.2.0", "react-dom": "18.0.0", "react-native": "0.72.0", "react-native-reanimated": "^2.2.0", "react-test-renderer": "18.0.0", "release-it": "^15.6.0", "typescript": "4.8.4", "@amazon-devices/react-native-kepler": "^2.0.0+rn0.72.0", "@amazon-devices/react-native-safe-area-context": "file:static/amzn-react-native-safe-area-context-2.0.0.tgz", "@amazon-devices/react-navigation__routers": "file:static/amzn-react-navigation__routers-2.0.0.tgz", "@amazon-devices/react-navigation__core": "file:static/amzn-react-navigation__core-2.0.0.tgz", "@amazon-devices/react-navigation__native": "file:static/amzn-react-navigation__native-2.0.0.tgz"}, "resolutions": {"@react-native-community/cli-platform-android": "^11.3.6", "@react-native-community/cli": "^11.3.6", "@react-native-community/cli-platform-ios": "^11.3.6", "@types/react": "^18.2.21"}, "lint-staged": {"{src,Example}/**/*.{js,ts,tsx}": "yarn format-js", "src/**/*.{js,ts,tsx}": "yarn lint-js", "android/**/*.kt": "yarn format-android", "ios/**/*.{h,m,mm,cpp}": "yarn format-ios"}, "@react-native-community/bob": {"source": "src", "output": "lib", "targets": ["commonjs", "module", ["typescript", {"project": "tsconfig.build.json"}]]}, "eslintIgnore": ["node_modules/", "lib/"], "codegenConfig": {"name": "rnscreens", "type": "components", "jsSrcsDir": "./src/fabric", "android": {"javaPackageName": "com.swmansion.rnscreens"}}, "keplerImport": true}
+{"name": "@amazon-devices/react-native-screens", "version": "3.0.9000000000+4.4.0", "description": "Native navigation primitives for your React Native app.", "scripts": {"submodules": "git submodule update --init --recursive && (cd react-navigation && yarn && yarn build && cd ../)", "check-types": "tsc --noEmit", "start": "react-native start", "test:unit": "jest --passWithNoTests", "format-js": "prettier --write --list-different './{src,Example}/**/*.{js,ts,tsx}'", "format-android": "node ./scripts/format-android.js", "format-ios": "find ios/ -iname \"*.h\" -o -iname \"*.m\" -o -iname \"*.cpp\" -o -iname \"*.mm\" | xargs clang-format -i", "format-common": "find common/ -iname \"*.h\" -o -iname \"*.cpp\" | xargs clang-format -i", "format-cpp": "find cpp/ -iname \"*.h\" -o -iname \"*.cpp\" | xargs clang-format -i", "format-android-cpp": "find android/src/main/cpp -iname \"*.h\" -o -iname \"*.cpp\" | xargs clang-format -i", "format": "yarn format-js && yarn format-android && yarn format-ios && yarn format-common && yarn format-cpp && yarn format-android-cpp", "lint-js": "eslint --ext '.js,.ts,.tsx' --fix src", "lint-android": "./android/gradlew -p android spotlessCheck -q", "lint": "yarn lint-js && yarn lint-android", "release": "yarn prepare && npm login && release-it", "architectures-consistency-check": "node ./scripts/codegen-check-consistency.js", "sync-architectures": "node ./scripts/codegen-sync-archs.js", "build:release": "npm run prepare"}, "main": "lib/commonjs/index", "module": "lib/module/index", "react-native": "src/index", "source": "src/index", "types": "lib/typescript/index.d.ts", "files": ["src/", "common/", "lib/", "native-stack/", "gesture-handler/", "reanimated/", "android/src/main/AndroidManifest.xml", "android/src/main/java/", "android/src/main/cpp/", "android/src/main/jni/", "android/src/main/res", "android/src/fabric/", "android/src/paper/", "android/build.gradle", "android/CMakeLists.txt", "ios/", "cpp/", "windows/", "RNScreens.podspec", "react-native.config.js", "README.md", "!**/__tests__", "kepler-compatibility.json", "SystemModules", "SystemBundles", "!android/src/main/java/com/swmansion/rnscreens/LifecycleHelper.kt", "THIRD_PARTY_NOTICES.txt", "kepler-transformed-package-info.json"], "kepler": {"temporary-alias-for-package": {"name": "react-native-screens", "version": "3.25.0"}}, "repository": {"type": "git", "url": "git+https://github.com/software-mansion/react-native-screens.git"}, "author": {"email": "krzys.magiera@gmail.com", "name": "Krzysztof Magiera"}, "license": "See license in LICENSE", "readmeFilename": "README.md", "bugs": {"url": "https://github.com/software-mansion/react-native-screens/issues"}, "homepage": "https://github.com/software-mansion/react-native-screens#readme", "dependencies": {"react-freeze": "^1.0.0", "warn-once": "^0.1.0"}, "peerDependencies": {"react": "*", "react-native": "*", "@amazon-devices/react-native-kepler": "*"}, "devDependencies": {"@babel/core": "^7.25.2", "@babel/eslint-parser": "7.22.15", "@react-native-community/cli": "^11.3.6", "@react-native-community/cli-platform-android": "^11.3.6", "@react-native-community/cli-platform-ios": "^11.3.6", "@react-native/babel-preset": "~0.76.2", "@react-native/eslint-config": "~0.76.2", "@react-native/metro-config": "~0.76.2", "@react-native/typescript-config": "~0.76.2", "@react-navigation/native": "^5.8.0", "@react-navigation/stack": "^5.10.0", "@types/jest": "^29.3.1", "@types/react": "^18.2.72", "@types/react-test-renderer": "^18.0.0", "@typescript-eslint/eslint-plugin": "^6.5.0", "@typescript-eslint/parser": "^6.5.0", "babel-jest": "^29.6.4", "clang-format": "^1.8.0", "eslint": "^8.56.0", "eslint-config-prettier": "^8.10.0", "eslint-config-standard": "^17.1.0", "eslint-plugin-import": "^2.28.1", "eslint-plugin-jest": "^27.9.0", "eslint-plugin-n": "^16.0.2", "eslint-plugin-promise": "^6.1.1", "husky": "^8.0.3", "jest": "^29.6.3", "lint-staged": "^14.0.1", "prettier": "^2.8.8", "react": "18.2.0", "react-dom": "~18.2.0", "react-native": "~0.76.2", "react-native-builder-bob": "^0.23.2", "react-native-gesture-handler": "^2.13.3", "react-native-reanimated": "3.9.0-nightly-20240402-12717cdb5", "react-native-safe-area-context": "^4.8.1", "react-native-windows": "~0.76.1", "react-test-renderer": "~18.2.0", "release-it": "^15.6.0", "typescript": "5.4.3", "@amazon-devices/react-native-kepler": "^3.0.0+rn0.76.2", "@amazon-devices/react-native-safe-area-context": "file:static/amzn-react-native-safe-area-context-2.0.0.tgz", "@amazon-devices/react-navigation__routers": "file:static/amzn-react-navigation__routers-2.0.0.tgz", "@amazon-devices/react-navigation__core": "file:static/amzn-react-navigation__core-2.0.0.tgz", "@amazon-devices/react-navigation__native": "file:static/amzn-react-navigation__native-2.0.0.tgz"}, "resolutions": {"@types/react": "^18.2.72"}, "lint-staged": {"{src,Example}/**/*.{js,ts,tsx}": "yarn format-js", "src/**/*.{js,ts,tsx}": "yarn lint-js", "common/**/*.{h,cpp}": "yarn format-common", "cpp/**/*.{h,cpp}": "yarn format-cpp", "android/src/main/cpp/.{cpp, h}": "yarn format-android-cpp", "android/**/*.kt": "yarn format-android", "ios/**/*.{h,m,mm,cpp}": "yarn format-ios", "src/fabric/*.ts": "yarn sync-architectures"}, "react-native-builder-bob": {"source": "src", "output": "lib", "targets": ["commonjs", "module", ["typescript", {"project": "tsconfig.build.json"}]]}, "eslintIgnore": ["node_modules/", "lib/"], "codegenConfig": {"name": "rnscreens", "type": "all", "jsSrcsDir": "./src/fabric", "android": {"javaPackageName": "com.swmansion.rnscreens"}, "ios": {"componentProvider": {"RNSFullWindowOverlay": "RNSFullWindowOverlay", "RNSModalScreen": "RNSModalScreen", "RNSScreenContainer": "RNSScreenContainerView", "RNSScreenContentWrapper": "RNSScreenContentWrapper", "RNSScreenFooter": "RNSScreenFooter", "RNSScreen": "RNSScreenView", "RNSScreenNavigationContainer": "RNSScreenNavigationContainerView", "RNSScreenStackHeaderConfig": "RNSScreenStackHeaderConfig", "RNSScreenStackHeaderSubview": "RNSScreenStackHeaderSubview", "RNSScreenStack": "RNSScreenStackView", "RNSSearchBar": "RNSSearchBar"}}}, "packageManager": "yarn@4.1.1", "keplerImport": true}

package/react-native.config.js

@@ -1,17 +1,15 @@
-let supportsCodegenConfig = false;
-try {
-  const rnCliAndroidVersion =
-    require('@react-native-community/cli-platform-android/package.json').version;
-  const [major] = rnCliAndroidVersion.split('.');
-  supportsCodegenConfig = major >= 9;
-} catch (e) {
-  // ignore
-}
+/*
+ * Portions of this file are copyright (c) 2025 Amazon.com, Inc. or its affiliates.  All rights reserved.
+ *
+ * PORTIONS OF THIS FILE ARE AMAZON PROPRIETARY/CONFIDENTIAL.  USE IS SUBJECT TO LICENSE TERMS.
+ *
+ * Amazon modifications are indicated by [amznmod_* comments].
+ */
 
 module.exports = {
   dependency: {
     platforms: {
-      android: supportsCodegenConfig ? {
+      android: {
         componentDescriptors: [
           "RNSFullWindowOverlayComponentDescriptor",
           "RNSScreenContainerComponentDescriptor",
@@ -20,17 +18,22 @@ module.exports = {
           "RNSScreenStackHeaderSubviewComponentDescriptor",
           "RNSScreenStackComponentDescriptor",
           "RNSSearchBarComponentDescriptor",
-          'RNSScreenComponentDescriptor'
+          'RNSScreenComponentDescriptor',
+          "RNSScreenFooterComponentDescriptor",
+          "RNSScreenContentWrapperComponentDescriptor",
+          'RNSModalScreenComponentDescriptor'
         ],
         cmakeListsPath: "../android/src/main/jni/CMakeLists.txt"
-      } : {},
+      },
+      // amznmod_react - configuration for the Kepler platform
       kepler: {
         autolink: {
           'RNScreensLib': { // The key is the public name of your library
-            provider: 'system', // 'application' if provided in the NPM package (and packaged with the app),
-                                     // otherwise 'system' if provided by the OS
+            provider: '',
+            uiComponentName: '/com.amazon.kepler.uitoolkit.react.screens_4',
+            linkDynamic: true,
             turbomodules: [], // The names of registered Turbo Modules (this is the string used when registering in both JS and C++
-            components: ["RNSScreen", "RNSScreenStack", "RNSScreenStackHeaderConfig", "RNSScreenContainer"]
+            components: ["RNSScreen", "RNSScreenStack", "RNSScreenStackHeaderConfig", "RNSScreenContainer", "RNSScreenContentWrapper"]
           }
         }
       }
@@ -38,5 +41,5 @@ module.exports = {
   },
   project: { // These are settings used by your project to configure and build it - these don't affect consumers
     type: "TurboModule"
-  }  
+  }
 }

package/reanimated/package.json

@@ -2,5 +2,5 @@
   "main": "../lib/commonjs/reanimated/index",
   "module": "../lib/module/reanimated/index",
   "react-native": "../src/reanimated/index",
-  "types": "../lib/typescript/reanimated/index"
+  "types": "../lib/typescript/reanimated/index.d.ts"
 }