@lodev09/react-native-true-sheet 3.0.0-beta.1 → 3.0.0-beta.11

package/lib/typescript/src/fabric/TrueSheetViewNativeComponent.d.ts

@@ -9,17 +9,13 @@ export interface PositionChangeEventPayload {
     position: Double;
     transitioning: boolean;
 }
-export interface SizeChangeEventPayload {
-    width: Double;
-    height: Double;
-}
 export interface NativeProps extends ViewProps {
     detents?: ReadonlyArray<Float>;
     maxHeight?: WithDefault<Double, 0>;
     background?: WithDefault<Int32, 0>;
     cornerRadius?: WithDefault<Double, -1>;
     initialDetentIndex?: WithDefault<Int32, -1>;
-    dimmedIndex?: WithDefault<Int32, 0>;
+    dimmedDetentIndex?: WithDefault<Int32, 0>;
     blurTint?: WithDefault<string, ''>;
     keyboardMode?: WithDefault<'resize' | 'pan', 'resize'>;
     grabber?: WithDefault<boolean, true>;
@@ -27,6 +23,8 @@ export interface NativeProps extends ViewProps {
     dimmed?: WithDefault<boolean, true>;
     initialDetentAnimated?: WithDefault<boolean, true>;
     edgeToEdgeFullScreen?: WithDefault<boolean, false>;
+    scrollable?: WithDefault<boolean, false>;
+    pageSizing?: WithDefault<boolean, true>;
     onMount?: DirectEventHandler<null>;
     onWillPresent?: DirectEventHandler<DetentInfoEventPayload>;
     onDidPresent?: DirectEventHandler<DetentInfoEventPayload>;
@@ -37,7 +35,6 @@ export interface NativeProps extends ViewProps {
     onDragChange?: DirectEventHandler<DetentInfoEventPayload>;
     onDragEnd?: DirectEventHandler<DetentInfoEventPayload>;
     onPositionChange?: DirectEventHandler<PositionChangeEventPayload>;
-    onSizeChange?: DirectEventHandler<SizeChangeEventPayload>;
 }
 declare const _default: import("react-native").HostComponent<NativeProps>;
 export default _default;

package/lib/typescript/src/fabric/TrueSheetViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrueSheetViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/TrueSheetViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,kBAAkB,EAClB,MAAM,EACN,KAAK,EACL,WAAW,EACX,KAAK,EACN,MAAM,2CAA2C,CAAC;AAGnD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAE5C,OAAO,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAG/B,SAAS,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;IACvC,kBAAkB,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAGpC,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;IAGvD,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACpC,qBAAqB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACnD,oBAAoB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAGnD,OAAO,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC3D,YAAY,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC1D,aAAa,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC5D,WAAW,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IACzD,YAAY,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC1D,SAAS,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,0BAA0B,CAAC,CAAC;IAClE,YAAY,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;CAC3D;;AAED,wBAAoE"}
+{"version":3,"file":"TrueSheetViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/TrueSheetViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,kBAAkB,EAClB,MAAM,EACN,KAAK,EACL,WAAW,EACX,KAAK,EACN,MAAM,2CAA2C,CAAC;AAGnD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAE5C,OAAO,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAG/B,SAAS,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;IACvC,kBAAkB,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAG1C,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;IAGvD,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACpC,qBAAqB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACnD,oBAAoB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACnD,UAAU,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAGxC,OAAO,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC3D,YAAY,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC1D,aAAa,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC5D,WAAW,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IACzD,YAAY,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC1D,SAAS,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,0BAA0B,CAAC,CAAC;CACnE;;AAED,wBAEG"}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.11",
   "description": "The true native bottom sheet experience for your React Native Apps.",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/index.tsx",
+      "source": "./src/index.ts",
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
@@ -18,7 +18,7 @@
     "lib",
     "android",
     "ios",
-    "cpp",
+    "common",
     "*.podspec",
     "react-native.config.js",
     "!ios/build",
@@ -38,10 +38,11 @@
     "typecheck": "tsc",
     "lint": "eslint --fix \"**/*.{ts,tsx}\"",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
-    "tidy": "yarn typecheck && yarn lint && yarn format && scripts/objc-lint.sh && scripts/ktlint.sh",
+    "tidy": "yarn typecheck && yarn lint && yarn format && scripts/objclint.sh && scripts/ktlint.sh",
     "clean": "scripts/clean.sh",
     "prepare": "bob build",
-    "release": "yarn tidy && release-it --only-version"
+    "release": "yarn tidy && release-it --only-version",
+    "release:beta": "yarn release --preRelease=beta"
   },
   "keywords": [
     "react-native",
@@ -222,6 +223,9 @@
         "TrueSheetContentView": {
           "className": "TrueSheetContentView"
         },
+        "TrueSheetHeaderView": {
+          "className": "TrueSheetHeaderView"
+        },
         "TrueSheetFooterView": {
           "className": "TrueSheetFooterView"
         }

package/react-native.config.js

@@ -2,7 +2,10 @@ module.exports = {
   dependency: {
     platforms: {
       ios: {},
-      android: {},
+      android: {
+        componentDescriptors: ['TrueSheetViewComponentDescriptor'],
+        cmakeListsPath: '../android/src/main/jni/CMakeLists.txt',
+      },
     },
   },
   dependencies: {
@@ -14,4 +17,4 @@ module.exports = {
       },
     },
   },
-}
+};

