@lodev09/react-native-true-sheet 0.13.0 → 1.0.1

package/lib/typescript/module/src/TrueSheet.types.d.ts

@@ -0,0 +1,212 @@
+import type { Component, ComponentType, ReactElement, RefObject } from 'react';
+import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { TrueSheetGrabberProps } from './TrueSheetGrabber';
+export interface SizeInfo {
+    index: number;
+    value: number;
+}
+/**
+ * Blur style mapped to native values in IOS.
+ *
+ * @platform ios
+ */
+export type BlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
+/**
+ * Supported Sheet size.
+ *
+ * @platform android
+ * @platform ios 15+
+ */
+export type SheetSize = 
+/**
+ * Auto resize based on content height
+ *
+ * @platform android
+ * @platform ios 16+
+ */
+'auto'
+/**
+ * Fixed height
+ *
+ * @platform android
+ * @platform ios 16+
+ */
+ | number
+/**
+ * Fixed height in %
+ *
+ * @platform android
+ * @platform ios 16+
+ */
+ | `${number}%`
+/**
+ * Translates to 25%
+ *
+ * @platform android
+ * @platform ios 16+
+ */
+ | 'small'
+/**
+ * Translates to 50%
+ *
+ * @platform android
+ * @platform ios 15+
+ */
+ | 'medium'
+/**
+ * Translates to 100%
+ *
+ * @platform android
+ * @platform ios 15+
+ */
+ | 'large';
+export interface TrueSheetProps extends ViewProps {
+    /**
+     * The name to reference this sheet. It has to be unique.
+     * You can then present this sheet globally using its `name`.
+     *
+     * Example:
+     * ```ts
+     * <TrueSheet name="my-awesome-sheet">
+     *   <MyComponent />
+     * </TrueSheet>
+     * ```
+     * ```ts
+     * TrueSheet.present('my-awesome-sheet')
+     * ```
+     */
+    name?: string;
+    /**
+     * The sizes you want the Sheet to support.
+     * Maximum of 3 sizes only; collapsed, half-expanded, expanded.
+     *
+     * Example:
+     * ```ts
+     * size={['auto', '60%', 'large']}
+     * ```
+     *
+     * @default ['medium', 'large']
+     */
+    sizes?: SheetSize[];
+    /**
+     * Specify whether the sheet background is dimmed.
+     * Set to `false` to allow interaction with the background components.
+     *
+     * @platform android
+     * @platform ios 15+
+     * @default true
+     */
+    dimmed?: boolean;
+    /**
+     * Initially present the sheet, after mounting, at a given size index.
+     *
+     * @note This property is only used during the initial mount.
+     * @default -1
+     */
+    initialIndex?: number;
+    /**
+     * Specify whether the sheet should animate after mounting.
+     * Used with `initialIndex`.
+     *
+     * @default true
+     */
+    initialIndexAnimated?: boolean;
+    /**
+     * The size index that the sheet should start to dim the background.
+     * This is ignored if `dimmed` is set to `false`.
+     *
+     * @default 0
+     */
+    dimmedIndex?: number;
+    /**
+     * Prevents interactive dismissal of the Sheet.
+     *
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Main sheet background color
+     *
+     * @default white
+     */
+    backgroundColor?: ColorValue;
+    /**
+     * The sheet corner radius.
+     *
+     * @platform android
+     * @platform ios 15+
+     */
+    cornerRadius?: number;
+    /**
+     * Shows native grabber (or handle) on IOS.
+     *
+     * @platform ios
+     * @default true
+     */
+    grabber?: boolean;
+    /**
+     * Grabber props to be used for android grabber or handle.
+     *
+     * @platform android
+     */
+    grabberProps?: TrueSheetGrabberProps;
+    /**
+     * The blur effect style on iOS.
+     * Overrides `backgroundColor` if set.
+     *
+     * @platform ios
+     */
+    blurTint?: BlurTint;
+    /**
+     * Optional content container styles.
+     */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The main scrollable ref that Sheet should handle on IOS.
+     *
+     * @platform ios
+     */
+    scrollRef?: RefObject<Component<unknown>>;
+    /**
+     * Overrides `large` or `100%` height.
+     */
+    maxHeight?: number;
+    /**
+     * A component that floats at the bottom of the Sheet.
+     */
+    FooterComponent?: ComponentType<unknown> | ReactElement;
+    /**
+     * Determines how the software keyboard will impact the layout of the sheet.
+     * Set to `pan` if you're working with `FlatList` with a `TextInput`.
+     *
+     * @platform android
+     * @default resize
+     */
+    keyboardMode?: 'resize' | 'pan';
+    /**
+     * Supports edge-to-edge on Android.
+     * Turn this on if your app has it enabled.
+     *
+     * @platform android
+     */
+    edgeToEdge?: boolean;
+    /**
+     * This is called when the sheet is ready to present.
+     */
+    onMount?: () => void;
+    /**
+     * Called when the Sheet has been presented.
+     * Comes with the size info.
+     */
+    onPresent?: (info: SizeInfo) => void;
+    /**
+     * Called when the Sheet has been dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Called when the size of the sheet has changed.
+     * Either by dragging or programatically.
+     */
+    onSizeChange?: (info: SizeInfo) => void;
+}
+//# sourceMappingURL=TrueSheet.types.d.ts.map

package/lib/typescript/module/src/TrueSheet.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrueSheet.types.d.ts","sourceRoot":"","sources":["../../../../src/TrueSheet.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAA;AAE9B;;;;;GAKG;AACH,MAAM,MAAM,SAAS;AACnB;;;;;GAKG;AACD,MAAM;AAER;;;;;GAKG;GACD,MAAM;AAER;;;;;GAKG;GACD,GAAG,MAAM,GAAG;AAEd;;;;;GAKG;GACD,OAAO;AAET;;;;;GAKG;GACD,QAAQ;AAEV;;;;;GAKG;GACD,OAAO,CAAA;AAEX,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IAEnB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IAEpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,YAAY,CAAA;IAEvD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAE/B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;CACxC"}

package/lib/typescript/module/src/TrueSheetFooter.d.ts

@@ -0,0 +1,7 @@
+import type { TrueSheetProps } from './TrueSheet.types';
+interface TrueSheetFooterProps {
+    Component?: TrueSheetProps['FooterComponent'];
+}
+export declare const TrueSheetFooter: (props: TrueSheetFooterProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=TrueSheetFooter.d.ts.map

package/lib/typescript/module/src/TrueSheetFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrueSheetFooter.d.ts","sourceRoot":"","sources":["../../../../src/TrueSheetFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEvD,UAAU,oBAAoB;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,mDAU1D,CAAA"}

package/lib/typescript/module/src/TrueSheetGrabber.d.ts

@@ -0,0 +1,39 @@
+import { type ColorValue, type ViewStyle, type StyleProp } from 'react-native';
+export interface TrueSheetGrabberProps {
+    /**
+     * Is grabber visible.
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Optional style that overrides the default style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Grabber color according to M3 specs.
+     * @default rgba(73,69,79,0.4)
+     */
+    color?: ColorValue;
+    /**
+     * Grabber height according to M3 specs.
+     * @default 4
+     */
+    height?: number;
+    /**
+     * Grabber top position offset.
+     *
+     * @default 6
+     */
+    topOffset?: number;
+    /**
+     * Grabber width according to M3 specs.
+     * @default 32
+     */
+    width?: number;
+}
+/**
+ * Grabber component.
+ * Used by defualt for Android but feel free to re-use.
+ */
+export declare const TrueSheetGrabber: (props: TrueSheetGrabberProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=TrueSheetGrabber.d.ts.map

package/lib/typescript/module/src/TrueSheetGrabber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrueSheetGrabber.d.ts","sourceRoot":"","sources":["../../../../src/TrueSheetGrabber.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAQpF,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,mDAiB5D,CAAA"}

package/lib/typescript/module/src/TrueSheetModule.d.ts

@@ -0,0 +1,2 @@
+export declare const TrueSheetModule: any;
+//# sourceMappingURL=TrueSheetModule.d.ts.map

package/lib/typescript/module/src/TrueSheetModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrueSheetModule.d.ts","sourceRoot":"","sources":["../../../../src/TrueSheetModule.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,eAAe,KASvB,CAAA"}

package/lib/typescript/module/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TrueSheet';
+export * from './TrueSheet.types';
+export * from './TrueSheetGrabber';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA"}

package/package.json

@@ -1,12 +1,23 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "0.13.0",
+  "version": "1.0.1",
   "description": "The true native bottom sheet experience for your React Native Apps.",
-  "main": "lib/commonjs/index",
-  "module": "lib/module/index",
-  "types": "lib/typescript/src/index.d.ts",
-  "react-native": "src/index",
-  "source": "src/index",
+  "source": "./src/index.ts",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/module/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
   "files": [
     "src",
     "lib",
@@ -14,6 +25,7 @@
     "ios",
     "cpp",
     "*.podspec",
+    "react-native.config.js",
     "!ios/build",
     "!android/build",
     "!android/gradle",
@@ -22,17 +34,18 @@
     "!android/local.properties",
     "!**/__tests__",
     "!**/__fixtures__",
+    "!**/__mocks__",
     "!**/.*"
   ],
   "scripts": {
-    "example": "yarn workspace true-sheet-example",
+    "example": "yarn workspace react-native-true-sheet-example",
     "docs": "yarn workspace docs",
     "test": "jest",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc",
     "lint": "eslint --fix \"**/*.{js,ts,tsx}\"",
     "format": "prettier --write \"**/*.{js,ts,tsx}\"",
     "tidy": "yarn typecheck && yarn lint && yarn format && scripts/swiftlint.sh && scripts/ktlint.sh",
-    "clean": "del-cli android/build lib && yarn workspace true-sheet-example clean",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prepare": "bob build",
     "release": "yarn tidy && release-it"
   },
@@ -58,30 +71,27 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^19.0.3",
-    "@evilmartians/lefthook": "^1.6.5",
-    "@react-native/eslint-config": "^0.74.83",
-    "@release-it/conventional-changelog": "^8.0.1",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.64",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
-    "commitlint": "^19.0.3",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native/eslint-config": "^0.73.1",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "commitlint": "^17.0.2",
     "del-cli": "^5.1.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-native": "^0.74.1",
-    "react-native-builder-bob": "^0.23.2",
-    "release-it": "^17.1.1",
-    "typescript": "~5.3.3"
+    "prettier": "^3.0.3",
+    "react": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-builder-bob": "^0.33.3",
+    "release-it": "^17.10.0",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
   },
   "peerDependencies": {
     "react": "*",
@@ -91,13 +101,13 @@
     "example",
     "docs"
   ],
-  "packageManager": "yarn@4.2.2",
+  "packageManager": "yarn@3.6.1",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
-      "<rootDir>/docs/node_modules",
       "<rootDir>/lib/",
+      "<rootDir>/docs/node_modules",
       "<rootDir>/docs/build"
     ]
   },