package/src/TrueSheet.tsx

@@ -20,11 +20,11 @@ import type {
   DidDismissEvent,
   WillDismissEvent,
   MountEvent,
-  SizeChangeEvent,
 } from './TrueSheet.types';
 import TrueSheetViewNativeComponent from './fabric/TrueSheetViewNativeComponent';
 import TrueSheetContainerViewNativeComponent from './fabric/TrueSheetContainerViewNativeComponent';
 import TrueSheetContentViewNativeComponent from './fabric/TrueSheetContentViewNativeComponent';
+import TrueSheetHeaderViewNativeComponent from './fabric/TrueSheetHeaderViewNativeComponent';
 import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNativeComponent';
 
 import TrueSheetModule from './specs/NativeTrueSheetModule';
@@ -46,8 +46,6 @@ type NativeRef = ComponentRef<typeof TrueSheetViewNativeComponent>;
 
 interface TrueSheetState {
   shouldRenderNativeView: boolean;
-  containerWidth?: number;
-  containerHeight?: number;
 }
 
 export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
@@ -78,8 +76,6 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
 
     this.state = {
       shouldRenderNativeView: shouldRenderImmediately,
-      containerWidth: undefined,
-      containerHeight: undefined,
     };
 
     this.onMount = this.onMount.bind(this);
@@ -92,7 +88,6 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.onDragChange = this.onDragChange.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
     this.onPositionChange = this.onPositionChange.bind(this);
-    this.onSizeChange = this.onSizeChange.bind(this);
   }
 
   private validateDetents(): void {
@@ -255,18 +250,6 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.props.onPositionChange?.(event);
   }
 