@@ -121,44 +131,34 @@
         "issue": ":rocket: _This issue has been resolved in v${version}. See [${releaseName}](${releaseUrl}) for release notes._",
         "pr": ":rocket: _This pull request is included in v${version}. See [${releaseName}](${releaseUrl}) for release notes._"
       }
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "preset": "angular"
-      }
     }
   },
   "eslintConfig": {
     "root": true,
     "extends": [
-      "plugin:@typescript-eslint/recommended",
-      "eslint:recommended",
-      "plugin:react/recommended",
-      "plugin:react-native/all",
-      "standard",
+      "@react-native",
       "prettier"
     ],
-    "globals": {
-      "it": false
-    },
     "rules": {
-      "@typescript-eslint/no-var-requires": 0,
-      "@typescript-eslint/no-unused-vars": [
+      "react/react-in-jsx-scope": "off",
+      "prettier/prettier": [
         "error",
         {
-          "argsIgnorePattern": "^_",
-          "varsIgnorePattern": "^_"
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false,
+          "printWidth": 100,
+          "semi": false
         }
-      ],
-      "no-unused-vars": 0
-    },
-    "settings": {
-      "react": {
-        "pragma": "React",
-        "version": "detect"
-      }
+      ]
     }
   },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
   "prettier": {
     "quoteProps": "consistent",
     "singleQuote": true,
@@ -169,18 +169,33 @@
     "semi": false
   },
   "react-native-builder-bob": {
-    "exclude": "**/{__tests__,__fixtures__}/**",
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
       [
         "typescript",
         {
-          "project": "tsconfig.build.json"
+          "project": "tsconfig.build.json",
+          "esm": true
         }
       ]
     ]
+  },
+  "create-react-native-library": {
+    "type": "view-legacy",
+    "languages": "kotlin-swift",
+    "version": "0.44.3"
   }
 }

package/{TrueSheet.podspec → react-native-true-sheet.podspec}

@@ -4,14 +4,14 @@ package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
 Pod::Spec.new do |s|
-  s.name         = "TrueSheet"
+  s.name         = "react-native-true-sheet"
   s.version      = package["version"]
   s.summary      = package["description"]
   s.homepage     = package["homepage"]
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => "13.4" }
+  s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/lodev09/react-native-true-sheet.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm,swift}"
@@ -21,21 +21,22 @@ Pod::Spec.new do |s|
   if respond_to?(:install_modules_dependencies, true)
     install_modules_dependencies(s)
   else
-  s.dependency "React-Core"
+    s.dependency "React-Core"
 
-  # Don't install the dependencies when we run `pod install` in the old architecture.
-  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
-    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-    s.pod_target_xcconfig    = {
-        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
-        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-    }
-    s.dependency "React-RCTFabric"
-    s.dependency "React-Codegen"
-    s.dependency "RCT-Folly"
-    s.dependency "RCTRequired"
-    s.dependency "RCTTypeSafety"
-   end
-  end    
+    # Don't install the dependencies when we run `pod install` in the old architecture.
+    if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+      s.pod_target_xcconfig    = {
+          "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+          "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+          "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+      }
+      s.dependency "React-RCTFabric"
+      s.dependency "React-Codegen"
+      s.dependency "RCT-Folly"
+      s.dependency "RCTRequired"
+      s.dependency "RCTTypeSafety"
+      s.dependency "ReactCommon/turbomodule/core"
+    end
+  end
 end

package/src/TrueSheet.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent, Component, type RefObject, createRef, type ReactNode } from 'react'
+import { PureComponent, Component, type RefObject, createRef, type ReactNode } from 'react'
 import {
   requireNativeComponent,
   Platform,
@@ -22,17 +22,23 @@ const LINKING_ERROR =
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo Go\n'
 
+type ContainerSizeChangeEvent = NativeSyntheticEvent<{ width: number; height: number }>
+type SizeChangeEvent = NativeSyntheticEvent<SizeInfo>
+
 interface TrueSheetNativeViewProps extends Omit<TrueSheetProps, 'onPresent' | 'onSizeChange'> {
   contentHeight?: number
   footerHeight?: number
   scrollableHandle: number | null
-  onPresent: (event: NativeSyntheticEvent<SizeInfo>) => void
-  onSizeChange: (event: NativeSyntheticEvent<SizeInfo>) => void
+  onPresent: (event: SizeChangeEvent) => void
+  onSizeChange: (event: SizeChangeEvent) => void
+  onContainerSizeChange: (event: ContainerSizeChangeEvent) => void
 }
 
 type NativeRef = Component<TrueSheetNativeViewProps> & Readonly<NativeMethods>
 
 interface TrueSheetState {
+  containerWidth?: number
+  containerHeight?: number
   contentHeight?: number
   footerHeight?: number
   scrollableHandle: number | null
@@ -65,8 +71,11 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.onSizeChange = this.onSizeChange.bind(this)
     this.onContentLayout = this.onContentLayout.bind(this)
     this.onFooterLayout = this.onFooterLayout.bind(this)
+    this.onContainerSizeChange = this.onContainerSizeChange.bind(this)
 
     this.state = {
+      containerWidth: undefined,
+      containerHeight: undefined,
       contentHeight: undefined,
       footerHeight: undefined,
       scrollableHandle: null,
@@ -136,11 +145,18 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     })
   }
 
-  private onSizeChange(event: NativeSyntheticEvent<SizeInfo>): void {
+  private onSizeChange(event: SizeChangeEvent): void {
     this.props.onSizeChange?.(event.nativeEvent)
   }
 
-  private onPresent(event: NativeSyntheticEvent<SizeInfo>): void {
+  private onContainerSizeChange(event: ContainerSizeChangeEvent): void {
+    this.setState({
+      containerWidth: event.nativeEvent.width,
+      containerHeight: event.nativeEvent.height,
+    })
+  }
+
+  private onPresent(event: SizeChangeEvent): void {
     this.props.onPresent?.(event.nativeEvent)
   }
 
@@ -209,6 +225,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       grabber = true,
       dimmed = true,
       initialIndexAnimated = true,
+      edgeToEdge = false,
       keyboardMode = 'resize',
       initialIndex,
       dimmedIndex,
@@ -236,6 +253,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         grabber={grabber}
         dimmed={dimmed}
         dimmedIndex={dimmedIndex}
+        edgeToEdge={edgeToEdge}
         initialIndex={initialIndex}
         initialIndexAnimated={initialIndexAnimated}
         keyboardMode={keyboardMode}
@@ -245,6 +263,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         onPresent={this.onPresent}
         onDismiss={this.onDismiss}
         onSizeChange={this.onSizeChange}
+        onContainerSizeChange={this.onContainerSizeChange}
       >
         <View
           collapsable={false}
@@ -254,6 +273,11 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
               borderTopLeftRadius: cornerRadius,
               borderTopRightRadius: cornerRadius,
 
+              // Update the width on JS side.
+              // New Arch interop does not support updating it in native :/
+              width: this.state.containerWidth,
+              height: this.state.containerHeight,
+
               // Remove backgroundColor if `blurTint` is set on iOS
               backgroundColor: Platform.select({
                 ios: blurTint ? undefined : backgroundColor,