-  private onSizeChange(event: SizeChangeEvent): void {
-    const { width, height } = event.nativeEvent;
-
-    // Update container view dimensions in state
-    this.setState({
-      containerWidth: width,
-      containerHeight: height,
-    });
-
-    // Internal handler only - not exposed to users
-  }
-
   /**
    * Present the Sheet by `index` (Promise-based)
    * @param index - Detent index (default: 0)
@@ -328,22 +311,25 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
   render(): ReactNode {
     const {
       detents = [0.5, 1],
-      backgroundColor = 'white',
+      backgroundColor,
       dismissible = true,
       grabber = true,
       dimmed = true,
       initialDetentIndex = -1,
       initialDetentAnimated = true,
       keyboardMode = 'resize',
-      dimmedIndex,
+      dimmedDetentIndex,
       blurTint,
       cornerRadius,
       maxHeight,
       edgeToEdgeFullScreen,
+      scrollable = false,
+      pageSizing = true,
       children,
       style,
+      header,
       footer,
-      testID,
+      ...rest
     } = this.props;
 
     // Trim to max 3 detents and clamp fractions
@@ -357,8 +343,21 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       return Math.min(1, detent);
     });
 
+    const containerStyle =
+      this.props.scrollable &&
+      Platform.select({
+        android: styles.scrollableAndroidContainer,
+      });
+
+    const contentStyle =
+      this.props.scrollable &&
+      Platform.select({
+        android: styles.scrollableContent,
+      });
+
     return (
       <TrueSheetViewNativeComponent
+        {...rest}
         ref={this.nativeRef}
         style={styles.sheetView}
         detents={resolvedDetents}
@@ -367,13 +366,15 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         cornerRadius={cornerRadius}
         grabber={grabber}
         dimmed={dimmed}
-        dimmedIndex={dimmedIndex}
+        dimmedDetentIndex={dimmedDetentIndex}
         keyboardMode={keyboardMode}
         initialDetentIndex={initialDetentIndex}
         initialDetentAnimated={initialDetentAnimated}
         dismissible={dismissible}
         maxHeight={maxHeight}
         edgeToEdgeFullScreen={edgeToEdgeFullScreen}
+        scrollable={scrollable}
+        pageSizing={pageSizing}
         onMount={this.onMount}
         onWillPresent={this.onWillPresent}
         onDidPresent={this.onDidPresent}
@@ -384,22 +385,19 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         onDragChange={this.onDragChange}
         onDragEnd={this.onDragEnd}
         onPositionChange={this.onPositionChange}
-        onSizeChange={this.onSizeChange}
       >
         {this.state.shouldRenderNativeView && (
-          <TrueSheetContainerViewNativeComponent
-            testID={testID}
-            style={{
-              width: this.state.containerWidth,
-              height: this.state.containerHeight,
-            }}
-            collapsable={false}
-          >
-            <TrueSheetContentViewNativeComponent style={style} collapsable={false}>
+          <TrueSheetContainerViewNativeComponent style={containerStyle}>
+            {header && (
+              <TrueSheetHeaderViewNativeComponent>
+                {isValidElement(header) ? header : createElement(header)}
+              </TrueSheetHeaderViewNativeComponent>
+            )}
+            <TrueSheetContentViewNativeComponent style={[style, contentStyle]}>
               {children}
             </TrueSheetContentViewNativeComponent>
             {footer && (
-              <TrueSheetFooterViewNativeComponent style={styles.footer} collapsable={false}>
+              <TrueSheetFooterViewNativeComponent style={styles.footer}>
                 {isValidElement(footer) ? footer : createElement(footer)}
               </TrueSheetFooterViewNativeComponent>
             )}
@@ -412,9 +410,25 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
 
 const styles = StyleSheet.create({
   sheetView: {
-    position: 'absolute',
-    width: '100%',
     zIndex: -9999,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+
+    // Android needs a fixed bottom to avoid jumping content
+    bottom: Platform.select({ android: 0 }),
+  },
+  scrollableAndroidContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  scrollableContent: {
+    flexGrow: 1,
+    flexBasis: 0,
   },
   footer: {
     position: 'absolute',

package/src/TrueSheet.types.ts

@@ -1,8 +1,6 @@
 import type { ComponentType, ReactElement } from 'react';
 import type { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
 
-import type { TrueSheetGrabberProps } from './TrueSheetGrabber';
-
 export interface DetentInfoEventPayload {
   /**
    * The index position from the provided `detents`.
@@ -33,21 +31,6 @@ export type DragChangeEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
 export type DragEndEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
 export type PositionChangeEvent = NativeSyntheticEvent<PositionChangeEventPayload>;
 
-/**
- * Internal event payload for size changes (not exposed to users)
- * @internal
- */
-export interface SizeChangeEventPayload {
-  width: number;
-  height: number;
-}
-
-/**
- * Internal event type for size changes (not exposed to users)
- * @internal
- */
-export type SizeChangeEvent = NativeSyntheticEvent<SizeChangeEventPayload>;
-
 /**
  * Blur style mapped to native values in IOS.
  *
@@ -57,30 +40,27 @@ export type BlurTint =
   | 'light'
   | 'dark'
   | 'default'
-  | 'extraLight'
+  | 'extra-light'
   | 'regular'
   | 'prominent'
-  | 'systemUltraThinMaterial'
-  | 'systemThinMaterial'
-  | 'systemMaterial'
-  | 'systemThickMaterial'
-  | 'systemChromeMaterial'
-  | 'systemUltraThinMaterialLight'
-  | 'systemThinMaterialLight'
-  | 'systemMaterialLight'
-  | 'systemThickMaterialLight'
-  | 'systemChromeMaterialLight'
-  | 'systemUltraThinMaterialDark'
-  | 'systemThinMaterialDark'
-  | 'systemMaterialDark'
-  | 'systemThickMaterialDark'
-  | 'systemChromeMaterialDark';
+  | 'system-ultra-thin-material'
+  | 'system-thin-material'
+  | 'system-material'
+  | 'system-thick-material'
+  | 'system-chrome-material'
+  | 'system-ultra-thin-material-light'
+  | 'system-thin-material-light'
+  | 'system-material-light'
+  | 'system-thick-material-light'
+  | 'system-chrome-material-light'
+  | 'system-ultra-thin-material-dark'
+  | 'system-thin-material-dark'
+  | 'system-material-dark'
+  | 'system-thick-material-dark'
+  | 'system-chrome-material-dark';
 
 /**
  * Supported Sheet detent.
- *
- * @platform android
- * @platform ios 15+
  */
 export type SheetDetent =
   /**
@@ -126,6 +106,9 @@ export interface TrueSheetProps extends ViewProps {
    * detents={['auto', 0.6, 1]}
    * ```
    *
+   * @note It's recommended to sort detents from smallest to largest.
+   * When using `auto`, place it at the first index if you plan to adjust content dynamically.
+   *
    * @default [0.5, 1]
    */
   detents?: SheetDetent[];
@@ -134,8 +117,6 @@ export interface TrueSheetProps extends ViewProps {
    * 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;
@@ -162,7 +143,7 @@ export interface TrueSheetProps extends ViewProps {
    *
    * @default 0
    */
-  dimmedIndex?: number;
+  dimmedDetentIndex?: number;
 
   /**
    * Prevents interactive dismissal of the Sheet.
@@ -173,8 +154,7 @@ export interface TrueSheetProps extends ViewProps {
 
   /**
    * Main sheet background color.
-
-   * @default white
+   * Uses system default when not provided.
    */
   backgroundColor?: ColorValue;
 
@@ -184,26 +164,28 @@ export interface TrueSheetProps extends ViewProps {
    * - `undefined` (not provided): Uses system default corner radius
    * - `0`: Sharp corners (no rounding)
    * - `> 0`: Custom corner radius value
-   *
-   * @platform android
-   * @platform ios 15+
    */
   cornerRadius?: number;
 
   /**
-   * Shows native grabber (or handle) on IOS.
+   * Shows a native grabber (or drag handle) on the sheet.
+   *
+   * iOS uses the native `UISheetPresentationController` grabber.
+   * Android renders a native view following Material Design 3 specifications.
    *
-   * @platform ios
    * @default true
    */
   grabber?: boolean;
 
   /**
-   * Grabber props to be used for android grabber or handle.
+   * Controls the sheet presentation style on iPad.
+   * When enabled (true), uses a large page sheet for better readability.
+   * When disabled (false), uses a centered form sheet.
    *
-   * @platform android
+   * @platform ios 17+
+   * @default true
    */
-  grabberProps?: TrueSheetGrabberProps;
+  pageSizing?: boolean;
 
   /**
    * The blur effect style on iOS.
@@ -228,11 +210,27 @@ export interface TrueSheetProps extends ViewProps {
    */
   edgeToEdgeFullScreen?: boolean;
 
+  /**
+   * A component that is fixed at the top of the Sheet content.
+   * Useful for search bars, titles, or other header content.
+   */
+  header?: ComponentType<unknown> | ReactElement;
+
   /**
    * A component that floats at the bottom of the Sheet.
    */
   footer?: ComponentType<unknown> | ReactElement;
 
+  /**
+   * Automatically pins ScrollView or FlatList to fit within the sheet's available space.
+   * When enabled, the ScrollView's top edge will be pinned below any top sibling views,
+   * and its left, right, and bottom edges will be pinned to the container.
+   *
+   * @platform ios
+   * @default false
+   */
+  scrollable?: boolean;
+
   /**
    * Determines how the software keyboard will impact the layout of the sheet.
    * Set to `pan` if you're working with `FlatList` with a `TextInput`.
@@ -278,27 +276,18 @@ export interface TrueSheetProps extends ViewProps {
   /**
    * Called when the sheet has began dragging.
    * Comes with the detent info.
-   *
-   * @platform android
-   * @platform ios 15+
    */
   onDragBegin?: (event: DragBeginEvent) => void;
 
   /**
    * Called when the sheet is being dragged.
    * Comes with the detent info.
-   *
-   * @platform android
-   * @platform ios 15+
    */
   onDragChange?: (event: DragChangeEvent) => void;
 
   /**
    * Called when the sheet dragging has ended.
    * Comes with the detent info.
-   *
-   * @platform android
-   * @platform ios 15+
    */
   onDragEnd?: (event: DragEndEvent) => void;
 
@@ -306,9 +295,6 @@ export interface TrueSheetProps extends ViewProps {
    * Called when the sheet's position changes.
    * This fires continuously during sheet position changes.
    * Comes with the detent info.
-   *
-   * @platform android
-   * @platform ios 15+
    */
   onPositionChange?: (event: PositionChangeEvent) => void;
 }

package/src/fabric/TrueSheetContainerViewNativeComponent.ts

@@ -5,4 +5,4 @@ export interface NativeProps extends ViewProps {
   // No props needed - container accesses props from parent TrueSheetView
 }
 
-export default codegenNativeComponent<NativeProps>('TrueSheetContainerView', {});
+export default codegenNativeComponent<NativeProps>('TrueSheetContainerView');

package/src/fabric/TrueSheetHeaderViewNativeComponent.ts

@@ -0,0 +1,8 @@
+import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  // Header-specific props can be added here if needed
+}
+
+export default codegenNativeComponent<NativeProps>('TrueSheetHeaderView', {});

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -19,11 +19,6 @@ export interface PositionChangeEventPayload {
   transitioning: boolean;
 }
 
-export interface SizeChangeEventPayload {
-  width: Double;
-  height: Double;
-}
-
 export interface NativeProps extends ViewProps {
   // Array properties
   detents?: ReadonlyArray<Float>;
@@ -33,7 +28,7 @@ export interface NativeProps extends ViewProps {
   background?: WithDefault<Int32, 0>;
   cornerRadius?: WithDefault<Double, -1>;
   initialDetentIndex?: WithDefault<Int32, -1>;
-  dimmedIndex?: WithDefault<Int32, 0>;
+  dimmedDetentIndex?: WithDefault<Int32, 0>;
 
   // String properties - use empty string as default to avoid nil insertion
   blurTint?: WithDefault<string, ''>;
@@ -45,6 +40,8 @@ export interface NativeProps extends ViewProps {
   dimmed?: WithDefault<boolean, true>;
   initialDetentAnimated?: WithDefault<boolean, true>;
   edgeToEdgeFullScreen?: WithDefault<boolean, false>;
+  scrollable?: WithDefault<boolean, false>;
+  pageSizing?: WithDefault<boolean, true>;
 
   // Event handlers
   onMount?: DirectEventHandler<null>;
@@ -57,7 +54,8 @@ export interface NativeProps extends ViewProps {
   onDragChange?: DirectEventHandler<DetentInfoEventPayload>;
   onDragEnd?: DirectEventHandler<DetentInfoEventPayload>;
   onPositionChange?: DirectEventHandler<PositionChangeEventPayload>;
-  onSizeChange?: DirectEventHandler<SizeChangeEventPayload>;
 }
 
-export default codegenNativeComponent<NativeProps>('TrueSheetView');
+export default codegenNativeComponent<NativeProps>('TrueSheetView', {
+  interfaceOnly: true,
+});

package/android/src/main/java/com/lodev09/truesheet/events/SizeChangeEvent.kt

@@ -1,27 +0,0 @@
-package com.lodev09.truesheet.events
-
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.PixelUtil
-import com.facebook.react.uimanager.events.Event
-
-/**
- * Fired when the root view's size changes
- * Payload: { width: number, height: number }
- */
-class SizeChangeEvent(surfaceId: Int, viewId: Int, private val width: Int, private val height: Int) :
-  Event<SizeChangeEvent>(surfaceId, viewId) {
-
-  override fun getEventName(): String = EVENT_NAME
-
-  override fun getEventData(): WritableMap =
-    Arguments.createMap().apply {
-      putDouble("width", PixelUtil.toDIPFromPixel(width.toFloat()).toDouble())
-      putDouble("height", PixelUtil.toDIPFromPixel(height.toFloat()).toDouble())
-    }
-
-  companion object {
-    const val EVENT_NAME = "topSizeChange"
-    const val REGISTRATION_NAME = "onSizeChange"
-  }
-}

package/ios/events/OnSizeChangeEvent.h

@@ -1,28 +0,0 @@
-//
-//  Created by Jovanni Lo (@lodev09)
-//  Copyright (c) 2024-present. All rights reserved.
-//
-//  This source code is licensed under the MIT license found in the
-//  LICENSE file in the root directory of this source tree.
-//
-
-#ifdef RCT_NEW_ARCH_ENABLED
-
-#import <Foundation/Foundation.h>
-#import <react/renderer/components/TrueSheetSpec/EventEmitters.h>
-
-using namespace facebook::react;
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface OnSizeChangeEvent : NSObject
-
-+ (void)emit:(std::shared_ptr<const facebook::react::EventEmitter>)eventEmitter
-       width:(CGFloat)width
-      height:(CGFloat)height;
-
-@end
-
-NS_ASSUME_NONNULL_END
-
-#endif  // RCT_NEW_ARCH_ENABLED

package/ios/events/OnSizeChangeEvent.mm

@@ -1,30 +0,0 @@
-//
-//  Created by Jovanni Lo (@lodev09)
-//  Copyright (c) 2024-present. All rights reserved.
-//
-//  This source code is licensed under the MIT license found in the
-//  LICENSE file in the root directory of this source tree.
-//
-
-#ifdef RCT_NEW_ARCH_ENABLED
-
-#import "OnSizeChangeEvent.h"
-
-@implementation OnSizeChangeEvent
-
-+ (void)emit:(std::shared_ptr<const facebook::react::EventEmitter>)eventEmitter
-       width:(CGFloat)width
-      height:(CGFloat)height {
-  if (!eventEmitter)
-    return;
-
-  auto emitter = std::static_pointer_cast<TrueSheetViewEventEmitter const>(eventEmitter);
-  TrueSheetViewEventEmitter::OnSizeChange event;
-  event.width = static_cast<double>(width);
-  event.height = static_cast<double>(height);
-  emitter->onSizeChange(event);
-}
-
-@end
-
-#endif  // RCT_NEW_ARCH_ENABLED